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

src/admin/pages/lists/items-page.vue

@@ -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;

src/admin/scss/_variables.scss

@@ -405,3 +405,45 @@ $modal-z: 9999999;
     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;   
+}

src/admin/scss/_view-mode-slide.scss

@@ -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;
     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 {
+        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 {
-            width: 120px;
+            width: 80px;
             height: auto;
             border-radius: 0px;
         }
@@ -94,39 +56,6 @@
                 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;
-                }
-   
-            }
-        }
-    
     
     }
 }

src/theme-helper/view-mode-slide.vue

@@ -14,10 +14,25 @@
                     <p>{{ $i18n.get('info_no_item_found') }}</p>
                 </div>
             </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 
-                        :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 -->  
+                        <!-- thumbnail -->  
-                        <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)">  
+                            <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>           
+                        
                     </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;