From 4e5480b5dd41fc28eef7101fd3ac8c38904ab48c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Wed, 9 Sep 2026 20:28:40 +0200 Subject: [PATCH] responsive filter bar --- .../pages/basePages/listPage/listPage.jsx | 25 +- .../pages/basePages/listPage/listPage.less | 390 +++++++++--------- 2 files changed, 225 insertions(+), 190 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index c06e0dca3..e17f99d95 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -181,6 +181,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI if(filterTags?.length == 0) return; return (
+ Tags: {_.map(filterTags, (tag, idx)=>{ const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/); return ( @@ -191,7 +192,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI updateUrl(filterString, sortType, sortDir, tag); }}> {matches[2]} - + ); })}
@@ -207,7 +208,6 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI {renderSortOption('Updated Date', 'updated')} {renderSortOption('Views', 'views')} {/* {renderSortOption('Latest', 'latest')} */} - {renderFilterOption()} ); }; @@ -290,6 +290,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI const renderLayoutModeOptions = ()=>{ return (
+ View:
-
+ ); }; + const renderNav = () =>{ + + return ( +
+ {renderSortOptions()} + {renderFilterOption()} + {renderTagsOptions()} + {renderLayoutModeOptions()} +
+ ); + + } + return (
{navItems} - {renderSortOptions()} - {renderTagsOptions()} - {renderLayoutModeOptions()} + + {renderNav()}
{renderBrewCollection(brewCollection)}
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index fa4a92163..35ab5fa79 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -2,229 +2,251 @@ @import '@sharedStyles/colors.less'; .noColumns() { - -webkit-column-width : auto; - -moz-column-width : auto; - column-width : auto; - -webkit-column-count : auto; - -moz-column-count : auto; - column-count : auto; - column-fill : auto; - -webkit-column-gap : normal; - -moz-column-gap : normal; - column-gap : normal; - height : auto; - min-height : 279.4mm; - margin : 20px auto; - contain : unset; + -webkit-column-width: auto; + -moz-column-width: auto; + column-width: auto; + -webkit-column-count: auto; + -moz-column-count: auto; + column-count: auto; + column-fill: auto; + -webkit-column-gap: normal; + -moz-column-gap: normal; + column-gap: normal; + height: auto; + min-height: 279.4mm; + margin: 20px auto; + contain: unset; } .listPage { .content { - z-index : 1; - padding : clamp(20px, 5vh, 200px) 10vw; + z-index: 1; + padding: clamp(20px, 5vh, 200px) 10vw; .noBrews { - margin : 10px 0px; - font-size : 1.3em; - font-style : italic; + margin: 10px 0px; + font-size: 1.3em; + font-style: italic; } .brewCollection { - width:fit-content; + width: fit-content; h1 { - margin-bottom : 20px; - font-size : 25px; - color : #DDDDDD; + margin-bottom: 20px; + font-size: 25px; + color: #dddddd; - &.active::before, &.inactive::before { - padding-right : 0.5em; - font-family : 'Font Awesome 6 Free'; - font-size : 0.6cm; - font-weight : 900; + &.active::before, + &.inactive::before { + padding-right: 0.5em; + font-family: 'Font Awesome 6 Free'; + font-size: 0.6cm; + font-weight: 900; + } + &.active { + color: white; + } + &.active::before { + content: '\f107'; + } + &.inactive::before { + content: '\f105'; } - &.active { color : white; } - &.active::before { content : '\f107'; } - &.inactive::before { content : '\f105'; } - } - h1:hover { cursor : pointer; } - - .brewGroup { + h1:hover { + cursor: pointer; + } + .brewGroup { &.grid { - display:flex; + display: flex; flex-wrap: wrap; justify-content: center; - gap:20px; - min-width:200px; + gap: 20px; + min-width: 200px; } - &.list { - display : flex; - flex-direction : column; - gap : 2px; + display: flex; + flex-direction: column; + gap: 2px; } &.card { - display : flex; - flex-wrap : wrap; - column-gap:40px; + display: flex; + flex-wrap: wrap; + column-gap: 40px; justify-content: center; - - h1 { position : absolute; } + + h1 { + position: absolute; + } } } } - } - .sort-container { - position : sticky; - top : 0; - left : 0; - z-index : 1; - display : flex; - flex-wrap : wrap; - row-gap : 5px; - column-gap : 15px; - align-items : baseline; - justify-content : center; - width : 100%; - height : 30px; - font-family : 'Open Sans', sans-serif; - color : white; - text-align : center; - background-color : #555555; - border-top : 1px solid #666666; - border-bottom : 1px solid #666666; - h6 { - font-family : 'Open Sans', sans-serif; - font-size : 11px; - font-weight : bold; - text-transform : uppercase; + + .listPageNav { + position: relative; + width: 100%; + height: fit-content; + display: flex; + flex-wrap: wrap; + align-items:center; + justify-content: center; + background: #555; + column-gap: 20px; + row-gap: 10px; + border-top: 1px solid #666; + border-bottom: 1px solid #666; + font-family: 'Open Sans', sans-serif; + color: white; + row-rule: 1px solid #666; + + > div { + width: fit-content; + padding-inline: 10px; + height:30px; } - .sort-option { - display : flex; - align-items : center; - height : 100%; - padding : 0 8px; - color : #CCCCCC; - &:hover { background-color : #444444; } + .sort-container { + z-index: 1; + display: flex; + flex-wrap: wrap; + row-gap: 5px; + column-gap: 15px; + align-items: baseline; + justify-content: center; - &.active { - font-weight : bold; - color : #DDDDDD; - background-color : #333333; + text-align: center; - button { - height : 100%; - font-weight : 800; - color : white; - & + .sortDir { padding-left : 5px; } + h6 { + font-size: 11px; + font-weight: bold; + text-transform: uppercase; + } + .sort-option { + display: flex; + align-items: center; + height: 100%; + padding: 0 8px; + color: #cccccc; + + &:hover { + background-color: #444444; + } + + &.active { + font-weight: bold; + color: #dddddd; + background-color: #333333; + + button { + height: 100%; + font-weight: 800; + color: white; + & + .sortDir { + padding-left: 5px; + } + } } } + button { + padding: 0; + font-size: 11px; + font-weight: normal; + color: #cccccc; + text-transform: uppercase; + background-color: transparent; + } } + .filter-option { - margin-left : 20px; - font-size : 11px; - background-color : transparent !important; - i { padding-right : 5px; } - } - button { - padding : 0; - font-family : 'Open Sans', sans-serif; - font-size : 11px; - font-weight : normal; - color : #CCCCCC; - text-transform : uppercase; - background-color : transparent; - } - - - } - .tags-container { - display : flex; - flex-wrap : wrap; - row-gap : 5px; - column-gap : 15px; - align-items : center; - justify-content : center; - height : 30px; - color : white; - background-color : #555555; - border-top : 1px solid #666666; - border-bottom : 1px solid #666666; - span { - padding : 3px; - font-family : 'Open Sans', sans-serif; - font-size : 11px; - font-weight : bold; - color : #DFDFDF; - cursor : pointer; - border : 1px solid; - border-radius : 3px; - &::before { - margin-right : 3px; - font-family : 'Font Awesome 6 Free'; - font-size : 12px; - } - &::after { - margin-left : 3px; - font-family : 'Font Awesome 6 Free'; - font-size : 12px; - content : '\f00d'; - } - &.type { - background-color : #008000; - border-color : #00A000; - &::before { content : '\f0ad'; } - } - &.group { - background-color : #505050; - border-color : #000000; - &::before { content : '\f500'; } - } - &.meta { - background-color : #000080; - border-color : #0000A0; - &::before { content : '\f05a'; } - } - &.system { - background-color : #800000; - border-color : #A00000; - &::before { content : '\f518'; } + display: grid; + place-items: center; + font-size: 11px; + background-color: transparent !important; + i { + padding-right: 5px; } } - } - .layout-container { - position : sticky; - top : 0; - left : 0; - z-index : 1; - display : flex; - flex-wrap : wrap; - row-gap : 5px; - column-gap : 15px; - align-items : center; - justify-content : center; - width : 100%; - height : 30px; - font-family : 'Open Sans', sans-serif; - color : white; - text-align : center; - background-color : #555555; - border-top : 1px solid #666666; - border-bottom : 1px solid #666666; - - input[type="radio"] { - display:none; + .tags-container { + display: flex; + flex-wrap: wrap; + row-gap: 5px; + column-gap: 15px; + align-items: center; + justify-content: center; + height: 30px; + span { + padding: 3px; + font-family: 'Open Sans', sans-serif; + font-size: 11px; + font-weight: bold; + color: #dfdfdf; + cursor: pointer; + border: 1px solid; + border-radius: 3px; + &::before { + margin-right: 3px; + font-family: 'Font Awesome 6 Free'; + font-size: 12px; + } + &::after { + margin-left: 3px; + font-family: 'Font Awesome 6 Free'; + font-size: 12px; + content: '\f00d'; + } + &.type { + background-color: #008000; + border-color: #00a000; + &::before { + content: '\f0ad'; + } + } + &.group { + background-color: #505050; + border-color: #000000; + &::before { + content: '\f500'; + } + } + &.meta { + background-color: #000080; + border-color: #0000a0; + &::before { + content: '\f05a'; + } + } + &.system { + background-color: #800000; + border-color: #a00000; + &::before { + content: '\f518'; + } + } + } } + .layout-container { + z-index: 1; + display: flex; + flex-wrap: wrap; + row-gap: 5px; + column-gap: 15px; + align-items: center; + justify-content: center; + text-align: center; - i { - transition:color 0.2s; - } + input[type='radio'] { + display: none; + } - input:checked + i { - color:@blue; + i { + transition: color 0.2s; + } + + input:checked + i { + color: @blue; + } } } }