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:
-
+ {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;
+ }
}
}
}