From 2d949364eb001af0543bb6613ade51b11f11ffb8 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 23 Jan 2024 11:27:42 -0300
Subject: [PATCH] Fixes styling issues of slideshow component in Vue3 #794.

---
 .../class-tainacan-theme-helper.php           |  2 +-
 .../scss/_view-mode-slideshow.scss            | 34 ++++++++++++++++++
 .../blocks/faceted-search/theme.vue           | 35 -------------------
 3 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/src/classes/theme-helper/class-tainacan-theme-helper.php b/src/classes/theme-helper/class-tainacan-theme-helper.php
index 36ec432c0..baa06b8c1 100644
--- a/src/classes/theme-helper/class-tainacan-theme-helper.php
+++ b/src/classes/theme-helper/class-tainacan-theme-helper.php
@@ -619,7 +619,7 @@ class Theme_Helper {
 		// If in a collection page
 		$collection = tainacan_get_collection($args);
 		if ($collection) {
-			$props .= "collection-id='" . $collection->get_id() . "' ";
+			$props .= "data-collection-id='" . $collection->get_id() . "' ";
 			$default_view_mode = $collection->get_default_view_mode();
 			$enabled_view_modes = $collection->get_enabled_view_modes();
 			$default_order = $collection->get_default_order();
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_view-mode-slideshow.scss b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_view-mode-slideshow.scss
index 4181202a0..7d542bd00 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_view-mode-slideshow.scss
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_view-mode-slideshow.scss
@@ -1,3 +1,37 @@
+@keyframes open-full-screen {
+    from {
+        opacity: 0;
+        transform: scale(0.6);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1.0);
+    }
+}
+
+.is-fullscreen {
+    position: fixed !important;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999999999;
+    background-color: var(--tainacan-black) !important;
+    transition: background-color 0.3s ease, width 0.3s ease, height 0.3s ease;
+    animation: open-full-screen 0.4s ease;
+
+    .filters-menu {
+        display: none !important;
+    }
+    .metadata-alert {
+        position: absolute;
+    }
+}
+
 #close-fullscren-button,
 #item-page-button,
 #metedata-panel-button,
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue
index e51efc121..f85d6e5eb 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue
@@ -982,7 +982,6 @@
 
                     if ( this.$el && this.$el.parentElement && this.$el.parentElement.className !==  "theme-items-list has-mounted " + classesAsString )
                         this.$el.parentElement.className = "theme-items-list has-mounted " + classesAsString;
-            
                 },
                 immediate: true,
             },
@@ -1937,40 +1936,6 @@
 
 <style lang="scss" scoped>
 
-    @keyframes open-full-screen {
-        from {
-            opacity: 0;
-            transform: scale(0.6);
-        }
-        to {
-            opacity: 1;
-            transform: scale(1.0);
-        }
-    }
-
-    .is-fullscreen {
-        position: fixed !important;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        width: 100%;
-        height: 100%;
-        width: 100vw;
-        height: 100vh;
-        z-index: 999999999;
-        background-color: var(--tainacan-black) !important;
-        transition: background-color 0.3s ease, width 0.3s ease, height 0.3s ease;
-        animation: open-full-screen 0.4s ease;
-
-        .filters-menu {
-            display: none !important;
-        }
-        .metadata-alert {
-            position: absolute;
-        }
-    }
-
     .advanced-search-form-submit {
         display: flex;
         justify-content: flex-end;