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 = "";
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);

9
public/index.css
View file

@ -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;

5
public/index.html
View file

@ -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>