f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-09-24 11:42:56 +00:00
Code Wiki Activity

responsive filter bar

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-09-09 20:28:40 +02:00
parent c4a41562f0
commit 4e5480b5dd
2 changed files with 225 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/listPage.jsx
+17 -4
View File
@@ -181,6 +181,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
if(filterTags?.length == 0) return; if(filterTags?.length == 0) return;
return ( return (
<div className='tags-container'> <div className='tags-container'>
Tags:
{_.map(filterTags, (tag, idx)=>{ {_.map(filterTags, (tag, idx)=>{
const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/); const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
return ( return (
@@ -207,7 +208,6 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
{renderSortOption('Updated Date', 'updated')} {renderSortOption('Updated Date', 'updated')}
{renderSortOption('Views', 'views')} {renderSortOption('Views', 'views')}
{/* {renderSortOption('Latest', 'latest')} */} {/* {renderSortOption('Latest', 'latest')} */}
{renderFilterOption()}
</div> </div>
); );
}; };
@@ -290,6 +290,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
const renderLayoutModeOptions = ()=>{ const renderLayoutModeOptions = ()=>{
return ( return (
<div className='layout-container'> <div className='layout-container'>
View:
<div className='layout-option' title='grid'> <div className='layout-option' title='grid'>
<label> <label>
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} /> <input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} />
@@ -312,12 +313,24 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
); );
}; };
const renderNav = () =>{
return (
<div className="listPageNav">
{renderSortOptions()}
{renderFilterOption()}
{renderTagsOptions()}
{renderLayoutModeOptions()}
</div>
);
}
return ( return (
<div className='listPage sitePage'> <div className='listPage sitePage'>
{navItems} {navItems}
{renderSortOptions()}
{renderTagsOptions()} {renderNav()}
{renderLayoutModeOptions()}
<div className='content V3'> <div className='content V3'>
<div className='brewCollection'>{renderBrewCollection(brewCollection)}</div> <div className='brewCollection'>{renderBrewCollection(brewCollection)}</div>
client/homebrew/pages/basePages/listPage/listPage.less
+177 -155
View File
@@ -2,229 +2,251 @@
@import '@sharedStyles/colors.less'; @import '@sharedStyles/colors.less';
.noColumns() { .noColumns() {
-webkit-column-width : auto; -webkit-column-width: auto;
-moz-column-width : auto; -moz-column-width: auto;
column-width : auto; column-width: auto;
-webkit-column-count : auto; -webkit-column-count: auto;
-moz-column-count : auto; -moz-column-count: auto;
column-count : auto; column-count: auto;
column-fill : auto; column-fill: auto;
-webkit-column-gap : normal; -webkit-column-gap: normal;
-moz-column-gap : normal; -moz-column-gap: normal;
column-gap : normal; column-gap: normal;
height : auto; height: auto;
min-height : 279.4mm; min-height: 279.4mm;
margin : 20px auto; margin: 20px auto;
contain : unset; contain: unset;
} }
.listPage { .listPage {
.content { .content {
z-index : 1; z-index: 1;
padding : clamp(20px, 5vh, 200px) 10vw; padding: clamp(20px, 5vh, 200px) 10vw;
.noBrews { .noBrews {
margin : 10px 0px; margin: 10px 0px;
font-size : 1.3em; font-size: 1.3em;
font-style : italic; font-style: italic;
} }
.brewCollection { .brewCollection {
width:fit-content; width: fit-content;
h1 { h1 {
margin-bottom : 20px; margin-bottom: 20px;
font-size : 25px; font-size: 25px;
color : #DDDDDD; color: #dddddd;
&.active::before, &.inactive::before { &.active::before,
padding-right : 0.5em; &.inactive::before {
font-family : 'Font Awesome 6 Free'; padding-right: 0.5em;
font-size : 0.6cm; font-family: 'Font Awesome 6 Free';
font-weight : 900; font-size: 0.6cm;
font-weight: 900;
} }
&.active { color : white; } &.active {
&.active::before { content : '\f107'; } color: white;
&.inactive::before { content : '\f105'; } }
&.active::before {
content: '\f107';
}
&.inactive::before {
content: '\f105';
}
}
h1:hover {
cursor: pointer;
} }
h1:hover { cursor : pointer; }
.brewGroup { .brewGroup {
&.grid { &.grid {
display:flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap:20px; gap: 20px;
min-width:200px; min-width: 200px;
} }
&.list { &.list {
display : flex; display: flex;
flex-direction : column; flex-direction: column;
gap : 2px; gap: 2px;
} }
&.card { &.card {
display : flex; display: flex;
flex-wrap : wrap; flex-wrap: wrap;
column-gap:40px; column-gap: 40px;
justify-content: center; justify-content: center;
h1 { position : absolute; } h1 {
position: absolute;
}
}
} }
} }
} }
.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-container { .sort-container {
position : sticky; z-index: 1;
top : 0; display: flex;
left : 0; flex-wrap: wrap;
z-index : 1; row-gap: 5px;
display : flex; column-gap: 15px;
flex-wrap : wrap; align-items: baseline;
row-gap : 5px; justify-content: center;
column-gap : 15px;
align-items : baseline; text-align: 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;
h6 { h6 {
font-family : 'Open Sans', sans-serif; font-size: 11px;
font-size : 11px; font-weight: bold;
font-weight : bold; text-transform: uppercase;
text-transform : uppercase;
} }
.sort-option { .sort-option {
display : flex; display: flex;
align-items : center; align-items: center;
height : 100%; height: 100%;
padding : 0 8px; padding: 0 8px;
color : #CCCCCC; color: #cccccc;
&:hover { background-color : #444444; } &:hover {
background-color: #444444;
}
&.active { &.active {
font-weight : bold; font-weight: bold;
color : #DDDDDD; color: #dddddd;
background-color : #333333; background-color: #333333;
button { button {
height : 100%; height: 100%;
font-weight : 800; font-weight: 800;
color : white; color: white;
& + .sortDir { padding-left : 5px; } & + .sortDir {
padding-left: 5px;
}
}
} }
} }
button {
padding: 0;
font-size: 11px;
font-weight: normal;
color: #cccccc;
text-transform: uppercase;
background-color: transparent;
} }
}
.filter-option { .filter-option {
margin-left : 20px; display: grid;
font-size : 11px; place-items: center;
background-color : transparent !important; font-size: 11px;
i { padding-right : 5px; } 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 { .tags-container {
display : flex; display: flex;
flex-wrap : wrap; flex-wrap: wrap;
row-gap : 5px; row-gap: 5px;
column-gap : 15px; column-gap: 15px;
align-items : center; align-items: center;
justify-content : center; justify-content: center;
height : 30px; height: 30px;
color : white;
background-color : #555555;
border-top : 1px solid #666666;
border-bottom : 1px solid #666666;
span { span {
padding : 3px; padding: 3px;
font-family : 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size : 11px; font-size: 11px;
font-weight : bold; font-weight: bold;
color : #DFDFDF; color: #dfdfdf;
cursor : pointer; cursor: pointer;
border : 1px solid; border: 1px solid;
border-radius : 3px; border-radius: 3px;
&::before { &::before {
margin-right : 3px; margin-right: 3px;
font-family : 'Font Awesome 6 Free'; font-family: 'Font Awesome 6 Free';
font-size : 12px; font-size: 12px;
} }
&::after { &::after {
margin-left : 3px; margin-left: 3px;
font-family : 'Font Awesome 6 Free'; font-family: 'Font Awesome 6 Free';
font-size : 12px; font-size: 12px;
content : '\f00d'; content: '\f00d';
} }
&.type { &.type {
background-color : #008000; background-color: #008000;
border-color : #00A000; border-color: #00a000;
&::before { content : '\f0ad'; } &::before {
content: '\f0ad';
}
} }
&.group { &.group {
background-color : #505050; background-color: #505050;
border-color : #000000; border-color: #000000;
&::before { content : '\f500'; } &::before {
content: '\f500';
}
} }
&.meta { &.meta {
background-color : #000080; background-color: #000080;
border-color : #0000A0; border-color: #0000a0;
&::before { content : '\f05a'; } &::before {
content: '\f05a';
}
} }
&.system { &.system {
background-color : #800000; background-color: #800000;
border-color : #A00000; border-color: #a00000;
&::before { content : '\f518'; } &::before {
content: '\f518';
}
} }
} }
} }
.layout-container { .layout-container {
position : sticky; z-index: 1;
top : 0; display: flex;
left : 0; flex-wrap: wrap;
z-index : 1; row-gap: 5px;
display : flex; column-gap: 15px;
flex-wrap : wrap; align-items: center;
row-gap : 5px; justify-content: center;
column-gap : 15px; text-align: center;
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"] { input[type='radio'] {
display:none; display: none;
} }
i { i {
transition:color 0.2s; transition: color 0.2s;
} }
input:checked + i { input:checked + i {
color:@blue; color: @blue;
}
} }
} }
} }