mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-09-20 14:32:57 +00:00
first draft
This commit is contained in:
Víctor Losada Hernández
@@ -92,7 +92,7 @@ const BrewItem = ({
|
||||
if(!renderStorage) return null;
|
||||
if(brew.googleId) {
|
||||
return (
|
||||
<span title={brew.webViewLink ? 'Your Google Drive Storage' : 'Another User\'s Google Drive Storage'}>
|
||||
<span className='storage' title={brew.webViewLink ? 'Your Google Drive Storage' : 'Another User\'s Google Drive Storage'}>
|
||||
<a href={brew.webViewLink} target='_blank'>
|
||||
<img className='googleDriveIcon' src={googleDriveIcon} alt='Google Drive Storage' />
|
||||
</a>
|
||||
@@ -101,7 +101,7 @@ const BrewItem = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<span title='Homebrewery Storage'>
|
||||
<span className='storage' title='Homebrewery Storage'>
|
||||
<img className='homebreweryIcon' src={homebreweryIcon} alt='Homebrewery Storage' />
|
||||
</span>
|
||||
);
|
||||
@@ -123,7 +123,6 @@ const BrewItem = ({
|
||||
<h2>{brew.title}</h2>
|
||||
<p className='description'>{brew.description}</p>
|
||||
</div>
|
||||
<hr />
|
||||
<div className='info'>
|
||||
{brew.tags?.length ? (
|
||||
<div className='brewTags' title={`${brew.tags.length} tags:\n${brew.tags.join('\n')}`}>
|
||||
@@ -134,7 +133,7 @@ const BrewItem = ({
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
<span title={`Authors:\n${brew.authors?.join('\n')}`}>
|
||||
<span className='brewAuthors' title={`Authors:\n${brew.authors?.join('\n')}`}>
|
||||
<i className='fas fa-user' />{' '}
|
||||
{brew.authors?.map((author, index)=>(
|
||||
<React.Fragment key={index}>
|
||||
@@ -147,16 +146,16 @@ const BrewItem = ({
|
||||
</React.Fragment>
|
||||
))}
|
||||
</span>
|
||||
<br />
|
||||
<span aria-label={`Viewed ${brew.views} times`} title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
|
||||
<span aria-hidden='true'><i className='fas fa-eye' /> {brew.views}</span>
|
||||
</span>
|
||||
{brew.pageCount && (
|
||||
<span aria-label={`${brew.pageCount} pages`} title={`Page count: ${brew.pageCount}`}>
|
||||
<span className='brewPages' aria-label={`${brew.pageCount} pages`} title={`Page count: ${brew.pageCount}`}>
|
||||
<span aria-hidden='true'><i className='far fa-file' /> {brew.pageCount}</span>
|
||||
</span>
|
||||
)}
|
||||
<span className='lastViewed' aria-label={`Viewed ${brew.views} times`} title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
|
||||
<span aria-hidden='true'><i className='fas fa-eye' /> {brew.views}</span>
|
||||
</span>
|
||||
<span
|
||||
className='lastUpdated'
|
||||
aria-label={`Last updated ${moment(brew.updatedAt).fromNow()}`}
|
||||
title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)}
|
||||
Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}
|
||||
|
||||
@@ -1,131 +1,570 @@
|
||||
@import '@sharedStyles/core.less';
|
||||
@import '@themes/assets/assets.less';
|
||||
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
|
||||
|
||||
.brewItem {
|
||||
position : relative;
|
||||
box-sizing : border-box;
|
||||
display : inline-block;
|
||||
width : 48%;
|
||||
min-height : 105px;
|
||||
padding : 5px 15px 2px 6px;
|
||||
padding-right : 15px;
|
||||
margin-right : 15px;
|
||||
margin-bottom : 15px;
|
||||
overflow : hidden;
|
||||
vertical-align : top;
|
||||
background-color : #CAB2802E;
|
||||
border : 1px solid #C9AD6A;
|
||||
border-radius : 5px;
|
||||
box-shadow : 0px 4px 5px 0px #333333;
|
||||
break-inside : avoid;
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
break-inside: avoid;
|
||||
-webkit-column-break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
.thumbnail {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
z-index : -1;
|
||||
width : 150px;
|
||||
height : 100%;
|
||||
background-repeat : no-repeat;
|
||||
background-position : right top;
|
||||
background-size : contain;
|
||||
opacity : 50%;
|
||||
-webkit-mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%);
|
||||
mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right top;
|
||||
background-size: contain;
|
||||
}
|
||||
.text {
|
||||
min-height : 54px;
|
||||
h4 {
|
||||
margin-bottom : 5px;
|
||||
font-size : 2.2em;
|
||||
margin-bottom: 5px;
|
||||
font-size: 2.2em;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
position : initial;
|
||||
bottom : 2px;
|
||||
font-family : "ScalySansRemake";
|
||||
font-size : 1.2em;
|
||||
position: initial;
|
||||
bottom: 2px;
|
||||
font-size: 1.2em;
|
||||
& > span {
|
||||
margin-right : 12px;
|
||||
line-height : 1.5em;
|
||||
line-height: 1.5em;
|
||||
|
||||
a { color : inherit; }
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
.brewTags span {
|
||||
display : inline-block;
|
||||
padding : 2px;
|
||||
margin : 2px;
|
||||
font-weight : bold;
|
||||
white-space : nowrap;
|
||||
cursor : pointer;
|
||||
background-color : #C8AC6E3B;
|
||||
border : 1px solid #C8AC6E;
|
||||
border-color : currentColor;
|
||||
border-radius : 4px;
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
margin: 2px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background-color: #c8ac6e3b;
|
||||
border: 1px solid #c8ac6e;
|
||||
border-color: currentColor;
|
||||
border-radius: 4px;
|
||||
&::before {
|
||||
margin-right : 3px;
|
||||
font-family : 'Font Awesome 6 Free';
|
||||
font-size : 12px;
|
||||
margin-right: 3px;
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-size: 12px;
|
||||
}
|
||||
&.type {
|
||||
color : #008000;
|
||||
background-color : #0080003B;
|
||||
&::before { content : '\f0ad'; }
|
||||
color: #008000;
|
||||
background-color: #0080003b;
|
||||
&::before {
|
||||
content: '\f0ad';
|
||||
}
|
||||
}
|
||||
&.group {
|
||||
color : #000000;
|
||||
background-color : #5050503B;
|
||||
&::before { content : '\f500'; }
|
||||
color: #000000;
|
||||
background-color: #5050503b;
|
||||
&::before {
|
||||
content: '\f500';
|
||||
}
|
||||
}
|
||||
&.meta {
|
||||
color : #000080;
|
||||
background-color : #0000803B;
|
||||
&::before { content : '\f05a'; }
|
||||
color: #000080;
|
||||
background-color: #0000803b;
|
||||
&::before {
|
||||
content: '\f05a';
|
||||
}
|
||||
}
|
||||
&.system {
|
||||
color : #800000;
|
||||
background-color : #8000003B;
|
||||
&::before { content : '\f518'; }
|
||||
color: #800000;
|
||||
background-color: #8000003b;
|
||||
&::before {
|
||||
content: '\f518';
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover, &:focus-within {
|
||||
.links { opacity : 1; }
|
||||
&:nth-child(2n + 1) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
&:nth-child(2n + 1) { margin-right : 0px; }
|
||||
.links {
|
||||
.animate(opacity);
|
||||
position : absolute;
|
||||
top : 0px;
|
||||
right : 0px;
|
||||
width : 2em;
|
||||
height : 100%;
|
||||
text-align : center;
|
||||
background-color : fade(black, 60%);
|
||||
opacity : 0;
|
||||
a, button {
|
||||
text-align: center;
|
||||
background-color: fade(black, 60%);
|
||||
a,
|
||||
button {
|
||||
.animate(opacity);
|
||||
display : block;
|
||||
margin : 8px 0px;
|
||||
font-size : 1.3em;
|
||||
color : white;
|
||||
text-decoration : unset;
|
||||
opacity : 0.6;
|
||||
width : 100%;
|
||||
&:hover { opacity : 1; }
|
||||
i { cursor : pointer; }
|
||||
display: block;
|
||||
margin: 8px 0px;
|
||||
font-size: 1.3em;
|
||||
color: white;
|
||||
text-decoration: unset;
|
||||
opacity: 0.6;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.googleDriveIcon {
|
||||
padding : 0px;
|
||||
margin : -5px;
|
||||
height : 18px;
|
||||
padding: 0px;
|
||||
margin: -5px;
|
||||
height: 18px;
|
||||
}
|
||||
.homebreweryIcon {
|
||||
position : relative;
|
||||
padding : 0px;
|
||||
top : 5px;
|
||||
left : -7.5px;
|
||||
height : 18px;
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
top: 5px;
|
||||
left: -7.5px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid > .brewItem {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
width: 48%;
|
||||
min-width:400px;
|
||||
min-height: 125px;
|
||||
padding: 5px 15px 2px 6px;
|
||||
padding-right: 15px;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 15px;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
background-color: #cab2802e;
|
||||
background-image: url('https://ik.imagekit.io/5eCleric/background%20note.png');
|
||||
background-size:cover;
|
||||
border: 1px solid #c9ad6a;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 4px 5px 0px #333333;
|
||||
break-inside: avoid;
|
||||
-webkit-column-break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
isolation:isolate;
|
||||
.thumbnail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
width: 155px;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right top;
|
||||
background-size: contain;
|
||||
opacity: 50%;
|
||||
-webkit-mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%);
|
||||
mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%);
|
||||
}
|
||||
.text {
|
||||
min-height: 54px;
|
||||
h2 {
|
||||
margin-bottom: 5px;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
position: initial;
|
||||
bottom: 2px;
|
||||
|
||||
font-size: .9em;
|
||||
& > span {
|
||||
margin-right: 12px;
|
||||
line-height: 1.5em;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
.brewTags span {
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
margin: 2px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background-color: #c8ac6e3b;
|
||||
border: 1px solid #c8ac6e;
|
||||
border-color: currentColor;
|
||||
border-radius: 4px;
|
||||
&::before {
|
||||
margin-right: 3px;
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-size: 12px;
|
||||
}
|
||||
&.type {
|
||||
color: #008000;
|
||||
background-color: #0080003b;
|
||||
&::before {
|
||||
content: '\f0ad';
|
||||
}
|
||||
}
|
||||
&.group {
|
||||
color: #000000;
|
||||
background-color: #5050503b;
|
||||
&::before {
|
||||
content: '\f500';
|
||||
}
|
||||
}
|
||||
&.meta {
|
||||
color: #000080;
|
||||
background-color: #0000803b;
|
||||
&::before {
|
||||
content: '\f05a';
|
||||
}
|
||||
}
|
||||
&.system {
|
||||
color: #800000;
|
||||
background-color: #8000003b;
|
||||
&::before {
|
||||
content: '\f518';
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
.links {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:nth-child(2n + 1) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.links {
|
||||
.animate(opacity);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 2em;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: fade(black, 60%);
|
||||
opacity: 0;
|
||||
a,
|
||||
button {
|
||||
.animate(opacity);
|
||||
display: block;
|
||||
margin: 8px 0px;
|
||||
font-size: 1.3em;
|
||||
color: white;
|
||||
text-decoration: unset;
|
||||
opacity: 0.6;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.googleDriveIcon {
|
||||
padding: 0px;
|
||||
margin: -5px;
|
||||
height: 18px;
|
||||
}
|
||||
.homebreweryIcon {
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
top: 5px;
|
||||
left: -7.5px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.list > .brewItem {
|
||||
height: 50px;
|
||||
min-height: unset;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 2fr 1fr;
|
||||
align-items: center;
|
||||
color: rgb(2, 2, 2);
|
||||
background: #efefef;
|
||||
overflow: visible;
|
||||
font-size: 12px;
|
||||
|
||||
.text {
|
||||
min-height: unset;
|
||||
width: 100%;
|
||||
padding-inline: 10px;
|
||||
height: 100%;
|
||||
|
||||
display: grid;
|
||||
align-content: center;
|
||||
|
||||
h2 {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
height:100%;
|
||||
min-height:1.4em;
|
||||
align-content: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-areas: 'tags authors views pages update storage';
|
||||
justify-content: end;
|
||||
align-content: space-around;
|
||||
align-items:center;
|
||||
grid-template-columns: 200px 150px 70px 60px 150px 20px;
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
.brewTags {
|
||||
display: inline-block;
|
||||
grid-area: tags;
|
||||
}
|
||||
[title*='Authors:'] {
|
||||
display: inline-block;
|
||||
grid-area: authors;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
[title*='Last'] {
|
||||
display: inline-block;
|
||||
grid-area: views;
|
||||
}
|
||||
[title*='Page'] {
|
||||
display: inline-block;
|
||||
grid-area: pages;
|
||||
}
|
||||
[title*='Created'] {
|
||||
display: inline-block;
|
||||
grid-area: update;
|
||||
}
|
||||
[title*='Storage'] {
|
||||
display: inline-block;
|
||||
grid-area: storage;
|
||||
filter: drop-shadow(0 0 10px white);
|
||||
}
|
||||
|
||||
.brewTags {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.brewTags:has(span:nth-of-type(4)) {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
span:nth-of-type(n + 2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background: #707070;
|
||||
height: max-content;
|
||||
z-index: 100;
|
||||
width: min-content;
|
||||
padding: 10px;
|
||||
|
||||
span:nth-of-type(n + 4) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
display: block;
|
||||
height: calc(100% - 48px);
|
||||
background: #707070;
|
||||
border-inline: 1px solid gold;
|
||||
border-bottom: 1px solid gold;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
opacity: 1;
|
||||
background: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
> a {
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.editLink {
|
||||
color: @green;
|
||||
}
|
||||
.deleteLink {
|
||||
color: @red;
|
||||
}
|
||||
|
||||
.shareLink {
|
||||
color: deepskyblue;
|
||||
}
|
||||
|
||||
.downloadLink {
|
||||
color: coral;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card > .brewItem {
|
||||
background-color:grey;
|
||||
background-image:url('@themes/assets/naturalCritLogoBlack.svg');
|
||||
background-size:60%;
|
||||
background-position:center 20%;
|
||||
background-repeat:no-repeat;
|
||||
background-blend-mode: soft-light;
|
||||
width:400px;
|
||||
height:500px;
|
||||
border:1px solid;
|
||||
margin:10px;
|
||||
border-radius:10px;
|
||||
padding:10px;
|
||||
padding-top:100px;
|
||||
padding-bottom: 50px;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
isolation: isolate;
|
||||
position:relative;
|
||||
color:white;
|
||||
|
||||
|
||||
&::before {
|
||||
display:block;
|
||||
content:'';
|
||||
height:50%;
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
background-image:linear-gradient(0deg, #777f 0 , #7770 90%);
|
||||
z-index:-1;
|
||||
transition: height 0.2s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
height:100%;
|
||||
background-image:linear-gradient(0deg, #777f 0 ,#777f 42%, #7770 55%);
|
||||
}
|
||||
.text .description {
|
||||
height:fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left:0;
|
||||
z-index: -2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right top;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.text {
|
||||
filter:drop-shadow(0 1px 4px black);
|
||||
|
||||
h2 {
|
||||
font-weight:900;
|
||||
font-size:1.2em;
|
||||
}
|
||||
|
||||
.description {
|
||||
height:0;
|
||||
overflow:hidden;
|
||||
transition:height .2s;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
filter:drop-shadow(0 1px 2px black);
|
||||
height: 130px;
|
||||
display:grid;
|
||||
grid-template-areas:
|
||||
"tags tags tags"
|
||||
"author author author"
|
||||
"pages views views"
|
||||
"update update storage";
|
||||
|
||||
.brewTags {
|
||||
color:black;
|
||||
grid-area: tags;
|
||||
|
||||
i {
|
||||
color:white;
|
||||
}
|
||||
> span {
|
||||
background:hsl( from currentColor h 20% 80%);
|
||||
}
|
||||
}
|
||||
.brewAuthors {
|
||||
grid-area: author;
|
||||
}
|
||||
.brewPages {
|
||||
grid-area: pages;
|
||||
}
|
||||
.lastViewed {
|
||||
grid-area: views;
|
||||
}
|
||||
.lastUpdated {
|
||||
grid-area: update;
|
||||
}
|
||||
.storage {
|
||||
grid-area:storage;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.links {
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
height:40px;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -19,6 +19,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
|
||||
const [sortType, setSortType] = useState(query?.sort || null);
|
||||
const [sortDir, setSortDir] = useState(query?.dir || null);
|
||||
const [groupVisibility, setGroupVisibility] = useState({});
|
||||
const [layoutMode, setLayoutMode] = useState('grid');
|
||||
|
||||
const groupVisibilityRef = useRef(groupVisibility);
|
||||
const sortTypeRef = useRef(sortType);
|
||||
@@ -259,31 +260,61 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
|
||||
const sortedBrewGroup = sortedBrewCollection[idx];
|
||||
const visible = groupVisibility[brewGroup.class];
|
||||
|
||||
return (
|
||||
<div key={idx} className={`brewCollection ${brewGroup.class ?? ''}`}>
|
||||
<h1
|
||||
className={visible ? 'active' : 'inactive'}
|
||||
onClick={()=>{
|
||||
toggleBrewCollectionState(brewGroup.class);
|
||||
}}>
|
||||
{brewGroup.title || 'No Title'}
|
||||
</h1>
|
||||
return (<>
|
||||
<h1
|
||||
className={visible ? 'active' : 'inactive'}
|
||||
onClick={()=>{
|
||||
toggleBrewCollectionState(brewGroup.class);
|
||||
}}>
|
||||
{brewGroup.title || 'No Title'}
|
||||
</h1>
|
||||
<div key={idx} className={`brewGroup ${brewGroup.class ?? ''} ${layoutMode}`}>
|
||||
|
||||
{visible ? renderBrews(sortedBrewGroup.brews) : <></>}
|
||||
</div>
|
||||
);
|
||||
</>);
|
||||
});
|
||||
};
|
||||
|
||||
const handleLayoutChange = (e, mode)=>{
|
||||
setLayoutMode(e.target.checked ? mode : 'grid');
|
||||
return;
|
||||
};
|
||||
|
||||
const renderLayoutModeOptions = ()=>{
|
||||
return (
|
||||
<div className='layout-container'>
|
||||
<div className='layout-option' title='grid'>
|
||||
<label>
|
||||
<i className='fas fa-grip'></i>
|
||||
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} />
|
||||
</label>
|
||||
</div>
|
||||
<div className='layout-option' title='list'>
|
||||
<label>
|
||||
<i className='fas fa-grip'></i>
|
||||
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} />
|
||||
</label>
|
||||
</div>
|
||||
<div className='layout-option' title='card'>
|
||||
<label>
|
||||
<i className='fas fa-table'></i>
|
||||
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'card')} checked={layoutMode === 'card'} />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='listPage sitePage'>
|
||||
<link href='/themes/V3/Blank/style.css' type='text/css' rel='stylesheet' />
|
||||
<link href='/themes/V3/5ePHB/style.css' type='text/css' rel='stylesheet' />
|
||||
{navItems}
|
||||
{renderSortOptions()}
|
||||
{renderTagsOptions()}
|
||||
{renderLayoutModeOptions()}
|
||||
|
||||
<div className='content V3'>
|
||||
<div className='page'>{renderBrewCollection(brewCollection)}</div>
|
||||
<div className='brewCollection'>{renderBrewCollection(brewCollection)}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
|
||||
|
||||
.noColumns() {
|
||||
column-count : auto;
|
||||
column-fill : auto;
|
||||
column-gap : normal;
|
||||
-webkit-column-width : auto;
|
||||
-moz-column-width : auto;
|
||||
column-width : auto;
|
||||
-webkit-column-count : auto;
|
||||
-moz-column-count : auto;
|
||||
-webkit-column-width : auto;
|
||||
-moz-column-width : 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;
|
||||
@@ -18,28 +19,48 @@
|
||||
.listPage {
|
||||
.content {
|
||||
z-index : 1;
|
||||
.page {
|
||||
.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
|
||||
&::after { display : none; }
|
||||
.noBrews {
|
||||
margin : 10px 0px;
|
||||
font-size : 1.3em;
|
||||
font-style : italic;
|
||||
}
|
||||
.brewCollection {
|
||||
h1:hover { cursor : pointer; }
|
||||
.active::before, .inactive::before {
|
||||
padding : 100px 250px;
|
||||
.noBrews {
|
||||
margin : 10px 0px;
|
||||
font-size : 1.3em;
|
||||
font-style : italic;
|
||||
}
|
||||
.brewCollection {
|
||||
h1 {
|
||||
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 { color : var(--HB_Color_HeaderText); }
|
||||
.active::before { content : '\f107'; }
|
||||
.inactive { color : #707070; }
|
||||
.inactive::before { content : '\f105'; }
|
||||
&.active { color : white; }
|
||||
&.active::before { content : '\f107'; }
|
||||
&.inactive::before { content : '\f105'; }
|
||||
|
||||
}
|
||||
h1:hover { cursor : pointer; }
|
||||
|
||||
.brewGroup {
|
||||
|
||||
|
||||
&.list {
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
gap : 2px;
|
||||
}
|
||||
&.card {
|
||||
display : flex;
|
||||
flex-wrap : wrap;
|
||||
|
||||
h1 { position : absolute; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.sort-container {
|
||||
position : sticky;
|
||||
@@ -161,4 +182,24 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user