mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-11-04 22:38:43 +00:00
Merge pull request #4993 from naturalcrit/fit-listpage-into-vault
Userpage UI Rework
This commit is contained in:
Víctor Losada Hernández
@@ -15,21 +15,5 @@
|
||||
height : calc(~'100% - 29px'); //Navbar height
|
||||
overflow-y : hidden;
|
||||
}
|
||||
&.listPage .content {
|
||||
overflow-y : scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width : 20px;
|
||||
&:horizontal {
|
||||
width : auto;
|
||||
height : 20px;
|
||||
}
|
||||
&-thumb {
|
||||
background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
|
||||
&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
|
||||
}
|
||||
&-corner { visibility : hidden; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import './brewItem.less';
|
||||
import React, { useCallback } from 'react';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import moment from 'moment';
|
||||
import request from '../../../../utils/request-middleware.js';
|
||||
|
||||
@@ -19,6 +19,8 @@ const BrewItem = ({
|
||||
renderStorage = true,
|
||||
})=>{
|
||||
|
||||
const [detailsOpen, setDetailsOpen] = useState(false);
|
||||
|
||||
const deleteBrew = useCallback(()=>{
|
||||
if(brew.authors.length <= 1) {
|
||||
if(!window.confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
|
||||
@@ -92,7 +94,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 +103,7 @@ const BrewItem = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<span title='Homebrewery Storage'>
|
||||
<span className='storage' title='Homebrewery Storage'>
|
||||
<img className='homebreweryIcon' src={homebreweryIcon} alt='Homebrewery Storage' />
|
||||
</span>
|
||||
);
|
||||
@@ -117,13 +119,12 @@ const BrewItem = ({
|
||||
const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
|
||||
|
||||
return (
|
||||
<div className='brewItem'>
|
||||
<div className={`brewItem${detailsOpen ? ' detailsOpen' : ''}`} onClick={() => setDetailsOpen(!detailsOpen)} >
|
||||
{brew.thumbnail && <div className='thumbnail' style={{ backgroundImage: `url(${brew.thumbnail})` }}></div>}
|
||||
<div className='text'>
|
||||
<h2>{brew.title}</h2>
|
||||
<h2 title={brew.title}>{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 +135,7 @@ const BrewItem = ({
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
<span title={`Authors:\n${brew.authors?.join('\n')}`}>
|
||||
<div className='brewAuthors' title={`Authors:\n${brew.authors?.join('\n')}`}>
|
||||
<i className='fas fa-user' />{' '}
|
||||
{brew.authors?.map((author, index)=>(
|
||||
<React.Fragment key={index}>
|
||||
@@ -146,22 +147,22 @@ const BrewItem = ({
|
||||
{index < brew.authors.length - 1 && ', '}
|
||||
</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>
|
||||
</div>
|
||||
{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)}`}
|
||||
>
|
||||
<span aria-hidden='true'><i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}</span>
|
||||
<i className='fas fa-sync-alt' /><span aria-hidden='true'> {moment(brew.updatedAt).fromNow()}</span>
|
||||
</span>
|
||||
{renderStorageIcon()}
|
||||
</div>
|
||||
|
||||
@@ -1,30 +1,31 @@
|
||||
@import '@sharedStyles/core.less';
|
||||
@import '@themes/assets/assets.less';
|
||||
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
|
||||
|
||||
.brewItem {
|
||||
--bg-clr : #EEEEEE;
|
||||
--bg-image : @backgroundImageAlt;
|
||||
--text-clr : black;
|
||||
--text-shadow-clr : white;
|
||||
|
||||
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;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
overflow : hidden;
|
||||
vertical-align : top;
|
||||
background-color : #CAB2802E;
|
||||
border : 1px solid #C9AD6A;
|
||||
border-radius : 5px;
|
||||
box-shadow : 0px 4px 5px 0px #333333;
|
||||
font-size : 15px;
|
||||
color : var(--text-clr);
|
||||
background-color : var(--bg-clr);
|
||||
background-image : var(--bg-image);
|
||||
background-size : cover;
|
||||
isolation : isolate;
|
||||
break-inside : avoid;
|
||||
-webkit-column-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
.thumbnail {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
right : 30px;
|
||||
z-index : -1;
|
||||
width : 150px;
|
||||
width : 155px;
|
||||
height : 100%;
|
||||
background-repeat : no-repeat;
|
||||
background-position : right top;
|
||||
@@ -34,17 +35,14 @@
|
||||
mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%);
|
||||
}
|
||||
.text {
|
||||
min-height : 54px;
|
||||
h4 {
|
||||
margin-bottom : 5px;
|
||||
font-size : 2.2em;
|
||||
h2 {
|
||||
font-family : 'Alata';
|
||||
font-size : 1.25em;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
position : initial;
|
||||
bottom : 2px;
|
||||
font-family : 'ScalySansRemake';
|
||||
font-size : 1.2em;
|
||||
a { color : inherit; }
|
||||
font-size : 0.9em;
|
||||
& > span {
|
||||
margin-right : 12px;
|
||||
line-height : 1.5em;
|
||||
@@ -59,66 +57,44 @@
|
||||
font-weight : bold;
|
||||
white-space : nowrap;
|
||||
cursor : pointer;
|
||||
background-color : #C8AC6E3B;
|
||||
border : 1px solid #C8AC6E;
|
||||
border-color : currentColor;
|
||||
background-color : rgba(from var(--tag-base) r g b / 0.1);
|
||||
border : 1px solid currentColor;
|
||||
border-radius : 4px;
|
||||
&::before {
|
||||
margin-right : 3px;
|
||||
font-family : 'Font Awesome 6 Free';
|
||||
font-size : 12px;
|
||||
}
|
||||
--tag-base : #C8AC6E;
|
||||
--tag-type : #008000;
|
||||
--tag-group : #000000;
|
||||
--tag-meta : #000080;
|
||||
--tag-system : #800000;
|
||||
&.type {
|
||||
color : #008000;
|
||||
background-color : #0080003B;
|
||||
color : var(--tag-type);
|
||||
background-color : rgba(from var(--tag-type) r g b / 0.2);
|
||||
&::before { content : '\f0ad'; }
|
||||
}
|
||||
&.group {
|
||||
color : #000000;
|
||||
background-color : #5050503B;
|
||||
color : var(--tag-group);
|
||||
background-color : rgba(from var(--tag-group) r g b / 0.1);
|
||||
&::before { content : '\f500'; }
|
||||
}
|
||||
&.meta {
|
||||
color : #000080;
|
||||
background-color : #0000803B;
|
||||
color : var(--tag-meta);
|
||||
background-color : rgba(from var(--tag-meta) r g b / 0.2);
|
||||
&::before { content : '\f05a'; }
|
||||
}
|
||||
&.system {
|
||||
color : #800000;
|
||||
background-color : #8000003B;
|
||||
color : var(--tag-system);
|
||||
background-color : rgba(from var(--tag-system) r g b / 0.2);
|
||||
&::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;
|
||||
width : 100%;
|
||||
margin : 8px 0px;
|
||||
font-size : 1.3em;
|
||||
color : white;
|
||||
text-decoration : unset;
|
||||
opacity : 0.6;
|
||||
&:hover { opacity : 1; }
|
||||
i { cursor : pointer; }
|
||||
}
|
||||
}
|
||||
&:nth-child(2n + 1) { margin-right : 0; }
|
||||
.googleDriveIcon {
|
||||
height : 18px;
|
||||
padding : 0px;
|
||||
padding : 0;
|
||||
margin : -5px;
|
||||
}
|
||||
.homebreweryIcon {
|
||||
@@ -126,6 +102,350 @@
|
||||
top : 5px;
|
||||
left : -7.5px;
|
||||
height : 18px;
|
||||
padding : 0px;
|
||||
padding : 0;
|
||||
}
|
||||
.links {
|
||||
position : absolute;
|
||||
right : 0;
|
||||
display : flex;
|
||||
height : 100%;
|
||||
a,
|
||||
button {
|
||||
display : block;
|
||||
align-content : center;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
font-size : 1.3em;
|
||||
text-align : center;
|
||||
text-decoration : unset;
|
||||
cursor : pointer;
|
||||
&:hover { background-color : hsl(from currentColor h 30% 90%); }
|
||||
}
|
||||
.shareLink { color : @yellow; }
|
||||
.editLink { color : @green; }
|
||||
.downloadLink { color : @blueLight; }
|
||||
.deleteLink { color : @red; }
|
||||
}
|
||||
}
|
||||
.grid > .brewItem {
|
||||
justify-content : space-between;
|
||||
width : clamp(300px, 48%, 500px);
|
||||
min-height : 125px;
|
||||
padding : 5px 15px 5px 6px;
|
||||
padding-right : 30px;
|
||||
border-radius : 5px;
|
||||
box-shadow : 0 4px 5px 0 #333333;
|
||||
.text {
|
||||
min-height : 54px;
|
||||
h2 { margin-bottom : 5px; }
|
||||
.description { padding-left : 5px; }
|
||||
}
|
||||
.info { padding-left : 5px; }
|
||||
.links {
|
||||
top : 0;
|
||||
flex-direction : column;
|
||||
width : 2em;
|
||||
a,
|
||||
button {
|
||||
display : block;
|
||||
width : 100%;
|
||||
font-size : 1.1em;
|
||||
i { cursor : pointer; }
|
||||
}
|
||||
}
|
||||
}
|
||||
.card > .brewItem {
|
||||
gap : 5px;
|
||||
justify-content : flex-end;
|
||||
width : 300px;
|
||||
height : 400px;
|
||||
padding : 100px 10px 50px;
|
||||
background-image : url('@themes/assets/naturalCritLogoBlack.svg'), var(--bg-image);
|
||||
background-repeat : no-repeat;
|
||||
background-position : center 20%, center;
|
||||
background-size : 50%, cover;
|
||||
border : 3px solid;
|
||||
border-radius : 10px;
|
||||
box-shadow : 0 4px 5px #222222;
|
||||
&::before {
|
||||
position : absolute;
|
||||
right : 0;
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
z-index : -1;
|
||||
display : block;
|
||||
height : 50%;
|
||||
content : '';
|
||||
background-image : linear-gradient(0deg, var(--bg-clr) 0, hsl(from var(--bg-clr) h s l / 0) 90%);
|
||||
transition : height @defaultDuration;
|
||||
}
|
||||
&:hover {
|
||||
&::before {
|
||||
height : 100%;
|
||||
background-image : linear-gradient(0deg, var(--bg-clr) 0, var(--bg-clr) 55%, hsl(from var(--bg-clr) h s l / 0) 65%);
|
||||
}
|
||||
.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;
|
||||
opacity : 1;
|
||||
mask-image : unset;
|
||||
}
|
||||
.text {
|
||||
filter : drop-shadow(0 1px 4px var(--text-shadow-clr));
|
||||
h2 { font-weight : 900; }
|
||||
.description {
|
||||
height : 0;
|
||||
overflow : hidden;
|
||||
transition : height @defaultDuration;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
display : grid;
|
||||
grid-template-areas : 'tags tags tags tags'
|
||||
'authors authors authors authors'
|
||||
'pages views . .'
|
||||
'update update storage .';
|
||||
grid-template-columns : 1fr 1fr 1fr 30px;
|
||||
height : 110px;
|
||||
filter : drop-shadow(0 1px 2px var(--text-shadow-clr));
|
||||
.brewTags {
|
||||
grid-area : tags;
|
||||
color : inherit;
|
||||
i { color : inherit;}
|
||||
> span { background : hsl(from currentColor h 20% 80%); }
|
||||
}
|
||||
.brewAuthors { grid-area : authors; }
|
||||
.brewPages { grid-area : pages; }
|
||||
.lastViewed { grid-area : views; }
|
||||
.lastUpdated { grid-area : update; }
|
||||
.storage { grid-area : storage; }
|
||||
}
|
||||
.links {
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
height : 40px;
|
||||
}
|
||||
}
|
||||
.list > .brewItem {
|
||||
display : grid;
|
||||
grid-template-columns : 35% 3fr 150px;
|
||||
gap : 10px;
|
||||
align-items : center;
|
||||
width : 100%;
|
||||
height : 50px;
|
||||
.thumbnail { display : none; }
|
||||
.text {
|
||||
padding-left : 10px;
|
||||
h2 {
|
||||
.ellipsis();
|
||||
align-content : center;
|
||||
min-height : 1.4em;
|
||||
}
|
||||
.description { display : none; }
|
||||
}
|
||||
.info {
|
||||
display : grid;
|
||||
grid-template-areas : 'tags authors pages views update storage';
|
||||
grid-template-columns : 2fr 150px 0.7fr 65px 1.5fr 20px;
|
||||
align-content : space-around;
|
||||
align-items : center;
|
||||
justify-content : end;
|
||||
width : clamp(400px, 100%, 650px);
|
||||
br { display : none; }
|
||||
span { display : inline-block; margin : 0; }
|
||||
.brewTags {
|
||||
display : inline-flex;
|
||||
flex-wrap : wrap;
|
||||
grid-area : tags;
|
||||
align-items : center;
|
||||
width : 100%;
|
||||
i, span { margin-right : 5px; }
|
||||
&:has(span:nth-of-type(3)) {
|
||||
position : relative;
|
||||
display : flex;
|
||||
flex-wrap : wrap;
|
||||
overflow : hidden;
|
||||
span:nth-of-type(n + 3) { display : none; }
|
||||
}
|
||||
}
|
||||
.brewAuthors {
|
||||
.ellipsis();
|
||||
display : -webkit-box;
|
||||
grid-area : authors;
|
||||
align-content : center;
|
||||
width : 150px;
|
||||
height : 40px;
|
||||
padding-right : 5px;
|
||||
-webkit-line-clamp : 3;
|
||||
line-clamp : 3;
|
||||
-webkit-box-orient : vertical;
|
||||
&:has(a:only-of-type) { width : fit-content; }
|
||||
}
|
||||
.lastViewed {
|
||||
grid-area : views;
|
||||
min-width : 50px;
|
||||
}
|
||||
.brewPages {
|
||||
grid-area : pages;
|
||||
min-width : 40px;
|
||||
}
|
||||
.lastUpdated {
|
||||
display : flex;
|
||||
grid-area : update;
|
||||
gap : 5px;
|
||||
align-items : center;
|
||||
}
|
||||
.storage {
|
||||
grid-area : storage;
|
||||
filter : drop-shadow(0 0 10px var(--text-shadow-clr));
|
||||
.homebreweryIcon {
|
||||
top : 3px;
|
||||
left : -5px;
|
||||
height : 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.links {
|
||||
position : relative;
|
||||
a, button {
|
||||
align-content : center;
|
||||
height : 100%;
|
||||
text-align : center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//these media queries are just for the list layout and could be moved inside it, not sure it is a good idea
|
||||
@media screen and (max-width : 1400px) {
|
||||
.brewCollection .brewGroup.list {
|
||||
.brewItem:not(.detailsOpen) {
|
||||
.info {
|
||||
grid-template-areas : 'tags update storage';
|
||||
grid-template-columns : 2fr 1fr 20px;
|
||||
width : clamp(200px, 100%, 650px);
|
||||
}
|
||||
.brewPages,
|
||||
.lastViewed,
|
||||
.brewAuthors { display : none; }
|
||||
}
|
||||
.brewItem {
|
||||
cursor : pointer;
|
||||
transition : height @defaultDuration;
|
||||
&:hover {
|
||||
box-shadow : 0 0 5px var(--bg-clr);
|
||||
filter : brightness(0.97);
|
||||
}
|
||||
}
|
||||
.detailsOpen {
|
||||
grid-template-columns : 25% 3fr 150px;
|
||||
height : 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width : 1200px) {
|
||||
.brewCollection .brewGroup.list {
|
||||
.brewItem:not(.detailsOpen) {
|
||||
grid-template-columns : 35% 3fr 150px;
|
||||
.info {
|
||||
grid-template-areas : 'tags storage';
|
||||
grid-template-columns : 1fr 20px;
|
||||
}
|
||||
.brewAuthors,
|
||||
.lastUpdated { display : none; }
|
||||
}
|
||||
.detailsOpen {
|
||||
height : 100px;
|
||||
.info {
|
||||
grid-template-areas : 'tags views pages .'
|
||||
'authors update update storage';
|
||||
grid-template-rows : 1fr 1fr;
|
||||
grid-template-columns : 2fr 1fr 1fr 30px;
|
||||
width : clamp(200px, 100%, 650px);
|
||||
}
|
||||
.lastUpdated {
|
||||
.ellipsis();
|
||||
max-width : 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width : 800px) {
|
||||
.brewCollection .brewGroup.list {
|
||||
.brewItem:not(.detailsOpen) {
|
||||
.info {
|
||||
grid-template-areas : 'tags';
|
||||
grid-template-columns : 1fr;
|
||||
width : clamp(200px, 100%, 650px);
|
||||
}
|
||||
.storage { display : none; }
|
||||
}
|
||||
.brewItem {
|
||||
h2 {
|
||||
width : 200px;
|
||||
font-size : 1em;
|
||||
}
|
||||
transition : height @defaultDuration;
|
||||
}
|
||||
.detailsOpen {
|
||||
display : grid;
|
||||
grid-template-columns : 1fr 4fr 30px;
|
||||
height : 100px;
|
||||
padding : 5px;
|
||||
.text {
|
||||
height : 100%;
|
||||
padding : 0;
|
||||
h2 {
|
||||
display : -webkit-box;
|
||||
height : fit-content;
|
||||
overflow : hidden;
|
||||
text-overflow : ellipsis;
|
||||
-webkit-line-clamp : 3;
|
||||
line-clamp : 3;
|
||||
white-space : wrap;
|
||||
-webkit-box-orient : vertical;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
display : grid;
|
||||
grid-template-areas :
|
||||
'tags pages views views'
|
||||
'authors update update storage';
|
||||
grid-template-columns : 2fr 1fr 1fr 20px;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
}
|
||||
.links {
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
gap : 5px;
|
||||
a,
|
||||
button { margin : 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width : 650px) {
|
||||
.brewCollection .brewGroup.list {
|
||||
.brewItem:not(.detailsOpen) {
|
||||
grid-template-columns : 3fr 2fr;
|
||||
.info { display : none; }
|
||||
}
|
||||
.detailsOpen {
|
||||
.info {
|
||||
.lastUpdated {
|
||||
.ellipsis();
|
||||
width : 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,9 +9,11 @@ import BrewItem from './brewItem/brewItem.jsx';
|
||||
const USERPAGE_SORT_DIR = 'HB_listPage_sortDir';
|
||||
const USERPAGE_SORT_TYPE = 'HB_listPage_sortType';
|
||||
const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
|
||||
const USERPAGE_LAYOUT_MODE = 'HB_listPage_layout_mode';
|
||||
|
||||
const DEFAULT_SORT_TYPE = 'alpha';
|
||||
const DEFAULT_SORT_DIR = 'asc';
|
||||
const DEFAULT_LAYOUT_MODE = 'grid';
|
||||
|
||||
const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navItems = <></>, reportError = null, query })=>{
|
||||
const [filterString, setFilterString] = useState(query?.filter || '');
|
||||
@@ -19,6 +21,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(DEFAULT_LAYOUT_MODE);
|
||||
|
||||
const groupVisibilityRef = useRef(groupVisibility);
|
||||
const sortTypeRef = useRef(sortType);
|
||||
@@ -49,9 +52,12 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
|
||||
return visibility;
|
||||
}, {});
|
||||
|
||||
const newLayoutMode = localStorage.getItem(USERPAGE_LAYOUT_MODE) || DEFAULT_LAYOUT_MODE;
|
||||
|
||||
setGroupVisibility(namedBrewCollection);
|
||||
setSortType(newSortType);
|
||||
setSortDir(newSortDir);
|
||||
setLayoutMode(newLayoutMode);
|
||||
|
||||
return ()=>{
|
||||
window.onbeforeunload = null;
|
||||
@@ -175,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 (
|
||||
@@ -201,7 +208,6 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
|
||||
{renderSortOption('Updated Date', 'updated')}
|
||||
{renderSortOption('Views', 'views')}
|
||||
{/* {renderSortOption('Latest', 'latest')} */}
|
||||
{renderFilterOption()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -259,31 +265,75 @@ 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');
|
||||
localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : 'grid');
|
||||
return;
|
||||
};
|
||||
|
||||
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'} />
|
||||
<i className='fac compressed-grid'></i>
|
||||
</label>
|
||||
</div>
|
||||
<div className='layout-option' title='list'>
|
||||
<label>
|
||||
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} />
|
||||
<i className='fas fa-bars'></i>
|
||||
</label>
|
||||
</div>
|
||||
<div className='layout-option' title='card'>
|
||||
<label>
|
||||
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'card')} checked={layoutMode === 'card'} />
|
||||
<i className='fac format-card'></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderNav = () =>{
|
||||
|
||||
return (
|
||||
<div className="listPageNav">
|
||||
{renderSortOptions()}
|
||||
{renderFilterOption()}
|
||||
{renderTagsOptions()}
|
||||
{renderLayoutModeOptions()}
|
||||
</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()}
|
||||
|
||||
{renderNav()}
|
||||
|
||||
<div className='content V3'>
|
||||
<div className='page'>{renderBrewCollection(brewCollection)}</div>
|
||||
<div className='brewCollection'>{renderBrewCollection(brewCollection)}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
|
||||
@import '@sharedStyles/colors.less';
|
||||
@import '../../../../icons/customIcons.less';
|
||||
|
||||
.noColumns() {
|
||||
-webkit-column-width : auto;
|
||||
@@ -15,150 +18,245 @@
|
||||
margin : 20px auto;
|
||||
contain : unset;
|
||||
}
|
||||
.listPage {
|
||||
|
||||
.sitePage.listPage {
|
||||
--bg-clr : white;
|
||||
.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;
|
||||
padding : clamp(20px, 5vh, 200px) clamp(20px, 20vw, 200px);
|
||||
overflow-y : scroll;
|
||||
scrollbar-gutter : stable;
|
||||
@media screen and (max-width : 1200px) {
|
||||
padding : clamp(20px, 5vh, 200px) clamp(20px, 10vw, 200px);
|
||||
}
|
||||
@media screen and (max-width : 800px) {
|
||||
padding : clamp(20px, 5vh, 200px) clamp(20px, 5vw, 200px);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width : 15px;
|
||||
&:horizontal {
|
||||
width : auto;
|
||||
height : 20px;
|
||||
}
|
||||
.brewCollection {
|
||||
h1:hover { cursor : pointer; }
|
||||
.active::before, .inactive::before {
|
||||
&-thumb {
|
||||
background : linear-gradient(90deg, var(--bg-clr) 12px, #00000000 12px);
|
||||
&:horizontal { background : linear-gradient(0deg, var(--bg-clr) 15px, #00000000 15px); }
|
||||
}
|
||||
&-corner { visibility : hidden; }
|
||||
}
|
||||
|
||||
.noBrews {
|
||||
margin : 10px 0px;
|
||||
font-size : 1.3em;
|
||||
font-style : italic;
|
||||
font-weight : 900;
|
||||
color : white;
|
||||
}
|
||||
.brewCollection {
|
||||
h1 {
|
||||
width : fit-content;
|
||||
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;
|
||||
&::before { content : '\f107'; }
|
||||
}
|
||||
&.inactive::before { content : '\f105'; }
|
||||
}
|
||||
h1:hover { cursor : pointer; }
|
||||
|
||||
.brewGroup {
|
||||
margin-bottom : 20px;
|
||||
&.grid {
|
||||
display : flex;
|
||||
flex-wrap : wrap;
|
||||
gap : 20px;
|
||||
justify-content : center;
|
||||
width : fit-content;
|
||||
min-width : 200px;
|
||||
}
|
||||
|
||||
&.list {
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
gap : 2px;
|
||||
}
|
||||
&.card {
|
||||
--columns : 4;
|
||||
display : grid;
|
||||
grid-template-columns : repeat(var(--columns), 1fr);
|
||||
gap : 20px;
|
||||
justify-items : center;
|
||||
|
||||
@media screen and (max-width : 1700px) {--columns : 3;}
|
||||
@media screen and (max-width : 1400px) {--columns : 2;}
|
||||
@media screen and (max-width : 900px) {--columns : 1;}
|
||||
h1 { position : absolute; }
|
||||
|
||||
&:not(:has(.brewItem:last-child:nth-child(3n))) {
|
||||
.brewItem:last-child {
|
||||
margin-right : auto;
|
||||
background : green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
display : flex;
|
||||
flex-wrap : wrap;
|
||||
row-gap : 10px;
|
||||
column-gap : 20px;
|
||||
align-items : center;
|
||||
justify-content : center;
|
||||
width : 100%;
|
||||
height : fit-content;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
color : white;
|
||||
background : #555555;
|
||||
border-top : 1px solid #666666;
|
||||
border-bottom : 1px solid #666666;
|
||||
row-rule : 1px solid #666666;
|
||||
|
||||
> div {
|
||||
width : fit-content;
|
||||
height : 30px;
|
||||
padding-inline : 10px;
|
||||
}
|
||||
.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;
|
||||
display : grid;
|
||||
place-items : center;
|
||||
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;
|
||||
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;
|
||||
|
||||
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;
|
||||
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'; }
|
||||
}
|
||||
i { transition : color 0.2s; }
|
||||
|
||||
input:checked + i { color : @blueLight; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 399.76 400.41">
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<rect width="183.16" height="77.61" rx="16.76" ry="16.76"/>
|
||||
<rect y="107.6" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
|
||||
<rect y="215.2" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
|
||||
<rect y="322.8" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
|
||||
<rect x="216.6" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
|
||||
<rect x="216.6" y="107.6" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
|
||||
<rect x="216.6" y="215.2" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
|
||||
<rect x="216.6" y="322.8" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 807 B |
@@ -32,3 +32,5 @@
|
||||
.single-spread { mask-image : url('../icons/single-spread.svg'); }
|
||||
.facing-spread { mask-image : url('../icons/facing-spread.svg'); }
|
||||
.flow-spread { mask-image : url('../icons/flow-spread.svg'); }
|
||||
.format-card { mask-image: url('../icons/format-card.svg'); }
|
||||
.compressed-grid { mask-image: url('../icons//compressed-grid.svg'); }
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324.38 433.46" width="324.38" height="433.46" xml:space="preserve">
|
||||
<g id="Layer_2-2" data-name="Layer 2">
|
||||
<path d="M267.61,0H56.77C25.42,0,0,25.42,0,56.77v319.92c0,31.35,25.42,56.77,56.77,56.77h210.84c31.35,0,56.77-25.42,56.77-56.77V56.77c0-31.35-25.42-56.77-56.77-56.77ZM94.52,45.62c12.6,0,22.81,10.21,22.81,22.81s-10.21,22.81-22.81,22.81-22.81-10.21-22.81-22.81,10.21-22.81,22.81-22.81ZM73.06,187.38l34.38-57.2c4.29-7.14,14.6-7.26,19.05-.22l7.7,12.17c1.02,1.61,3.36,1.65,4.44.08l31.31-45.56c4.44-6.45,13.96-6.47,18.42-.04l62.23,89.65c5.3,7.63-.16,18.07-9.45,18.07H82.65c-8.7.01-14.07-9.49-9.59-16.95ZM258.24,388.61H67.91c-6.8,0-12.31-5.51-12.31-12.31s5.51-12.31,12.31-12.31h190.33c6.8,0,12.31,5.51,12.31,12.31s-5.51,12.31-12.31,12.31ZM258.24,348.81H67.91c-6.8,0-12.31-5.51-12.31-12.31s5.51-12.31,12.31-12.31h190.33c6.8,0,12.31,5.51,12.31,12.31s-5.51,12.31-12.31,12.31ZM258.24,309H67.91c-6.8,0-12.31-5.51-12.31-12.31s5.51-12.31,12.31-12.31h190.33c6.8,0,12.31,5.51,12.31,12.31s-5.51,12.31-12.31,12.31Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -32,3 +32,10 @@ html,body, #reactRoot {
|
||||
background-color : @silver !important;
|
||||
}
|
||||
}
|
||||
.ellipsis() {
|
||||
overflow : hidden;
|
||||
text-overflow : ellipsis;
|
||||
word-break : break-all;
|
||||
white-space : nowrap;
|
||||
//remember, for ellipsis to work, an explicit width must be set
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user