From f85e02dd90ad717a0ca0bd5b375764013a738e87 Mon Sep 17 00:00:00 2001
From: jgerstbe <jannikanni.jg@gmail.com>
Date: Wed, 22 Jul 2020 22:37:16 +0200
Subject: [PATCH] [U] improved play/pause-btn horizontal align

---
 index.js          |  1 -
 public/app.js     |  6 +++---
 public/index.css  | 23 +++++++++++++++++------
 public/index.html | 12 +++++++-----
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/index.js b/index.js
index 4beaf4f..deb925e 100644
--- a/index.js
+++ b/index.js
@@ -72,4 +72,3 @@ app.get('/api/files', (req, res) => {
 });
 app.use(express.static(path.join(__dirname, 'public')));
 app.listen(process.env.PORT, () => console.log(`Example app listening at http://localhost:${process.env.PORT}`));
-
diff --git a/public/app.js b/public/app.js
index 90d486d..ee35f88 100644
--- a/public/app.js
+++ b/public/app.js
@@ -80,13 +80,13 @@ new Vue({
         document.querySelector('.controls').style.display = "";
         this.animateCSS('.floatBtn.left', 'fadeInLeft');
         this.animateCSS('.floatBtn.right', 'fadeInRight');
-        this.animateCSS('.floatBtn.bottom', 'fadeInUp');
+        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('.floatBtn.bottom', 'fadeOutDown')
+          this.animateCSS('.floatBar.bottom .btn', 'fadeOutDown')
         ]).then(data => {
           document.querySelector('.controls').style.display = "none"
         });
@@ -117,7 +117,7 @@ new Vue({
       setTimeout(() => {
         this.animateCSS('.floatBtn.left', 'fadeInLeft');
         this.animateCSS('.floatBtn.right', 'fadeInRight');
-        this.animateCSS('.floatBtn.bottom', 'fadeInUp');
+        this.animateCSS('.floatBar.bottom .btn', 'fadeInUp');
         this.controlsTimeout = setTimeout(() => this.toggleControls(), 2500);
       }, 0);
     });
diff --git a/public/index.css b/public/index.css
index 59b5e34..d80e98f 100644
--- a/public/index.css
+++ b/public/index.css
@@ -60,19 +60,22 @@ body {
   display: block;
 }
 
-#app .floatBtn {
+#app .btn {  
   display: block;
   width: 40px;
   height: 32px;
   border-radius: 50%;
   background-color: rgba(0, 0, 0, .3);
   color: white;
-  position: fixed;
-  top: 50vh;
   text-align: center;
   padding-top: 8px;
 }
 
+#app .floatBtn {
+  position: fixed;
+  top: 50vh;
+}
+
 #app .floatBtn.left {
   left: 10px;
 }
@@ -81,12 +84,20 @@ body {
   right: 10px;
 }
 
-#app .floatBtn.bottom {
-  left: 49%;
-  top: unset;
+
+#app .floatBar {
+  width: 100vw;
+  position: fixed;
+}
+
+#app .floatBar.bottom {
   bottom: 10px;
 }
 
+#app .floatBar.bottom .btn {
+  margin: 0 auto;
+}
+
 #app .empty {
   text-align: center;
   margin-top: 48vh;
diff --git a/public/index.html b/public/index.html
index 1f93a48..ab8fabc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,15 +15,17 @@
         <div v-if="files && files.length > 0">
             <!-- controls -->
             <div class="controls">
-                <div class="floatBtn left" v-on:click="prevClick()">
+                <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>
-                <div class="floatBtn right" v-on:click="nextClick()">
+                <div class="btn floatBtn right" v-on:click="nextClick()">
                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z" fill="currentColor"/></svg>
                 </div>
-                <div class="floatBtn bottom" v-on:click="toggleCarousel()">
-                    <svg v-if="!carouselActive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 12.3301L9 16.6603L9 8L15 12.3301Z" fill="currentColor"/></svg>
-                    <svg v-if="carouselActive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 7H8V17H11V7Z" fill="currentColor"/> <path d="M13 17H16V7H13V17Z" fill="currentColor"/></svg>
+                <div class="floatBar bottom">
+                    <div class="btn" v-on:click="toggleCarousel()">
+                        <svg v-if="!carouselActive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 12.3301L9 16.6603L9 8L15 12.3301Z" fill="currentColor"/></svg>
+                        <svg v-if="carouselActive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 7H8V17H11V7Z" fill="currentColor"/> <path d="M13 17H16V7H13V17Z" fill="currentColor"/></svg>
+                    </div>
                 </div>
             </div>
             <!-- touch canvas -->