Adds clicable sequence of items to evoke main item on slide view mode.

This commit is contained in:
Mateus Machado Luna 2018-09-14 13:06:37 -03:00
parent a93f61a585
commit 3fc3dd7135
4 changed files with 101 additions and 128 deletions

View File

@ -1,7 +1,10 @@
<template> <template>
<div <div
v-hammer:swipe="onSwipeFiltersMenu" v-hammer:swipe="onSwipeFiltersMenu"
:class="{'repository-level-page': isRepositoryLevel}"> :class="{
'repository-level-page': isRepositoryLevel,
'is-fullscreen': viewMode == 'slide'
}">
<!-- SEARCH AND FILTERS --------------------- --> <!-- SEARCH AND FILTERS --------------------- -->
<!-- Filter menu compress button --> <!-- Filter menu compress button -->
@ -1174,6 +1177,18 @@
@import '../../scss/_variables.scss'; @import '../../scss/_variables.scss';
.is-fullscreen {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
z-index: 9999999999999999999999999999;
background-color: black;
}
.collapse-all { .collapse-all {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;

View File

@ -405,3 +405,45 @@ $modal-z: 9999999;
animation-duration: 0.2s; animation-duration: 0.2s;
animation-timing-function: ease; animation-timing-function: ease;
} }
// Slide
@keyframes slide-in {
from {
opacity: 0;
-ms-transform: translate(10%, 0%); /* IE 9 */
-webkit-transform: translate(10%, 0%); /* Safari */
transform: translate(10%, 0%);
}
to {
opacity: 1;
-ms-transform: translate(0, 0); /* IE 9 */
-webkit-transform: translate(0, 0); /* Safari */
transform: translate(0, 0);
}
}
@keyframes slide-out {
from {
opacity: 1;
-ms-transform: translate(0, 0); /* IE 9 */
-webkit-transform: translate(0, 0); /* Safari */
transform: translate(0, 0);
}
to {
opacity: 0;
-ms-transform: translate(-10%, 0%); /* IE 9 */
-webkit-transform: translate(-10%, 0%); /* Safari */
transform: translate(-10%, 0%);
}
}
.slide-enter-active {
animation-name: slide-in;
animation-duration: 0.4s;
animation-timing-function: ease;
}
.slide-leave-active {
animation-name: slide-out;
animation-duration: 0.4s;
animation-timing-function: ease;
}

View File

@ -1,8 +1,16 @@
.tainacan-records-container { .tainacan-slide-main-view {
min-height: 50vh; display: flex;
justify-content: center;
align-items: center;
min-height: 65vh;
margin-bottom: 1rem;
}
.tainacan-slide-container {
padding: 0; padding: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: nowrap;
overflow: auto;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
justify-content: space-evenly; justify-content: space-evenly;
@ -20,57 +28,11 @@
} }
.tainacan-record { .tainacan-record {
background-color: #f6f6f6;
padding: 0px;
flex-basis: 0;
margin: 0 auto 30px auto;
width: 100%;
max-width: 425px;
min-height: 100px;
cursor: pointer;
text-decoration: none;
display: block;
&:hover { padding: 0.75rem;
background-color: $gray1 !important;
}
.record-checkbox {
position: absolute;
margin-left: 1.0rem;
margin-top: 7px;
}
.actions-area {
position: relative;
float: right;
top: -5px;
padding-right: 12px;
width: 80px;
display: flex;
justify-content: space-between;
visibility: hidden;
opacity: 0;
transition: visibility 0.2s, opacity 0.2s;
}
&:hover .actions-area {
visibility: visible;
opacity: 1.0;
}
.record-line {
height: 1px;
background-color: $gray2;
margin-left: -44px;
margin-right: -44px;
opacity: 0;
visibility: hidden;
}
.thumbnail {
float: right;
margin: 0 0 25px 25px;
}
img { img {
width: 120px; width: 80px;
height: auto; height: auto;
border-radius: 0px; border-radius: 0px;
} }
@ -94,39 +56,6 @@
transition: background-color 0.3s; transition: background-color 0.3s;
} }
} }
&:hover .metadata-title {
background-color: $gray2 !important;
}
&:hover .media {
background-color: $gray1 !important;
}
.media {
width: 100%;
.list-metadata {
padding: 25px;
flex: 1;
font-size: 0.6875rem;
color: $gray4;
overflow: hidden;
width: 100%;
.metadata-label {
font-size: 0.75rem;
font-weight: 700;
color: #454647;
}
.metadata-value {
font-size: 0.75rem;
margin-bottom: 1rem;
color: $gray4;
}
}
}
} }
} }

View File

@ -14,10 +14,25 @@
<p>{{ $i18n.get('info_no_item_found') }}</p> <p>{{ $i18n.get('info_no_item_found') }}</p>
</div> </div>
</section> </section>
<!-- RECORDS VIEW MODE --> <!-- SLIDE MAIN VIEW-->
<div class="tainacan-records-container"> <section class="tainacan-slide-main-view">
<transition
mode="out-in"
name="slide" >
<div
:key="index"
v-for="(item, index) of items"
v-if="index == slideIndex">
<a :href="item.url" >
<img :src="item.thumbnail != undefined && item['thumbnail'].full ? item['thumbnail'].full : thumbPlaceholderPath">
</a>
</div>
</transition>
</section>
<!-- SLIDE ITEMS LIST -->
<div class="tainacan-slide-container">
<a <a
:href="item.url" @click="slideIndex = index"
:key="index" :key="index"
v-for="(item, index) of items" v-for="(item, index) of items"
class="tainacan-record"> class="tainacan-record">
@ -47,35 +62,13 @@
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')" 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 : ''" /> v-html="item.title != undefined ? item.title : ''" />
<!-- Remaining metadata --> <!-- thumbnail -->
<div class="media">
<div class="list-metadata media-body">
<div <div
class="thumbnail" class="thumbnail"
v-if="item.thumbnail != undefined"> v-if="item.thumbnail != undefined">
<img :src="item['thumbnail'].tainacan_full ? item['thumbnail'].tainacan_full : (item['thumbnail'].full ? item['thumbnail'].full : thumbPlaceholderPath)"> <img :src="item['thumbnail']['tainacan_small'] ? item['thumbnail']['tainacan_small'] : (item['thumbnail'].thumb ? item['thumbnail'].thumb : thumbPlaceholderPath)">
</div>
<span
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 == 'description')">
<h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
<p
v-html="item.description != undefined ? item.description : ''"
class="metadata-value"/>
</span>
<span
v-for="(column, index) in displayedMetadata"
:key="index"
v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
<h3 class="metadata-label">{{ column.name }}</h3>
<p
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
class="metadata-value"/>
</span>
</div>
</div> </div>
</a> </a>
<!-- </div> --> <!-- </div> -->
</div> </div>
@ -91,10 +84,11 @@ export default {
collectionId: Number, collectionId: Number,
displayedMetadata: Array, displayedMetadata: Array,
items: Array, items: Array,
isLoading: false isLoading: false,
}, },
data () { data () {
return { return {
slideIndex: 0,
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png' thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
} }
}, },
@ -114,13 +108,6 @@ export default {
return metadata.value_as_html; return metadata.value_as_html;
} }
} }
},
mounted() {
this.$modal.open(
`<div class="main-picture">
<img src="` + (this.items[0]['thumbnail'].full ? this.items[0]['thumbnail'].full : this.thumbPlaceholderPath) + `">
</div>`
);
} }
} }
</script> </script>
@ -135,7 +122,7 @@ export default {
$gray4: #898d8f; $gray4: #898d8f;
$gray5: #454647; $gray5: #454647;
@import "../../src/admin/scss/_view-mode-records.scss"; @import "../../src/admin/scss/_view-mode-slide.scss";
.tainacan-records-container .tainacan-record .metadata-title { .tainacan-records-container .tainacan-record .metadata-title {
padding: 0.75rem; padding: 0.75rem;