Adds arrow buttons and keyboard to change active item. Implements sliding animation.

src/admin/components/lists/recursive-term-item.vue

@@ -62,7 +62,9 @@
             </a>
         </span>
     </div>
-    <transition-group name="filter-item">
+    <transition-group 
+            class="children-area"
+            name="filter-item">
         <div    
                 class="term-item"
                 :style="{
@@ -279,6 +281,7 @@ export default {
             }
         }
 
+
         .children-icon {
             color: $blue2;
             position: absolute;

src/admin/scss/_variables.scss

@@ -407,7 +407,48 @@ $modal-z: 9999999;
 }
 
 // Slide
-@keyframes slide-in {
+@keyframes slide-left-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-left-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-left-enter-active {
+    animation-name: slide-left-in;
+    animation-duration: 0.4s;
+    animation-timing-function: ease;   
+}
+.slide-left-leave-active {
+    animation-name: slide-left-out;
+    animation-duration: 0.4s;
+    animation-timing-function: ease;   
+}
+
+@keyframes slide-right-in {
     from {
         opacity: 0;
         -ms-transform: translate(10%, 0%); /* IE 9 */
@@ -422,7 +463,7 @@ $modal-z: 9999999;
     }
 }
 
-@keyframes slide-out {
+@keyframes slide-right-out {
     from {
         opacity: 1;
         -ms-transform: translate(0, 0); /* IE 9 */
@@ -437,13 +478,13 @@ $modal-z: 9999999;
     }
 }
 
-.slide-enter-active {
-    animation-name: slide-in;
+.slide-right-enter-active {
+    animation-name: slide-right-in;
     animation-duration: 0.4s;
     animation-timing-function: ease;   
 }
-.slide-leave-active {
-    animation-name: slide-out;
+.slide-right-leave-active {
+    animation-name: slide-right-out;
     animation-duration: 0.4s;
     animation-timing-function: ease;   
 }

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

@@ -1,9 +1,34 @@
 .tainacan-slide-main-view {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
     min-height: 65vh;
     margin-bottom: 1rem;
+
+    .slide-control-arrow {
+        background-color: transparent;
+        border: none !important;
+        height: 3.5rem;
+        width: 3.5rem;
+        text-align: center;
+        vertical-align: middle;
+
+        &:focus, &:active {
+            border: none;
+            outline: none;
+        }
+        .icon {
+            height: 3.5rem;
+            width: 3.5rem;
+            text-align: center;
+
+            .mdi::before {
+                line-height: 5rem;
+                font-size: 5rem;
+                color: $turquoise5;
+            }
+        }
+    }
 }
 
 .tainacan-slide-container {
@@ -28,12 +53,13 @@
     }
 
     .tainacan-slide-item {
-        padding: 0 0 0.75rem 0;
+        padding: 0 0 0.25rem 0;
         margin: 0.75rem;
+        border-bottom: 4px solid transparent; 
         transition: border-bottom 0.2s;
 
         &.active-item {
-            border-bottom: 4px solid $turquoise5;
+            border-bottom: 4px solid $turquoise5 !important;
         }
         &:hover {
             border-bottom: 4px solid $gray2;

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

@@ -1,5 +1,8 @@
 <template>
-    <div class="table-container">
+    <div 
+            class="table-container"
+            @keyup.left="slideIndex > 1 ? prevSlide() : null"
+            @keyup.right="slideIndex < items.length - 1 ? nextSlide() : null">
         <div class="table-wrapper">
             <!-- Empty result placeholder -->
             <section
@@ -16,9 +19,17 @@
             </section>
             <!-- SLIDE MAIN VIEW-->
             <section class="tainacan-slide-main-view">
+                <button 
+                        @click="prevSlide()"
+                        v-show="slideIndex > 0"
+                        class="slide-control-arrow">
+                    <span class="icon is-large">
+                        <icon class="mdi mdi-48px mdi-chevron-left"/>
+                    </span>
+                </button>
                 <transition 
                         mode="out-in"
-                        name="slide" >
+                        :name="goingRight ? 'slide-right' : 'slide-left'" >
                     <div
                             :key="index"
                             v-for="(item, index) of items"
@@ -28,6 +39,14 @@
                         </a>
                     </div>
                 </transition>
+                <button 
+                        @click="nextSlide()"
+                        v-if="slideIndex < items.length - 1"
+                        class="slide-control-arrow">
+                    <span class="icon is-large has-text-turoquoise5">
+                        <icon class="mdi mdi-48px mdi-chevron-right"/>
+                    </span>
+                </button>
             </section>
             <!-- SLIDE ITEMS LIST -->
             <div class="tainacan-slide-container">
@@ -36,7 +55,9 @@
                         :key="index"
                         v-for="(item, index) of items"
                         class="tainacan-slide-item"
-                        :class="{'active-item': slideIndex == index}">
+                        :class="{'active-item': slideIndex == index}"
+                        @keyup.left="slideIndex > 1 ? prevSlide() : null"
+                        @keyup.right="slideIndex < items.length - 1 ? nextSlide() : null">
                     <!-- <div :href="item.url"> -->
                         <!-- Title -->           
                         <p 
@@ -86,6 +107,7 @@ export default {
         displayedMetadata: Array,
         items: Array,
         isLoading: false,
+        goingRight: true
     },
     data () {
         return {
@@ -94,8 +116,13 @@ export default {
         }
     },
     methods: {
-        goToItemPage(item) {
-            window.location.href = item.url;   
+        nextSlide() {
+            this.goingRight = true;
+            this.slideIndex++;
+        },
+        prevSlide() {
+            this.goingRight = false;
+            this.slideIndex--;
         },
         renderMetadata(itemMetadata, column) {
 
@@ -126,9 +153,8 @@ export default {
 
     @import "../../src/admin/scss/_view-mode-slide.scss";
 
-    .tainacan-records-container .tainacan-record .metadata-title {
-        padding: 0.75rem;
-        margin-bottom: 0px;
+    .table-wrapper {
+        overflow-x: hidden !important;
     }
 </style>