Adds clicable sequence of items to evoke main item on slide view mode.
This commit is contained in:
Mateus Machado Luna
parent
a93f61a585
commit
3fc3dd7135
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<div
|
||||
v-hammer:swipe="onSwipeFiltersMenu"
|
||||
:class="{'repository-level-page': isRepositoryLevel}">
|
||||
:class="{
|
||||
'repository-level-page': isRepositoryLevel,
|
||||
'is-fullscreen': viewMode == 'slide'
|
||||
}">
|
||||
|
||||
<!-- SEARCH AND FILTERS --------------------- -->
|
||||
<!-- Filter menu compress button -->
|
||||
|
|
@ -1174,6 +1177,18 @@
|
|||
|
||||
@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 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -404,4 +404,46 @@ $modal-z: 9999999;
|
|||
animation-name: filters-menu-out;
|
||||
animation-duration: 0.2s;
|
||||
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;
|
||||
}
|
||||
|
|
@ -1,8 +1,16 @@
|
|||
.tainacan-records-container {
|
||||
min-height: 50vh;
|
||||
.tainacan-slide-main-view {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 65vh;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tainacan-slide-container {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
overflow: auto;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
justify-content: space-evenly;
|
||||
|
|
@ -20,57 +28,11 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
padding: 0.75rem;
|
||||
|
||||
img {
|
||||
width: 120px;
|
||||
width: 80px;
|
||||
height: auto;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
|
@ -93,40 +55,7 @@
|
|||
overflow: hidden;
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,25 @@
|
|||
<p>{{ $i18n.get('info_no_item_found') }}</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- RECORDS VIEW MODE -->
|
||||
<div class="tainacan-records-container">
|
||||
<!-- SLIDE MAIN VIEW-->
|
||||
<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
|
||||
:href="item.url"
|
||||
@click="slideIndex = index"
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
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-html="item.title != undefined ? item.title : ''" />
|
||||
|
||||
<!-- Remaining metadata -->
|
||||
<div class="media">
|
||||
|
||||
<div class="list-metadata media-body">
|
||||
<div
|
||||
class="thumbnail"
|
||||
v-if="item.thumbnail != undefined">
|
||||
<img :src="item['thumbnail'].tainacan_full ? item['thumbnail'].tainacan_full : (item['thumbnail'].full ? item['thumbnail'].full : 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>
|
||||
<!-- 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>
|
||||
|
|
@ -91,10 +84,11 @@ export default {
|
|||
collectionId: Number,
|
||||
displayedMetadata: Array,
|
||||
items: Array,
|
||||
isLoading: false
|
||||
isLoading: false,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
slideIndex: 0,
|
||||
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
|
||||
}
|
||||
},
|
||||
|
|
@ -114,13 +108,6 @@ export default {
|
|||
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>
|
||||
|
|
@ -135,7 +122,7 @@ export default {
|
|||
$gray4: #898d8f;
|
||||
$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 {
|
||||
padding: 0.75rem;
|
||||
|
|
|
|||
Loading…
Reference in New Issue