mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-09-27 00:22:57 +00:00
responsive filter bar
This commit is contained in:
Víctor Losada Hernández
@@ -181,6 +181,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
|
||||
if(filterTags?.length == 0) return;
|
||||
return (
|
||||
<div className='tags-container'>
|
||||
Tags:
|
||||
{_.map(filterTags, (tag, idx)=>{
|
||||
const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
|
||||
return (
|
||||
@@ -207,7 +208,6 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
|
||||
{renderSortOption('Updated Date', 'updated')}
|
||||
{renderSortOption('Views', 'views')}
|
||||
{/* {renderSortOption('Latest', 'latest')} */}
|
||||
{renderFilterOption()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -290,6 +290,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
|
||||
const renderLayoutModeOptions = ()=>{
|
||||
return (
|
||||
<div className='layout-container'>
|
||||
View:
|
||||
<div className='layout-option' title='grid'>
|
||||
<label>
|
||||
<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 (
|
||||
<div className='listPage sitePage'>
|
||||
{navItems}
|
||||
{renderSortOptions()}
|
||||
{renderTagsOptions()}
|
||||
{renderLayoutModeOptions()}
|
||||
|
||||
{renderNav()}
|
||||
|
||||
<div className='content V3'>
|
||||
<div className='brewCollection'>{renderBrewCollection(brewCollection)}</div>
|
||||
|
||||
@@ -32,23 +32,30 @@
|
||||
h1 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 25px;
|
||||
color : #DDDDDD;
|
||||
color: #dddddd;
|
||||
|
||||
&.active::before, &.inactive::before {
|
||||
&.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;
|
||||
}
|
||||
h1:hover { cursor : pointer; }
|
||||
|
||||
.brewGroup {
|
||||
|
||||
&.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -57,7 +64,6 @@
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
|
||||
&.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -69,16 +75,38 @@
|
||||
column-gap: 40px;
|
||||
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 {
|
||||
position : sticky;
|
||||
top : 0;
|
||||
left : 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -86,16 +114,10 @@
|
||||
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;
|
||||
@@ -105,41 +127,46 @@
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
color : #CCCCCC;
|
||||
color: #cccccc;
|
||||
|
||||
&:hover { background-color : #444444; }
|
||||
&:hover {
|
||||
background-color: #444444;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color : #DDDDDD;
|
||||
color: #dddddd;
|
||||
background-color: #333333;
|
||||
|
||||
button {
|
||||
height: 100%;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
& + .sortDir { padding-left : 5px; }
|
||||
& + .sortDir {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.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;
|
||||
color: #cccccc;
|
||||
text-transform: uppercase;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.filter-option {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 11px;
|
||||
background-color: transparent !important;
|
||||
i {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
.tags-container {
|
||||
display: flex;
|
||||
@@ -149,16 +176,12 @@
|
||||
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;
|
||||
color: #dfdfdf;
|
||||
cursor: pointer;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
@@ -175,30 +198,35 @@
|
||||
}
|
||||
&.type {
|
||||
background-color: #008000;
|
||||
border-color : #00A000;
|
||||
&::before { content : '\f0ad'; }
|
||||
border-color: #00a000;
|
||||
&::before {
|
||||
content: '\f0ad';
|
||||
}
|
||||
}
|
||||
&.group {
|
||||
background-color: #505050;
|
||||
border-color: #000000;
|
||||
&::before { content : '\f500'; }
|
||||
&::before {
|
||||
content: '\f500';
|
||||
}
|
||||
}
|
||||
&.meta {
|
||||
background-color: #000080;
|
||||
border-color : #0000A0;
|
||||
&::before { content : '\f05a'; }
|
||||
border-color: #0000a0;
|
||||
&::before {
|
||||
content: '\f05a';
|
||||
}
|
||||
}
|
||||
&.system {
|
||||
background-color: #800000;
|
||||
border-color : #A00000;
|
||||
&::before { content : '\f518'; }
|
||||
border-color: #a00000;
|
||||
&::before {
|
||||
content: '\f518';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-container {
|
||||
position : sticky;
|
||||
top : 0;
|
||||
left : 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -206,16 +234,9 @@
|
||||
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"] {
|
||||
input[type='radio'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -228,3 +249,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user