Refactor filterui controller

public/css/dist/advanced-search.css

@@ -1,150 +1,150 @@
-/* 
-Base styles for the filter sidebar and its transitions.
-Handles showing/hiding the sidebar smoothly.
-*/
-.filter-sidebar {
-    transition: all 0.3s ease;
-    position: relative;
-}
-
-/* 
-Smooth transition for the filter body (the inner panel).
-Ensures expanding/collapsing feels fluid.
-*/
-.filter-body {
-    transition: all 0.3s ease;
-    overflow: hidden;
-}
-
-/* 
-Fade-in/out effect for any element with this class when shown/hidden.
-*/
-.filter-content {
-    transition: opacity 0.2s ease;
-}
-
-/* 
-Fade-in/out for filter section title and clear text.
-*/
-.filter-title,
-.clear-text {
-    transition: opacity 0.2s ease;
-}
-
-/* ---------- Desktop styles ---------- */
-@media (min-width: 769px) {
-    /* 
-    When collapsed, the sidebar is skinny and its content is hidden.
-    */
-}
-
-/* ---------- Mobile/Tablet styles ---------- */
-@media (max-width: 768px) {
-    /* 
-    Sidebar takes full width and less margin on mobile.
-    */
-    .filter-sidebar {
-        width: 100% !important;
-        margin-bottom: 15px;
-    }
-    
-    /* 
-    Collapsed sidebar hides content and disables interaction.
-    */
-}
-
-/* 
-Ensures filter panel container uses full width and is padded.
-Makes it responsive.
-*/
-.container {
-    width: 100%;
-    margin: 0 auto;
-    padding: 10px;
-    box-sizing: border-box;
-}
-
-/* 
-Makes the advanced search filters section block-level and full width.
-*/
-#advancedSearchFilters {
-    display: block;
-    max-width: 100%;
-    margin: 0;
-}
-.advancedSearchPanel--with-buffer {
-    min-height: calc(100% + 70px);
-    padding-bottom: 70px; /* gives room for floating buttons */
-}
-
-/* 
-Scrollable filter panel body, with padding.
-*/
-.box-body {
-    overflow-y: auto;
-    padding: 15px;
-}
-
-/* 
-On small screens, limit box-body max height to 75% of viewport.
-Makes scrolling manageable on mobile.
-*/
-@media (max-width: 768px) {
-  .box-body {
-    max-height: 75vh;
-  }
-}
-
-/* 
-On desktop, take up all available vertical height.
-*/
-@media (min-width: 769px) {
-  .box-body {
-    height: 100%;
-  }
-}
-
-/* 
-Button blocks have a little space between each for clarity.
-*/
-
-/* 
-Custom thin scrollbar for the filter area.
-Aesthetic tweak.
-*/
-.box-body::-webkit-scrollbar {
-    width: 6px;
-}
-
-/* 
-Collapse button tweaks for spacing.
-*/
-.collapse-toggle {
-    margin-right: 5px;
-}
-
-/* 
-By default, hide both the desktop and mobile collapse icons.
-*/
-.icon-desktop,
-.icon-mobile {
-  display: none;
-}
-
-/* 
-Show the desktop collapse icon on desktop screens.
-*/
-@media (min-width: 768px) {
-  .icon-desktop {
-    display: inline;
-  }
-}
-
-/* 
-Show the mobile collapse icon on mobile screens.
-*/
-@media (max-width: 767px) {
-  .icon-mobile {
-    display: inline;
-  }
-}
+/* 
+Base styles for the filter sidebar and its transitions.
+Handles showing/hiding the sidebar smoothly.
+*/
+.filter-sidebar {
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+/* 
+Smooth transition for the filter body (the inner panel).
+Ensures expanding/collapsing feels fluid.
+*/
+.filter-body {
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+
+/* 
+Fade-in/out effect for any element with this class when shown/hidden.
+*/
+.filter-content {
+    transition: opacity 0.2s ease;
+}
+
+/* 
+Fade-in/out for filter section title and clear text.
+*/
+.filter-title,
+.clear-text {
+    transition: opacity 0.2s ease;
+}
+
+/* ---------- Desktop styles ---------- */
+@media (min-width: 769px) {
+    /* 
+    When collapsed, the sidebar is skinny and its content is hidden.
+    */
+}
+
+/* ---------- Mobile/Tablet styles ---------- */
+@media (max-width: 768px) {
+    /* 
+    Sidebar takes full width and less margin on mobile.
+    */
+    .filter-sidebar {
+        width: 100% !important;
+        margin-bottom: 15px;
+    }
+
+    /* 
+    Collapsed sidebar hides content and disables interaction.
+    */
+}
+
+/* 
+Ensures filter panel container uses full width and is padded.
+Makes it responsive.
+*/
+.container {
+    width: 100%;
+    margin: 0 auto;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+/* 
+Makes the advanced search filters section block-level and full width.
+*/
+#advancedSearchFilters {
+    display: block;
+    max-width: 100%;
+    margin: 0;
+}
+.advancedSearchPanel--with-buffer {
+    min-height: calc(100% + 70px);
+    padding-bottom: 70px; /* gives room for floating buttons */
+}
+
+/* 
+Scrollable filter panel body, with padding.
+*/
+.box-body {
+    overflow-y: auto;
+    padding: 15px;
+}
+
+/* 
+On small screens, limit box-body max height to 75% of viewport.
+Makes scrolling manageable on mobile.
+*/
+@media (max-width: 768px) {
+  .box-body {
+    max-height: 75vh;
+  }
+}
+
+/* 
+On desktop, take up all available vertical height.
+*/
+@media (min-width: 769px) {
+  .box-body {
+    height: 100%;
+  }
+}
+
+/* 
+Button blocks have a little space between each for clarity.
+*/
+
+/* 
+Custom thin scrollbar for the filter area.
+Aesthetic tweak.
+*/
+.box-body::-webkit-scrollbar {
+    width: 6px;
+}
+
+/* 
+Collapse button tweaks for spacing.
+*/
+.collapse-toggle {
+    margin-right: 5px;
+}
+
+/* 
+By default, hide both the desktop and mobile collapse icons.
+*/
+.icon-desktop,
+.icon-mobile {
+  display: none;
+}
+
+/* 
+Show the desktop collapse icon on desktop screens.
+*/
+@media (min-width: 768px) {
+  .icon-desktop {
+    display: inline;
+  }
+}
+
+/* 
+Show the mobile collapse icon on mobile screens.
+*/
+@media (max-width: 767px) {
+  .icon-mobile {
+    display: inline;
+  }
+}