tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds hide-on-click controls when in mobile scren.

This commit is contained in:
Mateus Machado Luna 2018-09-24 16:41:05 -03:00
parent 247ac72203
commit 66acedb7cb
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/admin/scss/_view-mode-slide.scss
View File

@ -152,6 +152,7 @@
align-items: center; align-items: center;
min-height: calc(100vh - 142px); min-height: calc(100vh - 142px);
margin-bottom: 1rem; margin-bottom: 1rem;
transition: height 0.3s, min-height 0.3s;
.slide-main-content { .slide-main-content {
position: relative; position: relative;
@ -184,6 +185,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
transition: opacity 0.3s, visibility 0.3s, display 0.3s;
h1 { h1 {
color: white; color: white;
@ -257,6 +259,10 @@
} }
} }
} }
.tainacan-slides-list {
position: relative;
transition: opacity 0.3s, visibility 0.3s, display 0.3s;
}
#tainacan-slide-container { #tainacan-slide-container {
padding: 0 $page-side-padding; padding: 0 $page-side-padding;
display: flex; display: flex;
@ -298,4 +304,15 @@
} }
} }
} }
.hide-controls {
@media screen and (max-width: 768px) {
.slide-title-area,
.tainacan-slides-list {
visibility: hidden;
opacity: 0;
}
.tainacan-slide-main-view {
min-height: 100vh;
}
}
}

13
src/theme-helper/view-mode-slide.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div>
<div :class="{ 'hide-controls': hideControls }">
<!-- CLOSE BUTTON --> <!-- CLOSE BUTTON -->
<button <button
v-tooltip="{ v-tooltip="{
@ -81,7 +82,6 @@
@keyup.left.prevent="slideIndex > 0 ? prevSlide() : null" @keyup.left.prevent="slideIndex > 0 ? prevSlide() : null"
@keyup.right.prevent="slideIndex < slideItems.length - 1 ? nextSlide() : null"> @keyup.right.prevent="slideIndex < slideItems.length - 1 ? nextSlide() : null">
<div class="table-wrapper"> <div class="table-wrapper">
<!-- SLIDE MAIN VIEW--> <!-- SLIDE MAIN VIEW-->
<section class="tainacan-slide-main-view"> <section class="tainacan-slide-main-view">
@ -93,7 +93,9 @@
<icon class="mdi mdi-48px mdi-chevron-left"/> <icon class="mdi mdi-48px mdi-chevron-left"/>
</span> </span>
</button> </button>
<div class="slide-main-content"> <div
@click.prevent="hideControls = !hideControls"
class="slide-main-content">
<transition <transition
mode="out-in" mode="out-in"
@ -150,7 +152,7 @@
</section> </section>
<!-- SLIDE ITEMS LIST --> <!-- SLIDE ITEMS LIST -->
<div style="position: relative;"> <div class="tainacan-slides-list">
<swiper <swiper
@slideChange="onSlideChange()" @slideChange="onSlideChange()"
ref="mySwiper" ref="mySwiper"
@ -212,7 +214,8 @@ export default {
collectionId: Number, collectionId: Number,
displayedMetadata: Array, displayedMetadata: Array,
items: Array, items: Array,
totalItems: Number totalItems: Number,
hideControls: true,
}, },
components: { components: {
swiper, swiper,