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

Improvements in slide list alignment.

This commit is contained in:
Mateus Machado Luna 2018-10-02 11:40:06 -03:00
parent cb6fd738b0
commit 45d9df7848
2 changed files with 64 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/admin/scss/_view-mode-slideshow.scss
View File

@ -185,13 +185,10 @@
justify-content: space-between;
align-items: center;
min-height: calc(100vh - 142px);
margin-bottom: 1rem;
transition: height 0.3s, min-height 0.3s;
.slide-main-content {
position: relative;
min-height: 70vh;
max-height: 70vh;
width: 100vw;
display: flex;
align-items: center;
@ -206,22 +203,37 @@
max-width: 100vh;
text-align: center;
color: white;
max-height: calc(100vh - 115px);
overflow: hidden;
transition: height 0.3s, max-height 0.3s;
}
.empty_document {
.empty-document {
font-size: 4rem;
font-weight: normal;
color: $gray4;
text-align: center;
position: relative;
width: 100%;
height: 80%;
max-height: calc(100vh - 115px);
overflow: hidden;
transition: height 0.3s, max-height 0.3s;
margin: auto;
img {
height: 100%;
}
p {
position: absolute;
margin: calc(50% - 4rem) auto;
width: 100%;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
font-size: 3rem;
p {
margin: calc(50% - 1rem) auto;
}
}
@media screen and (max-width: 768px) {
font-size: 2rem;
p {
@ -233,9 +245,10 @@
}
.slide-title-area {
width: 100%;
position: relative;
top: -85px;
margin-bottom: -85px;
position: absolute;
bottom: 115px;
// top: -85px;
// margin-bottom: -85px;
background-color: rgba(0,0,0,0.5);
padding: 1rem $page-side-padding;
display: flex;
@ -324,9 +337,12 @@
}
}
.tainacan-slides-list {
background-color: rgba(0,0,0,0.5);
position: relative;
transition: opacity 0.3s, visibility 0.3s, display 0.3s;
min-height: 60px;
height: 115px;
min-height: 115px;
padding: 0.75rem 0;
.loading-icon {
width: 100%;
@ -336,7 +352,6 @@
}
#tainacan-slide-container {
background-color: rgba(0,0,0,0.5);
padding: 0 $page-side-padding;
display: flex;
flex-wrap: nowrap;
@ -362,7 +377,7 @@
cursor: pointer;
&.active-item img {
border-bottom: 4px solid $turquoise5 !important;
border-bottom: 4px solid $turquoise5;
}
&:hover img{
border-bottom: 4px solid $gray2;
@ -381,7 +396,7 @@
}
}
.hide-controls {
@media screen and (max-width: 768px) {
// @media screen and (max-width: 768px) {
.slide-control-arrow {
visibility: hidden;
opacity: 0;
@ -404,6 +419,26 @@
}
.tainacan-slide-main-view {
min-height: 100vh;
.slide-main-content {
&>div,
&>div audio,
&>div img,
&>div video,
&>div.tainacan-embed-container {
max-height: 100vh;
}
}
}
}
.empty-document {
max-height: 100vh;
img {
width: auto;
}
}
@media screen and (max-width: 768px) {
.empty-document img { width: 100% !important; }
}
// }
}

18
src/theme-helper/view-mode-slideshow.vue
View File

@ -134,7 +134,7 @@
v-if="!isLoadingItem && slideItems.length > 0 && (item.document != undefined && item.document != undefined && item.document != '')"
v-html="item.document_as_html" />
<div v-else>
<div class="empty_document">
<div class="empty-document">
<p>{{ $i18n.get('label_document_empty') }}</p>
<img
:alt="$i18n.get('label_document_empty')"
@ -152,7 +152,11 @@
</span>
</button>
</section>
<section
<!-- SLIDE ITEMS LIST -->
<div class="tainacan-slides-list">
<section
@click.prevent="onHideControls()"
v-if="slideItems[slideIndex] != undefined"
class="slide-title-area">
@ -170,9 +174,6 @@
:time="this.slideTimeout/1000" />
</button>
</section>
<!-- SLIDE ITEMS LIST -->
<div class="tainacan-slides-list">
<swiper
@slideChange="onSlideChange()"
ref="mySwiper"
@ -585,6 +586,13 @@ export default {
.table-wrapper {
overflow: hidden !important;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-between;
height: 100vh;
width: 100vw;
}
</style>