diff --git a/client/homebrew/homebrew.less b/client/homebrew/homebrew.less index 1ab0ff605..451b1a1f5 100644 --- a/client/homebrew/homebrew.less +++ b/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; } - } - } } } \ No newline at end of file diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx index 5cc02c986..2e02a4d9f 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx +++ b/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 ( - + Google Drive Storage @@ -101,7 +103,7 @@ const BrewItem = ({ } return ( - + Homebrewery Storage ); @@ -117,13 +119,12 @@ const BrewItem = ({ const dateFormatString = 'YYYY-MM-DD HH:mm:ss'; return ( -
+
setDetailsOpen(!detailsOpen)} > {brew.thumbnail &&
}
-

{brew.title}

+

{brew.title}

{brew.description}

-
{brew.tags?.length ? (
@@ -134,7 +135,7 @@ const BrewItem = ({ })}
) : null} - +
{' '} {brew.authors?.map((author, index)=>( @@ -146,22 +147,22 @@ const BrewItem = ({ {index < brew.authors.length - 1 && ', '} ))} - -
- - - +
{brew.pageCount && ( - + )} + + + - + {renderStorageIcon()}
diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index cf9cf3038..e695a786b 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/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 : 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; + } + } + } } } diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index 71359c53d..76f15b471 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/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 (
+ 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]} - + ); })}
@@ -201,7 +208,6 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI {renderSortOption('Updated Date', 'updated')} {renderSortOption('Views', 'views')} {/* {renderSortOption('Latest', 'latest')} */} - {renderFilterOption()}
); }; @@ -259,31 +265,75 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI const sortedBrewGroup = sortedBrewCollection[idx]; const visible = groupVisibility[brewGroup.class]; - return ( -
-

{ - toggleBrewCollectionState(brewGroup.class); - }}> - {brewGroup.title || 'No Title'} -

+ return (<> +

{ + toggleBrewCollectionState(brewGroup.class); + }}> + {brewGroup.title || 'No Title'} +

+
+ {visible ? renderBrews(sortedBrewGroup.brews) : <>}
- ); + ); }); }; + const handleLayoutChange = (e, mode)=>{ + setLayoutMode(e.target.checked ? mode : 'grid'); + localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : 'grid'); + return; + }; + + const renderLayoutModeOptions = ()=>{ + return ( +
+ View: +
+ +
+
+ +
+
+ +
+
+ ); + }; + + const renderNav = () =>{ + + return ( +
+ {renderSortOptions()} + {renderFilterOption()} + {renderTagsOptions()} + {renderLayoutModeOptions()} +
+ ); + + } + return (
- - {navItems} - {renderSortOptions()} - {renderTagsOptions()} + + {renderNav()}
-
{renderBrewCollection(brewCollection)}
+
{renderBrewCollection(brewCollection)}
); diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index ab32e9409..4267bb982 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/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; - .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; } } } } diff --git a/client/icons/compressed-grid.svg b/client/icons/compressed-grid.svg new file mode 100644 index 000000000..23f825236 --- /dev/null +++ b/client/icons/compressed-grid.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/icons/customIcons.less b/client/icons/customIcons.less index a2caffc57..a0678555d 100644 --- a/client/icons/customIcons.less +++ b/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'); } diff --git a/client/icons/format-card.svg b/client/icons/format-card.svg new file mode 100644 index 000000000..484ca3d75 --- /dev/null +++ b/client/icons/format-card.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 91130c75e..dd29703b6 100644 --- a/package-lock.json +++ b/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", @@ -11858,9 +11858,9 @@ } }, "node_modules/mongoose": { - "version": "9.10.2", - "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-9.10.2.tgz", - "integrity": "sha512-oFcFL3dsX5tDzMwBD+GGoDqKIj6RNG3bu3oqlvcUIgPulHP14/6N7c07j3s0XgbrlT7U/lbiXOD89hmPtEXnfQ==", + "version": "9.10.4", + "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-9.10.4.tgz", + "integrity": "sha512-p1hx2MSD4B+4shFTpRcd/uTwD6DtZeDJ+YxM9ja8/VBDH7vqqLynwGLA6rWa/tD7voOBoGqQR1wM3+/LcUoEfA==", "license": "MIT", "dependencies": { "@standard-schema/spec": "^1.1.0", diff --git a/package.json b/package.json index b8cf908a1..d6b99c4a7 100644 --- a/package.json +++ b/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", diff --git a/shared/naturalcrit/styles/core.less b/shared/naturalcrit/styles/core.less index 02d3dbab8..5ea1fad18 100644 --- a/shared/naturalcrit/styles/core.less +++ b/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 +}