1308: Only use collapse on sidebar when on mobile.

itk-dev · May 7, 2024 · eb63cf7 · eb63cf7
1 parent cfc89d8
commit eb63cf7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/web/themes/custom/cfia/css/style.css b/web/themes/custom/cfia/css/style.css
@@ -289,7 +289,12 @@ a:hover, .link:hover {
 }
 
 .sidebar button.collapsed i {
-  transform: rotate(180deg);
+  display: none;
+  /*transform: rotate(180deg);*/
+}
+
+.sidebar .collapse:not(.show){
+  display: block;
 }
 
 /* Blockquotes */
@@ -397,4 +402,13 @@ a:hover, .link:hover {
     max-height: 10vh;
     width: auto;
   }
+
+  .sidebar button.collapsed i {
+    display: block;
+    transform: rotate(180deg);
+  }
+
+  .sidebar .collapse:not(.show){
+    display: none;
+  }
 }
diff --git a/web/themes/custom/cfia/templates/block/_sidebar-block.html.twig b/web/themes/custom/cfia/templates/block/_sidebar-block.html.twig
@@ -1,19 +1,18 @@
 <div class="mb-3">
-
   {% set accordionTarget = elements['#plugin_id']|clean_class %}
 
   {{ title_prefix }}
     {% if label %}
     <div class="title-border d-flex justify-content-between align-items-start">
       {# Sidebar widget title #}
       <h2{{ title_attributes }} class="sidebar-title">{{ label }}</h2>
-      <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ accordionTarget }}" aria-expanded="true" aria-controls="collapse{{ accordionTarget }}">
+      <button class="btn collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ accordionTarget }}" aria-expanded="false" aria-controls="collapse{{ accordionTarget }}">
         <i class="fas fa-angle-up"></i>
       </button>
     </div>
     {% endif %}
   {{ title_suffix }}
-  <div class="collapse show" id="collapse{{ accordionTarget }}" />
+  <div class="collapse" id="collapse{{ accordionTarget }}" />
     {% block content %}
       <div{{ content_attributes.addClass('content') }}>
         {{ content }}