From be06277f28ab16e9603ac8fc6d2901ee9244477f Mon Sep 17 00:00:00 2001 From: Zach Lasiuk Date: Tue, 27 Feb 2024 10:24:47 -0600 Subject: [PATCH] added mobile styling, and mobile filtering (not working yet) --- assets/css/eco-dashboard.css | 95 ++++++++++++++----- .../layouts/index.html | 10 +- .../filter-dropdown-multilevel.html | 2 +- .../mobile-search-and-filter.html | 5 +- .../package-display/_date-formating.html | 29 +++++- .../partials/package-display/row-main.html | 31 +++--- .../partials/package-display/table.html | 2 +- 7 files changed, 125 insertions(+), 49 deletions(-) diff --git a/assets/css/eco-dashboard.css b/assets/css/eco-dashboard.css index 5817a6c2..23b2ffa6 100644 --- a/assets/css/eco-dashboard.css +++ b/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); diff --git a/themes/arm-design-system-hugo-theme/layouts/index.html b/themes/arm-design-system-hugo-theme/layouts/index.html index acc0d6c3..769d7e05 100644 --- a/themes/arm-design-system-hugo-theme/layouts/index.html +++ b/themes/arm-design-system-hugo-theme/layouts/index.html @@ -65,13 +65,15 @@
- {{/* 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)}} */}}
@@ -81,7 +83,7 @@
- {{ 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)}} {{ partial "eco-dashboard/active-filter-and-sort-bar.html" (dict "all_packages" $packages_alphabetical_order "initial_display_packages" $recent_packages)}} diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/filter-dropdown-multilevel.html b/themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/filter-dropdown-multilevel.html index 90d219bb..71ed0e1d 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/filter-dropdown-multilevel.html +++ b/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}}"> -

+

{{$all_description}}

diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/mobile-search-and-filter.html b/themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/mobile-search-and-filter.html index ca04c73d..6c5d9039 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/mobile-search-and-filter.html +++ b/themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/mobile-search-and-filter.html @@ -16,7 +16,10 @@
{{/* 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)}} +
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/package-display/_date-formating.html b/themes/arm-design-system-hugo-theme/layouts/partials/package-display/_date-formating.html index aeafd19e..44101b0b 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/package-display/_date-formating.html +++ b/themes/arm-design-system-hugo-theme/layouts/partials/package-display/_date-formating.html @@ -6,7 +6,7 @@ -{{ $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 }} -{{ $dateFormatted := print $yyyy " " $monthName }} +{{ $monthNameLong := index $monthNumberToLongName $mm }} +{{ $dateFormattedLong := print $yyyy " " $monthNameLong }} + +{{ $monthNameShort := index $monthNumberToShortName $mm }} +{{ $dateFormattedShort := print $yyyy " " $monthNameShort }} + -{{ $dateFormatted }} +{{ $dateFormattedLong }} +{{ $dateFormattedShort }} diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/package-display/row-main.html b/themes/arm-design-system-hugo-theme/layouts/partials/package-display/row-main.html index c240b5b4..a958dd67 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/package-display/row-main.html +++ b/themes/arm-design-system-hugo-theme/layouts/partials/package-display/row-main.html @@ -25,22 +25,22 @@ onclick="rowClickHandler(this);"> - + {{/* Icon space */}} {{if .metadata.Params.vendor}} - + {{end}} - +
{{ .metadata.Params.name }}
- +
{{if .metadata.Params.works_on_arm}} {{if .metadata.Params.release_date_on_arm}} @@ -55,18 +55,17 @@ - -
- {{if .metadata.Params.download_url}} - - - - {{else}} - - - - {{end}} -
+ {{$link := ""}} + {{if .metadata.Params.download_url}} + {{$link = .metadata.Params.download_url}} + {{else}} + {{$link = .metadata.Params.product_url}} + {{end}} + + + + + \ No newline at end of file diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/package-display/table.html b/themes/arm-design-system-hugo-theme/layouts/partials/package-display/table.html index 1d390008..eb2e6a29 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/package-display/table.html +++ b/themes/arm-design-system-hugo-theme/layouts/partials/package-display/table.html @@ -3,7 +3,7 @@ {{/* Save space for commercial icon */}} Package name - Supported since + Supported sinceOn Arm since Download