mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-09-23 09:42:56 +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(!renderStorage) return null;
|
||||||
if(brew.googleId) {
|
if(brew.googleId) {
|
||||||
return (
|
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'>
|
<a href={brew.webViewLink} target='_blank'>
|
||||||
<img className='googleDriveIcon' src={googleDriveIcon} alt='Google Drive Storage' />
|
<img className='googleDriveIcon' src={googleDriveIcon} alt='Google Drive Storage' />
|
||||||
</a>
|
</a>
|
||||||
@@ -101,7 +101,7 @@ const BrewItem = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span title='Homebrewery Storage'>
|
<span className='storage' title='Homebrewery Storage'>
|
||||||
<img className='homebreweryIcon' src={homebreweryIcon} alt='Homebrewery Storage' />
|
<img className='homebreweryIcon' src={homebreweryIcon} alt='Homebrewery Storage' />
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
@@ -123,7 +123,6 @@ const BrewItem = ({
|
|||||||
<h2>{brew.title}</h2>
|
<h2>{brew.title}</h2>
|
||||||
<p className='description'>{brew.description}</p>
|
<p className='description'>{brew.description}</p>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
|
||||||
<div className='info'>
|
<div className='info'>
|
||||||
{brew.tags?.length ? (
|
{brew.tags?.length ? (
|
||||||
<div className='brewTags' title={`${brew.tags.length} tags:\n${brew.tags.join('\n')}`}>
|
<div className='brewTags' title={`${brew.tags.length} tags:\n${brew.tags.join('\n')}`}>
|
||||||
@@ -134,7 +133,7 @@ const BrewItem = ({
|
|||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
<span title={`Authors:\n${brew.authors?.join('\n')}`}>
|
<span className='brewAuthors' title={`Authors:\n${brew.authors?.join('\n')}`}>
|
||||||
<i className='fas fa-user' />{' '}
|
<i className='fas fa-user' />{' '}
|
||||||
{brew.authors?.map((author, index)=>(
|
{brew.authors?.map((author, index)=>(
|
||||||
<React.Fragment key={index}>
|
<React.Fragment key={index}>
|
||||||
@@ -147,16 +146,16 @@ const BrewItem = ({
|
|||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
))}
|
))}
|
||||||
</span>
|
</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 && (
|
{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 aria-hidden='true'><i className='far fa-file' /> {brew.pageCount}</span>
|
||||||
</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
|
<span
|
||||||
|
className='lastUpdated'
|
||||||
aria-label={`Last updated ${moment(brew.updatedAt).fromNow()}`}
|
aria-label={`Last updated ${moment(brew.updatedAt).fromNow()}`}
|
||||||
title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)}
|
title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)}
|
||||||
Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}
|
Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}
|
||||||
|
|||||||
@@ -1,131 +1,570 @@
|
|||||||
@import '@sharedStyles/core.less';
|
@import '@sharedStyles/core.less';
|
||||||
|
@import '@themes/assets/assets.less';
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
|
||||||
|
|
||||||
.brewItem {
|
.brewItem {
|
||||||
position : relative;
|
position: relative;
|
||||||
box-sizing : border-box;
|
box-sizing: border-box;
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
width : 48%;
|
overflow: hidden;
|
||||||
min-height : 105px;
|
break-inside: avoid;
|
||||||
padding : 5px 15px 2px 6px;
|
-webkit-column-break-inside: avoid;
|
||||||
padding-right : 15px;
|
page-break-inside: avoid;
|
||||||
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;
|
|
||||||
.thumbnail {
|
.thumbnail {
|
||||||
position : absolute;
|
position: absolute;
|
||||||
top : 0;
|
top: 0;
|
||||||
right : 0;
|
right: 0;
|
||||||
z-index : -1;
|
z-index: -1;
|
||||||
width : 150px;
|
width: 150px;
|
||||||
height : 100%;
|
height: 100%;
|
||||||
background-repeat : no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position : right top;
|
background-position: right top;
|
||||||
background-size : contain;
|
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 {
|
.text {
|
||||||
min-height : 54px;
|
|
||||||
h4 {
|
h4 {
|
||||||
margin-bottom : 5px;
|
margin-bottom: 5px;
|
||||||
font-size : 2.2em;
|
font-size: 2.2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.info {
|
.info {
|
||||||
position : initial;
|
position: initial;
|
||||||
bottom : 2px;
|
bottom: 2px;
|
||||||
font-family : "ScalySansRemake";
|
font-size: 1.2em;
|
||||||
font-size : 1.2em;
|
|
||||||
& > span {
|
& > span {
|
||||||
margin-right : 12px;
|
line-height: 1.5em;
|
||||||
line-height : 1.5em;
|
|
||||||
|
|
||||||
a { color : inherit; }
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.brewTags span {
|
.brewTags span {
|
||||||
display : inline-block;
|
display: inline-block;
|
||||||
padding : 2px;
|
padding: 2px;
|
||||||
margin : 2px;
|
margin: 2px;
|
||||||
font-weight : bold;
|
font-weight: bold;
|
||||||
white-space : nowrap;
|
white-space: nowrap;
|
||||||
cursor : pointer;
|
cursor: pointer;
|
||||||
background-color : #C8AC6E3B;
|
background-color: #c8ac6e3b;
|
||||||
border : 1px solid #C8AC6E;
|
border: 1px solid #c8ac6e;
|
||||||
border-color : currentColor;
|
border-color: currentColor;
|
||||||
border-radius : 4px;
|
border-radius: 4px;
|
||||||
&::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;
|
||||||
}
|
}
|
||||||
&.type {
|
&.type {
|
||||||
color : #008000;
|
color: #008000;
|
||||||
background-color : #0080003B;
|
background-color: #0080003b;
|
||||||
&::before { content : '\f0ad'; }
|
&::before {
|
||||||
|
content: '\f0ad';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.group {
|
&.group {
|
||||||
color : #000000;
|
color: #000000;
|
||||||
background-color : #5050503B;
|
background-color: #5050503b;
|
||||||
&::before { content : '\f500'; }
|
&::before {
|
||||||
|
content: '\f500';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.meta {
|
&.meta {
|
||||||
color : #000080;
|
color: #000080;
|
||||||
background-color : #0000803B;
|
background-color: #0000803b;
|
||||||
&::before { content : '\f05a'; }
|
&::before {
|
||||||
|
content: '\f05a';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.system {
|
&.system {
|
||||||
color : #800000;
|
color: #800000;
|
||||||
background-color : #8000003B;
|
background-color: #8000003b;
|
||||||
&::before { content : '\f518'; }
|
&::before {
|
||||||
|
content: '\f518';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover, &:focus-within {
|
&:nth-child(2n + 1) {
|
||||||
.links { opacity : 1; }
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
&:nth-child(2n + 1) { margin-right : 0px; }
|
|
||||||
.links {
|
.links {
|
||||||
.animate(opacity);
|
text-align: center;
|
||||||
position : absolute;
|
background-color: fade(black, 60%);
|
||||||
top : 0px;
|
a,
|
||||||
right : 0px;
|
button {
|
||||||
width : 2em;
|
|
||||||
height : 100%;
|
|
||||||
text-align : center;
|
|
||||||
background-color : fade(black, 60%);
|
|
||||||
opacity : 0;
|
|
||||||
a, button {
|
|
||||||
.animate(opacity);
|
.animate(opacity);
|
||||||
display : block;
|
display: block;
|
||||||
margin : 8px 0px;
|
margin: 8px 0px;
|
||||||
font-size : 1.3em;
|
font-size: 1.3em;
|
||||||
color : white;
|
color: white;
|
||||||
text-decoration : unset;
|
text-decoration: unset;
|
||||||
opacity : 0.6;
|
opacity: 0.6;
|
||||||
width : 100%;
|
width: 100%;
|
||||||
&:hover { opacity : 1; }
|
&:hover {
|
||||||
i { cursor : pointer; }
|
opacity: 1;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.googleDriveIcon {
|
.googleDriveIcon {
|
||||||
padding : 0px;
|
padding: 0px;
|
||||||
margin : -5px;
|
margin: -5px;
|
||||||
height : 18px;
|
height: 18px;
|
||||||
}
|
}
|
||||||
.homebreweryIcon {
|
.homebreweryIcon {
|
||||||
position : relative;
|
position: relative;
|
||||||
padding : 0px;
|
padding: 0px;
|
||||||
top : 5px;
|
top: 5px;
|
||||||
left : -7.5px;
|
left: -7.5px;
|
||||||
height : 18px;
|
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 [sortType, setSortType] = useState(query?.sort || null);
|
||||||
const [sortDir, setSortDir] = useState(query?.dir || null);
|
const [sortDir, setSortDir] = useState(query?.dir || null);
|
||||||
const [groupVisibility, setGroupVisibility] = useState({});
|
const [groupVisibility, setGroupVisibility] = useState({});
|
||||||
|
const [layoutMode, setLayoutMode] = useState('grid');
|
||||||
|
|
||||||
const groupVisibilityRef = useRef(groupVisibility);
|
const groupVisibilityRef = useRef(groupVisibility);
|
||||||
const sortTypeRef = useRef(sortType);
|
const sortTypeRef = useRef(sortType);
|
||||||
@@ -259,31 +260,61 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
|
|||||||
const sortedBrewGroup = sortedBrewCollection[idx];
|
const sortedBrewGroup = sortedBrewCollection[idx];
|
||||||
const visible = groupVisibility[brewGroup.class];
|
const visible = groupVisibility[brewGroup.class];
|
||||||
|
|
||||||
return (
|
return (<>
|
||||||
<div key={idx} className={`brewCollection ${brewGroup.class ?? ''}`}>
|
<h1
|
||||||
<h1
|
className={visible ? 'active' : 'inactive'}
|
||||||
className={visible ? 'active' : 'inactive'}
|
onClick={()=>{
|
||||||
onClick={()=>{
|
toggleBrewCollectionState(brewGroup.class);
|
||||||
toggleBrewCollectionState(brewGroup.class);
|
}}>
|
||||||
}}>
|
{brewGroup.title || 'No Title'}
|
||||||
{brewGroup.title || 'No Title'}
|
</h1>
|
||||||
</h1>
|
<div key={idx} className={`brewGroup ${brewGroup.class ?? ''} ${layoutMode}`}>
|
||||||
|
|
||||||
{visible ? renderBrews(sortedBrewGroup.brews) : <></>}
|
{visible ? renderBrews(sortedBrewGroup.brews) : <></>}
|
||||||
</div>
|
</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 (
|
return (
|
||||||
<div className='listPage sitePage'>
|
<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}
|
{navItems}
|
||||||
{renderSortOptions()}
|
{renderSortOptions()}
|
||||||
{renderTagsOptions()}
|
{renderTagsOptions()}
|
||||||
|
{renderLayoutModeOptions()}
|
||||||
|
|
||||||
<div className='content V3'>
|
<div className='content V3'>
|
||||||
<div className='page'>{renderBrewCollection(brewCollection)}</div>
|
<div className='brewCollection'>{renderBrewCollection(brewCollection)}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,15 +1,16 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
|
||||||
|
|
||||||
.noColumns() {
|
.noColumns() {
|
||||||
column-count : auto;
|
-webkit-column-width : auto;
|
||||||
column-fill : auto;
|
-moz-column-width : auto;
|
||||||
column-gap : normal;
|
|
||||||
column-width : auto;
|
column-width : auto;
|
||||||
-webkit-column-count : auto;
|
-webkit-column-count : auto;
|
||||||
-moz-column-count : auto;
|
-moz-column-count : auto;
|
||||||
-webkit-column-width : auto;
|
column-count : auto;
|
||||||
-moz-column-width : auto;
|
column-fill : auto;
|
||||||
-webkit-column-gap : normal;
|
-webkit-column-gap : normal;
|
||||||
-moz-column-gap : normal;
|
-moz-column-gap : normal;
|
||||||
|
column-gap : normal;
|
||||||
height : auto;
|
height : auto;
|
||||||
min-height : 279.4mm;
|
min-height : 279.4mm;
|
||||||
margin : 20px auto;
|
margin : 20px auto;
|
||||||
@@ -18,28 +19,48 @@
|
|||||||
.listPage {
|
.listPage {
|
||||||
.content {
|
.content {
|
||||||
z-index : 1;
|
z-index : 1;
|
||||||
.page {
|
padding : 100px 250px;
|
||||||
.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
|
.noBrews {
|
||||||
&::after { display : none; }
|
margin : 10px 0px;
|
||||||
.noBrews {
|
font-size : 1.3em;
|
||||||
margin : 10px 0px;
|
font-style : italic;
|
||||||
font-size : 1.3em;
|
}
|
||||||
font-style : italic;
|
.brewCollection {
|
||||||
}
|
h1 {
|
||||||
.brewCollection {
|
margin-bottom : 20px;
|
||||||
h1:hover { cursor : pointer; }
|
font-size : 25px;
|
||||||
.active::before, .inactive::before {
|
color : #DDDDDD;
|
||||||
|
|
||||||
|
&.active::before, &.inactive::before {
|
||||||
padding-right : 0.5em;
|
padding-right : 0.5em;
|
||||||
font-family : 'Font Awesome 6 Free';
|
font-family : 'Font Awesome 6 Free';
|
||||||
font-size : 0.6cm;
|
font-size : 0.6cm;
|
||||||
font-weight : 900;
|
font-weight : 900;
|
||||||
}
|
}
|
||||||
.active { color : var(--HB_Color_HeaderText); }
|
&.active { color : white; }
|
||||||
.active::before { content : '\f107'; }
|
&.active::before { content : '\f107'; }
|
||||||
.inactive { color : #707070; }
|
&.inactive::before { content : '\f105'; }
|
||||||
.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 {
|
.sort-container {
|
||||||
position : sticky;
|
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