Merge branch 'naturalcrit:master' into limitStreamListeners-#5090.1

client/homebrew/homebrew.less

@@ -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; }
-			}
-		}
 	}
 }

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -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>
+				</div>
-				<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)}`}
 				>
-					<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>

client/homebrew/pages/basePages/listPage/brewItem/brewItem.less

@@ -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                     : flex;
-	display                     : inline-block;
+	flex-direction              : column;
-	width                       : 48%;
-	min-height                  : 105px;
-	padding                     : 5px 15px 2px 6px;
-	padding-right               : 15px;
-	margin-right                : 15px;
-	margin-bottom               : 15px;
 	overflow                    : hidden;
-	vertical-align              : top;
+	font-size                   : 15px;
-	background-color            : #CAB2802E;
+	color                       : var(--text-clr);
-	border                      : 1px solid #C9AD6A;
+	background-color            : var(--bg-clr);
-	border-radius               : 5px;
+	background-image            : var(--bg-image);
-	box-shadow                  : 0px 4px 5px 0px #333333;
+	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;
+		h2 {
-		h4 {
+			font-family : 'Alata';
-			margin-bottom : 5px;
+			font-size   : 1.25em;
-			font-size     : 2.2em;
 		}
 	}
 	.info {
-		position    : initial;
+		a { color : inherit; }
-		bottom      : 2px;
+		font-size   : 0.9em;
-		font-family : 'ScalySansRemake';
-		font-size   : 1.2em;
 		& > span {
 			margin-right : 12px;
 			line-height  : 1.5em;
@@ -59,66 +57,44 @@
 		font-weight      : bold;
 		white-space      : nowrap;
 		cursor           : pointer;
-		background-color : #C8AC6E3B;
+		background-color : rgba(from var(--tag-base) r g b / 0.1);
-		border           : 1px solid #C8AC6E;
+		border           : 1px solid currentColor;
-		border-color     : 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;
+			color            : var(--tag-type);
-			background-color : #0080003B;
+			background-color : rgba(from var(--tag-type) r g b / 0.2);
 			&::before { content : '\f0ad'; }
 		}
 		&.group {
-			color            : #000000;
+			color            : var(--tag-group);
-			background-color : #5050503B;
+			background-color : rgba(from var(--tag-group) r g b / 0.1);
 			&::before { content : '\f500'; }
 		}
 		&.meta {
-			color            : #000080;
+			color            : var(--tag-meta);
-			background-color : #0000803B;
+			background-color : rgba(from var(--tag-meta) r g b / 0.2);
 			&::before { content : '\f05a'; }
 		}
 		&.system {
-			color            : #800000;
+			color            : var(--tag-system);
-			background-color : #8000003B;
+			background-color : rgba(from var(--tag-system) r g b / 0.2);
 			&::before { content : '\f518'; }
 		}
 	}
-	&:hover, &:focus-within {
+	&:nth-child(2n + 1) { margin-right : 0; }
-		.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; }
-		}
-	}
 	.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;
+				}
+			}
+		}
 	}
 }

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -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 (
@@ -185,7 +192,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 								updateUrl(filterString, sortType, sortDir, tag);
 							}}>
 							{matches[2]}
-						</span>
+						</span>						
 					);
 				})}
 			</div>
@@ -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 (
+			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) : <></>}
 				</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>
 	);

client/homebrew/pages/basePages/listPage/listPage.less

@@ -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;
+		padding          : clamp(20px, 5vh, 200px) clamp(20px, 20vw, 200px);
-		.page {
+		overflow-y       : scroll;
-			.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
+		scrollbar-gutter : stable;
-			&::after { display : none; }
+		@media screen and (max-width : 1200px) {
-			.noBrews {
+			padding : clamp(20px, 5vh, 200px) clamp(20px, 10vw, 200px);
-				margin     : 10px 0px;
+		}
-				font-size  : 1.3em;
+		@media screen and (max-width : 800px) {
-				font-style : italic;
+			padding : clamp(20px, 5vh, 200px) clamp(20px, 5vw, 200px);
+		}
+
+		&::-webkit-scrollbar {
+			width : 15px;
+			&:horizontal {
+				width  : auto;
+				height : 20px;
 			}
-			.brewCollection {
+			&-thumb {
-				h1:hover { cursor : pointer; }
+				background : linear-gradient(90deg, var(--bg-clr) 12px, #00000000 12px);
-				.active::before, .inactive::before {
+				&: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 {
-				.active::before { content : '\f107'; }
+					color : white;
-				.inactive { color : #707070; }
+					&::before { content : '\f107'; }
-				.inactive::before { content : '\f105'; }
+				}
+				&.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;
+	.listPageNav {
-		top                   : 0;
+		position        : relative;
-		left                  : 0;
+		display         : flex;
-		z-index               : 1;
+		flex-wrap       : wrap;
-		display               : flex;
+		row-gap         : 10px;
-		flex-wrap             : wrap;
+		column-gap      : 20px;
-		row-gap               : 5px;
+		align-items     : center;
-		column-gap            : 15px;
+		justify-content : center;
-		align-items           : baseline;
+		width           : 100%;
-		justify-content       : center;
+		height          : fit-content;
-		width                 : 100%;
+		font-family     : 'Open Sans', sans-serif;
-		height                : 30px;
+		color           : white;
-		font-family           : 'Open Sans', sans-serif;
+		background      : #555555;
-		color                 : white;
+		border-top      : 1px solid #666666;
-		text-align            : center;
+		border-bottom   : 1px solid #666666;
-		background-color      : #555555;
+		row-rule        : 1px solid #666666;
-		border-top            : 1px solid #666666;
+
-		border-bottom         : 1px solid #666666;
+		> div {
-		h6 {
+			width          : fit-content;
-			font-family    : 'Open Sans', sans-serif;
+			height         : 30px;
-			font-size      : 11px;
+			padding-inline : 10px;
-			font-weight    : bold;
-			text-transform : uppercase;
 		}
-		.sort-option {
-			display     : flex;
-			align-items : center;
-			height      : 100%;
-			padding     : 0 8px;
-			color       : #CCCCCC;
 
-			&:hover { background-color : #444444; }
+		.sort-container {
+			z-index         : 1;
+			display         : flex;
+			flex-wrap       : wrap;
+			row-gap         : 5px;
+			column-gap      : 15px;
+			align-items     : baseline;
+			justify-content : center;
 
-			&.active {
+			text-align      : center;
-				font-weight      : bold;
-				color            : #DDDDDD;
-				background-color : #333333;
 
-				button {
+			h6 {
-					height      : 100%;
+				font-size      : 11px;
-					font-weight : 800;
+				font-weight    : bold;
-					color       : white;
+				text-transform : uppercase;
-					& + .sortDir { padding-left : 5px; }
+			}
+			.sort-option {
+				display     : flex;
+				align-items : center;
+				height      : 100%;
+				padding     : 0 8px;
+				color       : #CCCCCC;
+
+				&:hover { background-color : #444444; }
+
+				&.active {
+					font-weight      : bold;
+					color            : #DDDDDD;
+					background-color : #333333;
+
+					button {
+						height      : 100%;
+						font-weight : 800;
+						color       : white;
+						& + .sortDir { padding-left : 5px; }
+					}
 				}
 			}
 
+			button {
+				padding          : 0;
+				font-size        : 11px;
+				font-weight      : normal;
+				color            : #CCCCCC;
+				text-transform   : uppercase;
+				background-color : transparent;
+			}
 		}
+
 		.filter-option {
-			margin-left      : 20px;
+			display          : grid;
+			place-items      : center;
 			font-size        : 11px;
 			background-color : transparent !important;
 			i { padding-right : 5px; }
 		}
-		button {
+		.tags-container {
-			padding          : 0;
+			display         : flex;
-			font-family      : 'Open Sans', sans-serif;
+			flex-wrap       : wrap;
-			font-size        : 11px;
+			row-gap         : 5px;
-			font-weight      : normal;
+			column-gap      : 15px;
-			color            : #CCCCCC;
+			align-items     : center;
-			text-transform   : uppercase;
+			justify-content : center;
-			background-color : transparent;
+			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; }
 
-	}
+			i { transition : color 0.2s; }
-	.tags-container {
+
-		display            : flex;
+			input:checked + i { color : @blueLight; }
-		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'; }
-			}
 		}
 	}
 }

client/icons/compressed-grid.svg

@@ -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>

client/icons/customIcons.less

@@ -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'); }

client/icons/format-card.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>

package-lock.json

@@ -52,7 +52,7 @@
         "marked-hbfm": "^1.0.1",
         "markedLegacy": "npm:marked@^0.3.19",
         "moment": "^2.31.0",
-        "mongoose": "^9.10.2",
+        "mongoose": "^9.10.4",
         "nanoid": "6.0.1",
         "nconf": "^0.13.0",
         "node": "^26.10.0",
@@ -65,7 +65,7 @@
         "superagent": "^10.4.1"
       },
       "devDependencies": {
-        "@stylistic/stylelint-plugin": "^5.3.0",
+        "@stylistic/stylelint-plugin": "^5.3.1",
         "babel-jest": "^30.5.2",
         "babel-plugin-transform-import-meta": "^3.0.0",
         "eslint": "9.7",
@@ -77,11 +77,11 @@
         "jsdom": "^30.1.1",
         "jsdom-global": "^3.0.2",
         "postcss-less": "^6.0.0",
-        "stylelint": "^17.15.0",
+        "stylelint": "^17.16.0",
         "stylelint-config-recess-order": "^7.7.0",
         "stylelint-config-recommended": "^18.0.0",
-        "supertest": "^7.3.0",
+        "supertest": "^7.3.1",
-        "vite": "^8.3.1"
+        "vite": "^8.3.2"
       },
       "engines": {
         "node": ">=26.4.0",
@@ -4339,9 +4339,9 @@
       "license": "MIT"
     },
     "node_modules/@stylistic/stylelint-plugin": {
-      "version": "5.3.0",
+      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/@stylistic/stylelint-plugin/-/stylelint-plugin-5.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@stylistic/stylelint-plugin/-/stylelint-plugin-5.3.1.tgz",
-      "integrity": "sha512-xbyxPeaO9Vns6A8/0MQV6PzZ5nNZCoGV4q1ERaNd5EBAKlWt+YcpaPapNYNUkZaiQg98+xPbikdA58ehquJG3g==",
+      "integrity": "sha512-w6WFLYzQS6nhbcoq8pwYP+OJYYhsdGEiCxY+eINi2+ouDwRLXTucXZj6IrDzkY4di+vsGOPVvJ4/gXChSeOtlw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -11858,9 +11858,9 @@
       }
     },
     "node_modules/mongoose": {
-      "version": "9.10.2",
+      "version": "9.10.4",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-9.10.2.tgz",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-9.10.4.tgz",
-      "integrity": "sha512-oFcFL3dsX5tDzMwBD+GGoDqKIj6RNG3bu3oqlvcUIgPulHP14/6N7c07j3s0XgbrlT7U/lbiXOD89hmPtEXnfQ==",
+      "integrity": "sha512-p1hx2MSD4B+4shFTpRcd/uTwD6DtZeDJ+YxM9ja8/VBDH7vqqLynwGLA6rWa/tD7voOBoGqQR1wM3+/LcUoEfA==",
       "license": "MIT",
       "dependencies": {
         "@standard-schema/spec": "^1.1.0",
@@ -11879,31 +11879,6 @@
         "url": "https://opencollective.com/mongoose"
       }
     },
-    "node_modules/mongoose/node_modules/gcp-metadata": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-7.0.1.tgz",
-      "integrity": "sha512-UcO3kefx6dCcZkgcTGgVOTFb7b1LlQ02hY1omMjjrrBzkajRMCFgYOjs7J71WqnuG1k2b+9ppGL7FsOfhZMQKQ==",
-      "extraneous": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "gaxios": "^7.0.0",
-        "google-logging-utils": "^1.0.0",
-        "json-bigint": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/mongoose/node_modules/google-logging-utils": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/google-logging-utils/-/google-logging-utils-1.2.0.tgz",
-      "integrity": "sha512-WE9av4wKDZgRjBwgVUabocx8T6/7o3Ca1Fat46FXDhXVAFibzNadedcOXrdgd1Kzmk8tsk/9ZH89Wyf/SqeZ3A==",
-      "extraneous": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/mongoose/node_modules/mongodb": {
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-7.6.0.tgz",
@@ -14103,9 +14078,9 @@
       "license": "ISC"
     },
     "node_modules/stylelint": {
-      "version": "17.15.0",
+      "version": "17.16.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-17.15.0.tgz",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-17.16.0.tgz",
-      "integrity": "sha512-mWIkesYQvQjf4Kvdeu9ns0IL8/K/wtjaGxPqsPd6DlLZvaQxGysJsocxUDrBcyHQ5VleAk4uSMat4yMrVED7PA==",
+      "integrity": "sha512-ejlWnbJ13x1GU32+zZXa6sYQJsKKkwSdv2B4rAdO3OWdEmvhSJKcXi5pOphQYSzyaj1kXpuGJr7pcMBNfDIuPw==",
       "dev": true,
       "funding": [
         {
@@ -14305,9 +14280,9 @@
       }
     },
     "node_modules/supertest": {
-      "version": "7.3.0",
+      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/supertest/-/supertest-7.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/supertest/-/supertest-7.3.1.tgz",
-      "integrity": "sha512-UwwmWq3xLhyU96c521wYNaBg7IqX78Wpj4FKs6Katp6vdklX42zU5ESvX3KeZRLFyO44RwFp4yvxYMNZzCcX9g==",
+      "integrity": "sha512-vNaNCFoCR/edDbErQZp5KLNT8R4dSPHX7rlDLoE8hWLAm/878j6ShMbe8HK/E6RwwuhlSXVelXAIg9AxR5WWPw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -15104,15 +15079,15 @@
       }
     },
     "node_modules/vite": {
-      "version": "8.3.1",
+      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-8.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.3.2.tgz",
-      "integrity": "sha512-/bvH9E9tmCXRGp2uXY3WbOldqpTwFkbha/8ANaEQ6VkxhH60KyqLwgZq6lG2y+4uT55x9+9eUHMpQ7uGnOCKjA==",
+      "integrity": "sha512-SQr1x6W5vVSbROg7vsyXIaxK9b0G7zsT68acdWWRmnBUsgDieLCRG+Rep9WdZgcposvv/GSnr4GUUBqB3vXq6w==",
       "license": "MIT",
       "dependencies": {
         "lightningcss": "^1.33.0",
         "picomatch": "^4.0.7",
         "postcss": "^8.5.28",
-        "rolldown": "~1.2.9",
+        "rolldown": "~1.2.11",
         "tinyglobby": "^0.2.17"
       },
       "bin": {

package.json

@@ -129,7 +129,7 @@
     "marked-hbfm": "^1.0.1",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.31.0",
-    "mongoose": "^9.10.2",
+    "mongoose": "^9.10.4",
     "nanoid": "6.0.1",
     "nconf": "^0.13.0",
     "node": "^26.10.0",
@@ -142,7 +142,7 @@
     "superagent": "^10.4.1"
   },
   "devDependencies": {
-    "@stylistic/stylelint-plugin": "^5.3.0",
+    "@stylistic/stylelint-plugin": "^5.3.1",
     "babel-jest": "^30.5.2",
     "babel-plugin-transform-import-meta": "^3.0.0",
     "eslint": "9.7",
@@ -154,10 +154,10 @@
     "jsdom": "^30.1.1",
     "jsdom-global": "^3.0.2",
     "postcss-less": "^6.0.0",
-    "stylelint": "^17.15.0",
+    "stylelint": "^17.16.0",
     "stylelint-config-recess-order": "^7.7.0",
     "stylelint-config-recommended": "^18.0.0",
-    "supertest": "^7.3.0",
+    "supertest": "^7.3.1",
-    "vite": "^8.3.1"
+    "vite": "^8.3.2"
   }
 }

shared/naturalcrit/styles/core.less

@@ -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
+}