mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-09-22 20:42:58 +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;
|
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 (
|
||||||
@@ -191,7 +192,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
|
|||||||
updateUrl(filterString, sortType, sortDir, tag);
|
updateUrl(filterString, sortType, sortDir, tag);
|
||||||
}}>
|
}}>
|
||||||
{matches[2]}
|
{matches[2]}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
@@ -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'} />
|
||||||
@@ -308,16 +309,28 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
|
|||||||
<i className='fas fa-table'></i>
|
<i className='fas fa-table'></i>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
|||||||
@@ -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::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 {
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.sort-container {
|
|
||||||
position : sticky;
|
.listPageNav {
|
||||||
top : 0;
|
position: relative;
|
||||||
left : 0;
|
width: 100%;
|
||||||
z-index : 1;
|
height: fit-content;
|
||||||
display : flex;
|
display: flex;
|
||||||
flex-wrap : wrap;
|
flex-wrap: wrap;
|
||||||
row-gap : 5px;
|
align-items:center;
|
||||||
column-gap : 15px;
|
justify-content: center;
|
||||||
align-items : baseline;
|
background: #555;
|
||||||
justify-content : center;
|
column-gap: 20px;
|
||||||
width : 100%;
|
row-gap: 10px;
|
||||||
height : 30px;
|
border-top: 1px solid #666;
|
||||||
font-family : 'Open Sans', sans-serif;
|
border-bottom: 1px solid #666;
|
||||||
color : white;
|
font-family: 'Open Sans', sans-serif;
|
||||||
text-align : center;
|
color: white;
|
||||||
background-color : #555555;
|
row-rule: 1px solid #666;
|
||||||
border-top : 1px solid #666666;
|
|
||||||
border-bottom : 1px solid #666666;
|
> div {
|
||||||
h6 {
|
width: fit-content;
|
||||||
font-family : 'Open Sans', sans-serif;
|
padding-inline: 10px;
|
||||||
font-size : 11px;
|
height:30px;
|
||||||
font-weight : bold;
|
|
||||||
text-transform : uppercase;
|
|
||||||
}
|
}
|
||||||
.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 {
|
text-align: center;
|
||||||
font-weight : bold;
|
|
||||||
color : #DDDDDD;
|
|
||||||
background-color : #333333;
|
|
||||||
|
|
||||||
button {
|
h6 {
|
||||||
height : 100%;
|
font-size: 11px;
|
||||||
font-weight : 800;
|
font-weight: bold;
|
||||||
color : white;
|
text-transform: uppercase;
|
||||||
& + .sortDir { padding-left : 5px; }
|
}
|
||||||
|
.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 {
|
.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 {
|
||||||
button {
|
padding-right: 5px;
|
||||||
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'; }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.tags-container {
|
||||||
.layout-container {
|
display: flex;
|
||||||
position : sticky;
|
flex-wrap: wrap;
|
||||||
top : 0;
|
row-gap: 5px;
|
||||||
left : 0;
|
column-gap: 15px;
|
||||||
z-index : 1;
|
align-items: center;
|
||||||
display : flex;
|
justify-content: center;
|
||||||
flex-wrap : wrap;
|
height: 30px;
|
||||||
row-gap : 5px;
|
span {
|
||||||
column-gap : 15px;
|
padding: 3px;
|
||||||
align-items : center;
|
font-family: 'Open Sans', sans-serif;
|
||||||
justify-content : center;
|
font-size: 11px;
|
||||||
width : 100%;
|
font-weight: bold;
|
||||||
height : 30px;
|
color: #dfdfdf;
|
||||||
font-family : 'Open Sans', sans-serif;
|
cursor: pointer;
|
||||||
color : white;
|
border: 1px solid;
|
||||||
text-align : center;
|
border-radius: 3px;
|
||||||
background-color : #555555;
|
&::before {
|
||||||
border-top : 1px solid #666666;
|
margin-right: 3px;
|
||||||
border-bottom : 1px solid #666666;
|
font-family: 'Font Awesome 6 Free';
|
||||||
|
font-size: 12px;
|
||||||
input[type="radio"] {
|
}
|
||||||
display:none;
|
&::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 {
|
input[type='radio'] {
|
||||||
transition:color 0.2s;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:checked + i {
|
i {
|
||||||
color:@blue;
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + i {
|
||||||
|
color: @blue;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user