improved filter box handeling, added filtering dropdown example to co…

…mpare/contrast options.
odidev · Mar 4, 2024 · a12ebbf · a12ebbf
1 parent 13577ef
commit a12ebbf
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 103 deletions.
diff --git a/assets/css/list-pages.css b/assets/css/list-pages.css
@@ -151,7 +151,7 @@ html[theme='dark'] ads-expansion-panel.learning-path-filters {
 }
 
 /* mobile facets styling */
-div#facets-background > ads-expansion-panel.learning-path-filters {
+div.facets-background > ads-expansion-panel.learning-path-filters {
     --ads-expansion-panel-border-color: var(--arm-color-base);
     --ads-expansion-panel-content-background-color: var(--arm-color-base);
     --ads-expansion-panel-toggle-background-color: var(--arm-color-base);

diff --git a/assets/css/mobile.css b/assets/css/mobile.css
@@ -20,9 +20,9 @@ div.overlay-styling {
 /* Basic behavior of overlay and z-indexing components */
 ads-button#filter-button.is-open { z-index: 5;}
 
-html[theme='dark']   div#facets-background { background-color: var(--arm-color-surface); }
-html[theme='light']  div#facets-background { background-color: var(--arm-light-grey-alt);}
-html[theme='sw-hub'] div#facets-background { background-color: var(--arm-light-grey-alt);}
+html[theme='dark']   div.facets-background { background-color: var(--arm-color-surface); }
+html[theme='light']  div.facets-background { background-color: var(--arm-light-grey-alt);}
+html[theme='sw-hub'] div.facets-background { background-color: var(--arm-light-grey-alt);}
 
 
 

diff --git a/themes/arm-design-system-hugo-theme/layouts/index.html b/themes/arm-design-system-hugo-theme/layouts/index.html
@@ -64,18 +64,19 @@
     <div class="c-row md:is-collapsed u-gap-1-1/2 u-flex-nowrap u-padding-top-2 u-padding-bottom-2-1/2">
         <!-- Filter bar on left -->
         <div class="c-col u-hide lg:u-display-block u-flex-shrink-0 filter-column-div">
-            <div id="filter-container-div">
-                {{/* DROPDOWN MULTI CATEGORY STRUCTURE */}}
-                {{ partial "eco-dashboard/filter-dropdown-multilevel.html" (dict "context" . "title" "Category" "items" $filter_category_dict)}}
-
-                {{ partial "eco-dashboard/filter-box.html" (dict "context" . "title" "License" "items" $filter_licenses)}}
-
-                {{/* Radio buttons */}}
-                {{/* {{ partial "eco-dashboard/filter-box.html" (dict "context" . "title" "Category" "items" $filter_categories)}}  */}}
-
-                {{/* DROPDOWN SINGLE CATEGORY STRUCTURE 
-                {{ partial "eco-dashboard/filter-dropdown.html" (dict "context" . "title" "Category" "items" $filter_categories)}} */}}
-
+            <div id="desktop-filters">
+                <div id="filters-movable">
+                    {{/* DROPDOWN MULTI CATEGORY STRUCTURE */}}
+                    {{ partial "eco-dashboard/filter-dropdown-multilevel.html" (dict "context" . "title" "Category" "items" $filter_category_dict)}}
+                    {{ partial "eco-dashboard/filter-box.html" (dict "context" . "title" "License" "items" $filter_licenses)}}
+
+                    {{/* Radio buttons */}}
+                    {{/* {{ partial "eco-dashboard/filter-box.html" (dict "context" . "title" "Category" "items" $filter_categories)}}  */}}
+
+                    {{/* DROPDOWN SINGLE CATEGORY STRUCTURE  */}}
+                    {{ partial "eco-dashboard/filter-dropdown.html" (dict "context" . "title" "Category" "items" $filter_categories)}}
+
+                </div>
             </div>
         </div>
 
@@ -143,7 +144,7 @@ <h2 id="recently-added-note" class="minhang-mist-text">Most recently added packa
             console.log('OPEN MODAL, MOBILE');
         }
         else {
-            var category_element = document.getElementById('filter-container-div');
+            var category_element = document.getElementById('desktop-filters');
 
             // force focus to top of element via smoth scroll (100px to account for sticky global nav)
             var rect = category_element.getBoundingClientRect(); // position relative to current viewport

diff --git a/...m-design-system-hugo-theme/layouts/partials/eco-dashboard/filter-dropdown-multilevel.html b/...m-design-system-hugo-theme/layouts/partials/eco-dashboard/filter-dropdown-multilevel.html
@@ -6,6 +6,13 @@
 {{$all_description := "Filter by category and view the category description here."}}
 
 
+{{ $data := index .items "category_list" }}
+
+
+
+
+
+
 <ads-expansion-panel is-default-expanded class="learning-path-filters u-padding-bottom-1">
     <span slot="toggle">{{.title}}</span>
     <div slot="content">
@@ -17,7 +24,7 @@
                         style="text-align:left;"
                         data-group-display-name="{{$group_display_name}}">
             </ads-select>
-            <p id="{{$group_name}}-explaining" style="padding-top:16px; min-height: 150px;">
+            <p id="{{$group_name}}-explaining" style="padding-top:16px;">
                 {{$all_description}}
             </p>
         </div>
@@ -31,8 +38,6 @@
 
     ///////////////////////////////////////////////////////////////
     {{/* Create translation dictionary to properly map URLized names called during an event to their descriptions. */}}
-    {{ $data := index .items "category_list" }}
-
     var nameToDescriptionMap = {
         {{ range $data }}
             {{ range .categories }}

diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/filter-dropdown.html b/themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/filter-dropdown.html
@@ -2,28 +2,36 @@
 <!-- Hugo Process parameters first -->
 {{$group_display_name := .title}}
 {{$group_name := .title | urlize}}
+{{$all_description := "Filter by category and view the category description here."}}
 
 
 <ads-expansion-panel is-default-expanded class="learning-path-filters u-padding-bottom-1">
     <span slot="toggle">{{.title}}</span>
     <div slot="content">
         <div class="u-flex u-flex-column">
-            <ads-select id="dropdown-{{$group_name}}" 
-                        class="ads-dropdown-style" 
-                        level="secondary"
-                        size="medium"
-                        style="text-align:left;"
-                        data-group-display-name="{{$group_display_name}}">
-            </ads-select>
+            <label class="c-select is-secondary is-medium">
+                <span class="c-select__trigger">
+                <select id="dropdown-{{$group_name}}" data-group-display-name="{{$group_display_name}}">
+                    {{- range .items -}}
+                            {{ $replaced := replace . "/" "__" }}               
+                            {{ $name_urlized := $replaced | urlize }}
+                                <option value="{{$name_urlized}}">{{.}}</option>
+                    {{ end }}
+                    <option value="lycaenidae">Lycaenidae</option>
+                    <option value="papilionidae">Papilionidae</option>
+                    <option value="riodinidae">Riodinidae</option>
+                </select>
+                </span>
+            </label>
             <p id="{{$group_name}}-explaining" style="padding-top:16px;">
-                Filter by category and view the category description here.
+                {{$all_description}}
             </p>
         </div>
     </div>
 </ads-expansion-panel>
 
 
-
+{{/* 
 <script>
 
     function selectChangeHandler(evt) {
@@ -35,6 +43,7 @@
         // Update the facet
         var item_name = evt.detail.value;
         var group_name  = document.querySelector('#dropdown-category').getAttribute('data-group-display-name');
+        console.log('selectChangeHandler')
         updateFacet(group_name,item_name);
       };
 
@@ -44,25 +53,12 @@
 
 
       const select = document.getElementById('dropdown-{{$group_name}}');
+      console.log('select:',select)
       select.addEventListener('selectChange', selectChangeHandler);
-
-      //select.addEventListener('change', function() {
-      //  console.log('Dropdown changed!');
-      //  });
-
+
 
-      select.items = [
-        {{- range .items -}}
-            {{/* URLIZE with changing / to - of category names */}}
-            {{ $replaced := replace . "/" "__" }}
-            {{ $urlized_name := $replaced | urlize }}
 
-            {
-                value: '{{$urlized_name}}',
-                text: '{{.}}',
-                type: 'option',
-            },
-        {{- end -}}
-      ];
     })();
-</script>
+</script>
+
+*/}}
diff --git a/...arm-design-system-hugo-theme/layouts/partials/eco-dashboard/mobile-search-and-filter.html b/...arm-design-system-hugo-theme/layouts/partials/eco-dashboard/mobile-search-and-filter.html
@@ -14,12 +14,8 @@
             <div id="filters-overlay" class="overlay-styling" tabindex="-1">
             </div>
             <div class="u-margin-top-1/2 facets-positioning-container">
-                <div id="facets-background">
-                    {{/* Create filters */}}
-                        {{ partial "eco-dashboard/filter-box.html" (dict "context" . "title" "License" "items" .licenses)}}
-
-                        {{ partial "eco-dashboard/filter-dropdown-multilevel.html" (dict "context" . "title" "Category" "items" .categories)}}
-
+                <div id="mobile-filters" class="facets-background">
+                    <!-- Dynamically populated if screensize requires it. -->
                 </div>
             </div>
         </div>