From e426f6f6f1e954e4409b5e50ccd4a17d7a05866b Mon Sep 17 00:00:00 2001
From: jgerstbe <jannikanni.jg@gmail.com>
Date: Wed, 22 Jul 2020 22:49:31 +0200
Subject: [PATCH] [U] add top bar, btn

---
 public/app.js     | 3 +++
 public/index.css  | 9 +++++++++
 public/index.html | 5 +++++
 3 files changed, 17 insertions(+)

diff --git a/public/app.js b/public/app.js
index ee35f88..ee8101f 100644
--- a/public/app.js
+++ b/public/app.js
@@ -80,12 +80,14 @@ new Vue({
         document.querySelector('.controls').style.display = "";
         this.animateCSS('.floatBtn.left', 'fadeInLeft');
         this.animateCSS('.floatBtn.right', 'fadeInRight');
+        this.animateCSS('.floatBar.top .btn.right', 'fadeInRight');
         this.animateCSS('.floatBar.bottom .btn', 'fadeInUp');
         this.controlsTimeout = setTimeout(() => this.toggleControls(), 15000);
       } else {
         Promise.all([
           this.animateCSS('.floatBtn.left', 'fadeOutLeft'),
           this.animateCSS('.floatBtn.right', 'fadeOutRight'),
+          this.animateCSS('.floatBar.top .btn.right', 'fadeOutRight'),
           this.animateCSS('.floatBar.bottom .btn', 'fadeOutDown')
         ]).then(data => {
           document.querySelector('.controls').style.display = "none"
@@ -117,6 +119,7 @@ new Vue({
       setTimeout(() => {
         this.animateCSS('.floatBtn.left', 'fadeInLeft');
         this.animateCSS('.floatBtn.right', 'fadeInRight');
+        this.animateCSS('.floatBar.top .btn.right', 'fadeInRight');
         this.animateCSS('.floatBar.bottom .btn', 'fadeInUp');
         this.controlsTimeout = setTimeout(() => this.toggleControls(), 2500);
       }, 0);
diff --git a/public/index.css b/public/index.css
index d80e98f..eecf201 100644
--- a/public/index.css
+++ b/public/index.css
@@ -98,6 +98,15 @@ body {
   margin: 0 auto;
 }
 
+#app .floatBar.top {
+  top: 10px;
+}
+
+#app .floatBar.top .btn.right {
+  float: right;
+  margin-right: 10px;
+}
+
 #app .empty {
   text-align: center;
   margin-top: 48vh;
diff --git a/public/index.html b/public/index.html
index ab8fabc..6031e43 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,11 @@
         <div v-if="files && files.length > 0">
             <!-- controls -->
             <div class="controls">
+                <div class="floatBar top">
+                    <div class="btn right" v-on:click="toggleCarousel()">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z" fill="currentColor"/> <path d="M2 12.0322C2 11.4799 2.44772 11.0322 3 11.0322H21C21.5523 11.0322 22 11.4799 22 12.0322C22 12.5845 21.5523 13.0322 21 13.0322H3C2.44772 13.0322 2 12.5845 2 12.0322Z" fill="currentColor"/> <path d="M3 17.0645C2.44772 17.0645 2 17.5122 2 18.0645C2 18.6167 2.44772 19.0645 3 19.0645H21C21.5523 19.0645 22 18.6167 22 18.0645C22 17.5122 21.5523 17.0645 21 17.0645H3Z" fill="currentColor"/></svg>
+                    </div>
+                </div>
                 <div class="btn floatBtn left" v-on:click="prevClick()">
                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" fill="currentColor"/></svg>
                 </div>