jgerstbe/webframe
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

[U] add top bar, btn

Browse source
This commit is contained in:
Jan 2020-07-22 22:49:31 +02:00
parent f85e02dd90
commit e426f6f6f1
3 changed files with 17 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
public/app.js
View file

@ -80,12 +80,14 @@ new Vue({
document.querySelector('.controls').style.display = ""; document.querySelector('.controls').style.display = "";
this.animateCSS('.floatBtn.left', 'fadeInLeft'); this.animateCSS('.floatBtn.left', 'fadeInLeft');
this.animateCSS('.floatBtn.right', 'fadeInRight'); this.animateCSS('.floatBtn.right', 'fadeInRight');
this.animateCSS('.floatBar.top .btn.right', 'fadeInRight');
this.animateCSS('.floatBar.bottom .btn', 'fadeInUp'); this.animateCSS('.floatBar.bottom .btn', 'fadeInUp');
this.controlsTimeout = setTimeout(() => this.toggleControls(), 15000); this.controlsTimeout = setTimeout(() => this.toggleControls(), 15000);
} else { } else {
Promise.all([ Promise.all([
this.animateCSS('.floatBtn.left', 'fadeOutLeft'), this.animateCSS('.floatBtn.left', 'fadeOutLeft'),
this.animateCSS('.floatBtn.right', 'fadeOutRight'), this.animateCSS('.floatBtn.right', 'fadeOutRight'),
this.animateCSS('.floatBar.top .btn.right', 'fadeOutRight'),
this.animateCSS('.floatBar.bottom .btn', 'fadeOutDown') this.animateCSS('.floatBar.bottom .btn', 'fadeOutDown')
]).then(data => { ]).then(data => {
document.querySelector('.controls').style.display = "none" document.querySelector('.controls').style.display = "none"
@ -117,6 +119,7 @@ new Vue({
setTimeout(() => { setTimeout(() => {
this.animateCSS('.floatBtn.left', 'fadeInLeft'); this.animateCSS('.floatBtn.left', 'fadeInLeft');
this.animateCSS('.floatBtn.right', 'fadeInRight'); this.animateCSS('.floatBtn.right', 'fadeInRight');
this.animateCSS('.floatBar.top .btn.right', 'fadeInRight');
this.animateCSS('.floatBar.bottom .btn', 'fadeInUp'); this.animateCSS('.floatBar.bottom .btn', 'fadeInUp');
this.controlsTimeout = setTimeout(() => this.toggleControls(), 2500); this.controlsTimeout = setTimeout(() => this.toggleControls(), 2500);
}, 0); }, 0);

9
public/index.css
View file

@ -98,6 +98,15 @@ body {
margin: 0 auto; margin: 0 auto;
} }
#app .floatBar.top {
top: 10px;
}
#app .floatBar.top .btn.right {
float: right;
margin-right: 10px;
}
#app .empty { #app .empty {
text-align: center; text-align: center;
margin-top: 48vh; margin-top: 48vh;

5
public/index.html
View file

@ -15,6 +15,11 @@
<div v-if="files && files.length > 0"> <div v-if="files && files.length > 0">
<!-- controls --> <!-- controls -->
<div class="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()"> <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> <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>