From 58f8b35f5985a222aa0243858e5cc2fb20677fe0 Mon Sep 17 00:00:00 2001
From: rdrew <rdrew@upei.ca>
Date: Thu, 9 Oct 2025 12:39:18 -0300
Subject: [PATCH] mobile facets

---
 css/base/variables.css                     |  1 +
 css/components/islandora_mods.css          | 60 ++++++++++++++++++----
 js/facet-hide.js                           | 25 +++++----
 templates/layout/region--sidebar.html.twig |  2 +-
 4 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/css/base/variables.css b/css/base/variables.css
index afb3aed..e3f4b98 100755
--- a/css/base/variables.css
+++ b/css/base/variables.css
@@ -119,6 +119,7 @@
   --color--red: #e33f1e; /* Red */
   --color--gold: #fdca40; /* Gold */
   --color--green: #3fa21c;
+  --color--bdh-red: #753E3F;
 
   /* Header */
   --header-height-wide-when-fixed: calc(6 * var(--sp));
diff --git a/css/components/islandora_mods.css b/css/components/islandora_mods.css
index c9383df..bec8836 100755
--- a/css/components/islandora_mods.css
+++ b/css/components/islandora_mods.css
@@ -1,18 +1,58 @@
 /*mobile search facets*/
 .region--sidebar {
   .block {
-    display: none;
+    /*display: none;*/
+    margin-bottom: 2em;
+  }
+  .block.hidden {
+    /*display: none !important;*/
   }
 }
-#toggle-facets {
-  background-color: #007bff;
-  color: white;
-  border: none;
-  padding: 10px 15px;
-  border-radius: 4px;
-  cursor: pointer;
+
+@media (max-width: 1000px) {
+  .facet-wrapper {
+    display: none;
+  }
+  #toggle-facets {
+    background-color: var(--color--bdh-red);
+  transition: filter 0.2s ease; /* Optional: smooth transition */
+  font-size:1em;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 4px;
+    cursor: pointer;
+    /*temp*/
+    display: block;
+    width: 100%;
+    &:hover {
+      filter: brightness(1.5); /* Lightens by 10% */
+    }
+  }
+  .sidebar-grid {
+    display: grid;
+    grid-template-columns: 1fr; /* Single column for vertical stacking */
+    gap: 1rem; /* Optional: adds space between items */
+  }
+  .sidebar-grid .region--sidebar {
+    grid-column: 1 / 15;
+  }
+
+  main {
+    order: 2; /* Places main after aside visually */
+  }
+
+  aside {
+    order: 1; /* Places aside before main visually */
+  }
+  .sidebar-grid > .site-main {
+    grid-column: 1 / 15;
+    align-self: flex-start;
+  }
 }
 
-#toggle-facets:hover {
-  background-color: #0056b3;
+@media (min-width: 1001px) {
+  #toggle-facets {
+    display: none;
+  }
 }
diff --git a/js/facet-hide.js b/js/facet-hide.js
index a0b14b5..43f015b 100755
--- a/js/facet-hide.js
+++ b/js/facet-hide.js
@@ -1,13 +1,16 @@
-document.addEventListener('DOMContentLoaded', function() {
-  const toggleButton = document.getElementById('toggle-facets');
-  const facets = document.querySelectorAll('.region--sidebar .block'); // Scope to sidebar
+(function (Drupal) {
+  document.addEventListener("DOMContentLoaded", function () {
+    const toggleButton = document.getElementById("toggle-facets");
+    const facetWrapper = document.querySelector(
+      ".region--sidebar .facet-wrapper"
+    );
 
-  toggleButton.addEventListener('click', function() {
-    const isHidden = facets[0].style.display === 'none' || !facets[0].style.display; // Assume initial 'none' from CSS
-    const newDisplay = isHidden ? 'block' : 'none';
-
-    facets.forEach(facet => {
-      facet.style.display = newDisplay;
-    });
+    if (toggleButton && facetWrapper) {
+      toggleButton.addEventListener("click", function () {
+        const isHidden =
+          facetWrapper.style.display === "none" || !facetWrapper.style.display; // Accounts for CSS default
+        facetWrapper.style.display = isHidden ? "block" : "none";
+      });
+    }
   });
-});
+})(Drupal);
diff --git a/templates/layout/region--sidebar.html.twig b/templates/layout/region--sidebar.html.twig
index 108b392..039d54a 100755
--- a/templates/layout/region--sidebar.html.twig
+++ b/templates/layout/region--sidebar.html.twig
@@ -23,7 +23,7 @@
 
 {% if content %}
   <aside{{ attributes.addClass(classes) }}>
-	<button id="toggle-facets">Toggle Facets</button>
+	<button id="toggle-facets">Search the Collection</button>
     {{ content }}
   </aside>
 {% endif %}