diff --git a/public/app.js b/public/app.js index 831f093..5fbac36 100644 --- a/public/app.js +++ b/public/app.js @@ -4,7 +4,7 @@ new Vue({ files: [], index: 0, interval: null, - carouselTimeout: 100, + carouselTimeout: 20000, carouselActive: true }, methods: { @@ -14,9 +14,10 @@ new Vue({ } else { this.index = 0; } - if (!this.carouselActive) { - this.startCarousel(); - } + }, + nextClick: function () { + this.next(); + this.startCarousel(); }, prev: function () { if (this.index - 1 >= 0) { @@ -24,9 +25,10 @@ new Vue({ } else { this.index = this.files.length - 1; } - if (!this.carouselActive) { - this.startCarousel(); - } + }, + prevClick: function () { + this.next(); + this.startCarousel(); }, loadData: function () { fetch('api/files').then(response => response.json()).then( diff --git a/public/index.css b/public/index.css index 51448da..6007e20 100644 --- a/public/index.css +++ b/public/index.css @@ -1,51 +1,56 @@ -#app, #app div { - display: flex; - height: 100%; - width: 100%; - } - - #app img { - width: 100%; - height: auto; - z-index: 0; - align-self: center; - } - - #app video { - height: 100vh; - margin: 0 auto; - display: block; - } - - #app .floatBtn { - display: block; - width: 40px; - height: 32px; - border-radius: 50%; - background-color: rgba(0,0,0,.3); - color: white; - z-index: 10; - position: absolute; - top: 50vh; - text-align: center; - padding-top: 8px; - } - - #app .floatBtn.left { - left: 10px; - } - - #app .floatBtn.right { - right: 10px; - } - - #app .floatBtn.bottom { - left: 49%; - top: 90%; - } - - #app .empty { - text-align: center; - margin-top: 48vh; - } - \ No newline at end of file +body { + margin: 0; +} + +#app, +#app div { + display: flex; + height: 100%; + width: 100%; +} + +#app img { + width: 100%; + height: auto; + max-height: 100%; + z-index: 0; + align-self: center; +} + +#app video { + height: 100%; + margin: 0 auto; + display: block; +} + +#app .floatBtn { + display: block; + width: 40px; + height: 32px; + border-radius: 50%; + background-color: rgba(0, 0, 0, .3); + color: white; + z-index: 10; + position: absolute; + top: 50vh; + text-align: center; + padding-top: 8px; +} + +#app .floatBtn.left { + left: 10px; +} + +#app .floatBtn.right { + right: 10px; +} + +#app .floatBtn.bottom { + left: 49%; + top: 90%; +} + +#app .empty { + text-align: center; + margin-top: 48vh; +} diff --git a/public/index.html b/public/index.html index 7f57c7f..1b1e1f9 100644 --- a/public/index.html +++ b/public/index.html @@ -10,10 +10,10 @@
-
+
-
+