Adds title to slider.
This commit is contained in:
Mateus Machado Luna
parent
950a6a8a56
commit
6b3f32dd48
|
|
@ -410,30 +410,30 @@ $modal-z: 9999999;
|
|||
@keyframes slide-left-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
-ms-transform: translate(-10%, 0%); /* IE 9 */
|
||||
-webkit-transform: translate(-10%, 0%); /* Safari */
|
||||
transform: translate(-10%, 0%);
|
||||
-ms-transform: translate(-5%, 0%) scale(0.95); /* IE 9 */
|
||||
-webkit-transform: translate(-5%, 0%) scale(0.95); /* Safari */
|
||||
transform: translate(-5%, 0%) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-ms-transform: translate(0, 0); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0); /* Safari */
|
||||
transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0) scale(1); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0) scale(1); /* Safari */
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-left-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-ms-transform: translate(0, 0); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0); /* Safari */
|
||||
transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0) scale(1); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0) scale(1); /* Safari */
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
-ms-transform: translate(10%, 0%); /* IE 9 */
|
||||
-webkit-transform: translate(10%, 0%); /* Safari */
|
||||
transform: translate(10%, 0%);
|
||||
-ms-transform: translate(10%, 0%) scale(0.95); /* IE 9 */
|
||||
-webkit-transform: translate(10%, 0%) scale(0.95); /* Safari */
|
||||
transform: translate(10%, 0%) scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -451,40 +451,40 @@ $modal-z: 9999999;
|
|||
@keyframes slide-right-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
-ms-transform: translate(10%, 0%); /* IE 9 */
|
||||
-webkit-transform: translate(10%, 0%); /* Safari */
|
||||
transform: translate(10%, 0%);
|
||||
-ms-transform: translate(10%, 0%) scale(0.95); /* IE 9 */
|
||||
-webkit-transform: translate(10%, 0%) scale(0.95); /* Safari */
|
||||
transform: translate(10%, 0%) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-ms-transform: translate(0, 0); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0); /* Safari */
|
||||
transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0) scale(1); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0) scale(1); /* Safari */
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-right-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
-ms-transform: translate(0, 0); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0); /* Safari */
|
||||
transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0) scale(1); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0) scale(1); /* Safari */
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
-ms-transform: translate(-10%, 0%); /* IE 9 */
|
||||
-webkit-transform: translate(-10%, 0%); /* Safari */
|
||||
transform: translate(-10%, 0%);
|
||||
-ms-transform: translate(-5%, 0%) scale(0.95); /* IE 9 */
|
||||
-webkit-transform: translate(-5%, 0%) scale(0.95); /* Safari */
|
||||
transform: translate(-5%, 0%) scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-right-enter-active {
|
||||
animation-name: slide-right-in;
|
||||
animation-duration: 0.4s;
|
||||
animation-duration: 0.3s;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
.slide-right-leave-active {
|
||||
animation-name: slide-right-out;
|
||||
animation-duration: 0.4s;
|
||||
animation-duration: 0.3s;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
|
|
@ -5,7 +5,16 @@
|
|||
min-height: 65vh;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.slide-main-content {
|
||||
img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-control-arrow {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none !important;
|
||||
height: 3.5rem;
|
||||
|
|
@ -19,7 +28,7 @@
|
|||
}
|
||||
.icon {
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
width: 2.5rem;
|
||||
text-align: center;
|
||||
|
||||
.mdi::before {
|
||||
|
|
@ -30,7 +39,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.slide-title-area {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: -80px;
|
||||
margin-bottom: -80px;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
padding: 1rem 0;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.tainacan-slide-container {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
class="table-container"
|
||||
@keyup.left="slideIndex > 1 ? prevSlide() : null"
|
||||
@keyup.left="slideIndex > 0 ? prevSlide() : null"
|
||||
@keyup.right="slideIndex < items.length - 1 ? nextSlide() : null">
|
||||
<div class="table-wrapper">
|
||||
<!-- Empty result placeholder -->
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<section class="tainacan-slide-main-view">
|
||||
<button
|
||||
@click="prevSlide()"
|
||||
v-show="slideIndex > 0"
|
||||
:style="{ visibility: slideIndex > 0 ? 'visible' : 'hidden' }"
|
||||
class="slide-control-arrow">
|
||||
<span class="icon is-large">
|
||||
<icon class="mdi mdi-48px mdi-chevron-left"/>
|
||||
|
|
@ -33,7 +33,8 @@
|
|||
<div
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
v-if="index == slideIndex">
|
||||
v-if="index == slideIndex"
|
||||
class="slide-main-content">
|
||||
<a :href="item.url" >
|
||||
<img :src="item.thumbnail != undefined && item['thumbnail'].full ? item['thumbnail'].full : thumbPlaceholderPath">
|
||||
</a>
|
||||
|
|
@ -41,13 +42,19 @@
|
|||
</transition>
|
||||
<button
|
||||
@click="nextSlide()"
|
||||
v-if="slideIndex < items.length - 1"
|
||||
:style="{ visibility: slideIndex < items.length - 1 ? 'visible' : 'hidden' }"
|
||||
class="slide-control-arrow">
|
||||
<span class="icon is-large has-text-turoquoise5">
|
||||
<icon class="mdi mdi-48px mdi-chevron-right"/>
|
||||
</span>
|
||||
</button>
|
||||
</section>
|
||||
<section
|
||||
v-if="items[slideIndex] != undefined"
|
||||
class="slide-title-area">
|
||||
<h1>{{ items[slideIndex].title }}</h1>
|
||||
</section>
|
||||
|
||||
<!-- SLIDE ITEMS LIST -->
|
||||
<div class="tainacan-slide-container">
|
||||
<a
|
||||
|
|
@ -56,43 +63,17 @@
|
|||
v-for="(item, index) of items"
|
||||
class="tainacan-slide-item"
|
||||
:class="{'active-item': slideIndex == index}"
|
||||
@keyup.left="slideIndex > 1 ? prevSlide() : null"
|
||||
@keyup.left="slideIndex > 0 ? prevSlide() : null"
|
||||
@keyup.right="slideIndex < items.length - 1 ? nextSlide() : null">
|
||||
<!-- <div :href="item.url"> -->
|
||||
<!-- Title -->
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-for="(column, index) in displayedMetadata"
|
||||
:key="index"
|
||||
class="metadata-title"
|
||||
v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: item.title != undefined ? item.title : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-for="(column, index) in tableMetadata"
|
||||
:key="index"
|
||||
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||
v-html="item.title != undefined ? item.title : ''" />
|
||||
|
||||
<!-- thumbnail -->
|
||||
<div
|
||||
class="thumbnail"
|
||||
v-if="item.thumbnail != undefined">
|
||||
<img :src="item['thumbnail']['tainacan_small'] ? item['thumbnail']['tainacan_small'] : (item['thumbnail'].thumb ? item['thumbnail'].thumb : thumbPlaceholderPath)">
|
||||
</div>
|
||||
|
||||
</a>
|
||||
<!-- </div> -->
|
||||
<!-- thumbnail -->
|
||||
<div
|
||||
class="thumbnail"
|
||||
v-if="item.thumbnail != undefined">
|
||||
<img :src="item['thumbnail']['tainacan_small'] ? item['thumbnail']['tainacan_small'] : (item['thumbnail'].thumb ? item['thumbnail'].thumb : thumbPlaceholderPath)">
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -122,7 +103,8 @@ export default {
|
|||
},
|
||||
prevSlide() {
|
||||
this.goingRight = false;
|
||||
this.slideIndex--;
|
||||
if (this.slideIndex > 0)
|
||||
this.slideIndex--;
|
||||
},
|
||||
renderMetadata(itemMetadata, column) {
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue