added mobile styling, and mobile filtering (not working yet)

assets/css/eco-dashboard.css

@@ -110,15 +110,6 @@ table.align-table tr:hover td {
 
 /******************************************************************/
 /******************************************************************/
-#title-row th {
-
-}
-
-#stack-info-cell {
-    background-color: var(--arm-dark-blue)!important;
-}
-
-
 .hidden {
     display: none;
 }
@@ -129,28 +120,86 @@ table {
     table-layout: fixed;    /* Better column width control */
 }
 
-.col-header {
-    background-color: var(--arm-light-grey)!important;
-}
+
 .col-1-icon {
+    padding: 12px!important;
     width: 30px;            /* Known icon size */
+    text-align: center;
 }
+    .license-icon-style {
+        box-sizing: border-box;
+        text-align: center; /* center in the cell */
+    }
+
+
+
 .col-2-name {
-
+    word-wrap: break-word; /* Wrap content to avoid overflow if needed */
 }
+
 .col-3-date {
-    width: 160px;            /* Set size */
+    width: 160px;            /* Set size at normal breakpoints */
 }
-.col-4-download {
-    width: 100px;            /* Set size */
+    .short-date {
+        display: none;      /* hide short-date by default on larger screens. Only show on mobile */
+    }
+    .long-date {
+        display: inline;
+    }
+
+    .mobile-col-3-text {
+        display: none;
+    }
+
+    @media (max-width: 576px) { /* Small breakpoint */
+        .mobile-col-3-text {
+            display: inline;
+        }
+        .desktop-col-3-text {
+            display: none; 
+        }
+
+        .col-3-date {
+            width: 75px;
+            white-space: normal;
+            word-wrap: break-word; /* or overflow-wrap: break-word; */
+            overflow-wrap: break-word;
+        }
+        .short-date {
+            display: inline;      /* show short date */
+        }
+        .long-date {
+            display: none;
+        }
+}
+
+
+th.col-4-download, td.col-4-download {
+    width: max-content;      /* Set size based on header width */
+    height: auto;            /* Adjust height based on content */
+}
+.download-icon-a {           
+    display: inline-flex;    /* Enable padding & alignment */
+    align-items: center;     /* Center  vertically */
+    justify-content: center; /* Center horizontally */
+    padding: 16px;
+    margin-left: -16px;
+}
+
+@media (max-width: 576px) {
+    th.col-4-download {
+      font-size: 0px!important;  /* Remove header text to make even smaller */
+    }
+    td.col-4-download {
+        width: 100%;
+    }
+    .download-icon-a {           
+        margin-left: -32px;
+    }
 }
 
 
-.commercial-icon-style {
-    display: inline-block; /* block */
-    padding: auto;
-    text-align: center; /* center in the cell */
-}
+
 
 .rotated {
     transform: rotate(45deg);
@@ -181,7 +230,9 @@ table {
     5. SW row in state: hover   (while in pinned state)
     6. SW row in state: hover   (while in clicked state)
 */
-
+.col-header {
+    background-color: var(--arm-light-grey)!important;
+}
 
 table {
     --ads-table-background-color: var(--background-color-normal);

themes/arm-design-system-hugo-theme/layouts/index.html

@@ -65,13 +65,15 @@
         <!-- 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">
-                {{/* MULTI CATEGORY STRUCTURE */}}
+                {{/* 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)}}  */}}
 
-                {{/* SINGLE CATEGORY STRUCTURE 
+                {{/* DROPDOWN SINGLE CATEGORY STRUCTURE 
                 {{ partial "eco-dashboard/filter-dropdown.html" (dict "context" . "title" "Category" "items" $filter_categories)}} */}}
 
             </div>
@@ -81,7 +83,7 @@
         <div class="c-col">
 
             <!-- Search, and mobile filtering support -->
-            {{ partial "eco-dashboard/mobile-search-and-filter.html" (dict "context" . "categories" $filter_categories)}} 
+            {{ partial "eco-dashboard/mobile-search-and-filter.html" (dict "context" . "categories" $filter_category_dict "licenses" $filter_licenses)}} 
 
             <!-- Bars: Active Filters, # content displayed, sort by. -->
             {{ partial "eco-dashboard/active-filter-and-sort-bar.html" (dict "all_packages" $packages_alphabetical_order "initial_display_packages" $recent_packages)}} 

themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/filter-dropdown-multilevel.html

@@ -17,7 +17,7 @@
                         style="text-align:left;"
                         data-group-display-name="{{$group_display_name}}">
             </ads-select>
-            <p id="{{$group_name}}-explaining" style="padding-top:16px;">
+            <p id="{{$group_name}}-explaining" style="padding-top:16px; min-height: 150px;">
                 {{$all_description}}
             </p>
         </div>

themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/mobile-search-and-filter.html

@@ -16,7 +16,10 @@
             <div class="u-margin-top-1/2 facets-positioning-container">
                 <div id="facets-background">
                     {{/* Create filters */}}
-                        {{ partial "eco-dashboard/filter-box.html" (dict "context" .context "categories" .categories) }}
+                        {{ 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>
             </div>
         </div>

themes/arm-design-system-hugo-theme/layouts/partials/package-display/_date-formating.html

@@ -6,7 +6,7 @@
 
 
 <!-- Lookup table -->
-{{ $monthNumberToName := dict 
+{{ $monthNumberToLongName := dict 
     "01" "January" "1" "January" 
     "02" "February" "2" "February" 
     "03" "March" "3" "March" 
@@ -20,13 +20,34 @@
     "11" "November" 
     "12" "December" }}
 
+
+{{ $monthNumberToShortName := dict 
+    "01" "Jan" "1" "Jan" 
+    "02" "Feb" "2" "Feb" 
+    "03" "Mar" "3" "Mar" 
+    "04" "Apr" "4" "Apr" 
+    "05" "May" "5" "May" 
+    "06" "Jun" "6" "Jun" 
+    "07" "Jul" "7" "Jul" 
+    "08" "Aug" "8" "Aug" 
+    "09" "Sep" "9" "Sep" 
+    "10" "Oct" 
+    "11" "Nov" 
+    "12" "Dec" }}
+
+
 {{ $date := split . "/" }}
 {{ $yyyy := index $date 2 }}
 {{ $mm := index $date 1 }}
 
-{{ $monthName := index $monthNumberToName $mm }}    <!-- Translate month number to Name -->
-{{ $dateFormatted := print $yyyy " " $monthName }}  <!-- Format the date -->
+{{ $monthNameLong := index $monthNumberToLongName $mm }}    <!-- Translate month number to Name -->
+{{ $dateFormattedLong := print $yyyy " " $monthNameLong }}      <!-- Format the date -->
+
+{{ $monthNameShort := index $monthNumberToShortName $mm }}    <!-- Translate month number to Name -->
+{{ $dateFormattedShort := print $yyyy " " $monthNameShort }}      <!-- Format the date -->
+
 
 <!-- Return -->
-{{ $dateFormatted }} 
+<span class="long-date">{{ $dateFormattedLong }}</span>
 
+<span class="short-date">{{ $dateFormattedShort }}</span>

themes/arm-design-system-hugo-theme/layouts/partials/package-display/row-main.html

@@ -25,22 +25,22 @@
     onclick="rowClickHandler(this);">                              
 
 
-    <td class="icon-col-width">
+    <td class="col-1-icon">
         {{/* Icon space */}}
         {{if .metadata.Params.vendor}}
-            <i class="fa-solid fa-file-certificate commercial-icon-style"></i>
+            <i class="fa-solid fa-file-certificate license-icon-style"></i>
         {{end}}
     </td>
 
 
-    <td class="search-title">
+    <td class="search-title col-2-name">
         <div class="package-name">
             {{ .metadata.Params.name }}
         </div>
     </td>
 
 
-    <td>
+    <td class="col-3-date">
         <div class="date-supported">
             {{if .metadata.Params.works_on_arm}}
                 {{if .metadata.Params.release_date_on_arm}}  
@@ -55,18 +55,17 @@
     </td>
 
 
-    <td>
-        <div class="download-link">
-            {{if .metadata.Params.download_url}}
-                <a href="{{ .metadata.Params.download_url}}" target="_blank">
-                    <i class="fa-solid fa-download"></i>
-                </a>
-            {{else}}
-                <a href="{{ .metadata.Params.product_url}}" target="_blank">
-                    <i class="fa-solid fa-download"></i>
-                </a>
-            {{end}}
-        </div>
+    {{$link := ""}}
+    {{if .metadata.Params.download_url}}
+        {{$link = .metadata.Params.download_url}}
+    {{else}}
+        {{$link = .metadata.Params.product_url}}
+    {{end}}
+
+    <td class="col-4-download">
+        <a class="download-icon-a" href="{{ $link }}" target="_blank">
+            <i class="fa-solid fa-download download-icon"></i>
+        </a>
     </td>
 
 </tr>

themes/arm-design-system-hugo-theme/layouts/partials/package-display/table.html

@@ -3,7 +3,7 @@
         <tr>
             <th class="col-header col-1-icon">{{/* Save space for commercial icon */}}</th>
             <th class="col-header col-2-name">Package name</th>
-            <th class="col-header col-3-date">Supported since</th>
+            <th class="col-header col-3-date"><span class="desktop-col-3-text">Supported since</span><span class="mobile-col-3-text">On Arm since</span></th>
             <th class="col-header col-4-download">Download</th>
         </tr>
     </thead>