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

[U] improved play/pause-btn horizontal align

Browse source
This commit is contained in:
Jan 2020-07-22 22:37:16 +02:00
parent 33ab6d56b2
commit f85e02dd90
4 changed files with 27 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.js
View file

@ -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}`));

6
public/app.js
View file

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

23
public/index.css
View file

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

8
public/index.html
View file

@ -15,17 +15,19 @@
<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()">
<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 -->
<div class="touchCanvas" v-on:click="toggleControls()"></div>
<!-- content -->