Adds hide-on-click controls when in mobile scren.

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

@@ -152,6 +152,7 @@
     align-items: center;
     min-height: calc(100vh - 142px);
     margin-bottom: 1rem;
+    transition: height 0.3s, min-height 0.3s;
 
     .slide-main-content {
         position: relative;
@@ -184,6 +185,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    transition: opacity 0.3s, visibility 0.3s, display 0.3s;
 
     h1 {
         color: white;
@@ -257,6 +259,10 @@
         }
     }
 }
+.tainacan-slides-list {
+    position: relative;
+    transition: opacity 0.3s, visibility 0.3s, display 0.3s;
+}
 #tainacan-slide-container {
     padding: 0 $page-side-padding;
     display: flex;
@@ -298,4 +304,15 @@
         }
     }
 }
-
+.hide-controls {
+    @media screen and (max-width: 768px) {
+        .slide-title-area,
+        .tainacan-slides-list {
+            visibility: hidden;
+            opacity: 0;
+        }
+        .tainacan-slide-main-view {
+            min-height: 100vh;
+        }
+    }
+}

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

@@ -1,5 +1,6 @@
 <template>
-    <div>
+
+    <div :class="{ 'hide-controls': hideControls }">
         <!-- CLOSE BUTTON -->
         <button
                 v-tooltip="{
@@ -81,7 +82,6 @@
                 @keyup.left.prevent="slideIndex > 0 ? prevSlide() : null"
                 @keyup.right.prevent="slideIndex < slideItems.length - 1 ? nextSlide() : null">
             <div class="table-wrapper">
-                
 
                 <!-- SLIDE MAIN VIEW-->
                 <section class="tainacan-slide-main-view">
@@ -93,7 +93,9 @@
                             <icon class="mdi mdi-48px mdi-chevron-left"/>
                         </span> 
                     </button>
-                    <div class="slide-main-content">
+                    <div 
+                            @click.prevent="hideControls = !hideControls"
+                            class="slide-main-content">
 
                         <transition 
                                 mode="out-in"
@@ -150,7 +152,7 @@
                 </section>
 
                 <!-- SLIDE ITEMS LIST --> 
-                <div style="position: relative;">
+                <div class="tainacan-slides-list">
                     <swiper 
                             @slideChange="onSlideChange()"
                             ref="mySwiper"
@@ -212,7 +214,8 @@ export default {
         collectionId: Number,
         displayedMetadata: Array,
         items: Array,
-        totalItems: Number
+        totalItems: Number,
+        hideControls: true,
     },  
     components: {
         swiper,