From bac88eede75e1986e499f3d7401c39b5055cb72b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 5 Sep 2026 19:19:01 +0200 Subject: [PATCH 01/34] first draft --- .../basePages/listPage/brewItem/brewItem.jsx | 17 +- .../basePages/listPage/brewItem/brewItem.less | 629 +++++++++++++++--- .../pages/basePages/listPage/listPage.jsx | 57 +- .../pages/basePages/listPage/listPage.less | 81 ++- 4 files changed, 647 insertions(+), 137 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx index 5cc02c986..264bbf56a 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx @@ -92,7 +92,7 @@ const BrewItem = ({ if(!renderStorage) return null; if(brew.googleId) { return ( - + Google Drive Storage @@ -101,7 +101,7 @@ const BrewItem = ({ } return ( - + Homebrewery Storage ); @@ -123,7 +123,6 @@ const BrewItem = ({

{brew.title}

{brew.description}

-
{brew.tags?.length ? (
@@ -134,7 +133,7 @@ const BrewItem = ({ })}
) : null} - + {' '} {brew.authors?.map((author, index)=>( @@ -147,16 +146,16 @@ const BrewItem = ({ ))} -
- - - {brew.pageCount && ( - + )} + + + span { - margin-right : 12px; - line-height : 1.5em; + line-height: 1.5em; - a { color : inherit; } + a { + color: inherit; + } } } .brewTags span { - display : inline-block; - padding : 2px; - margin : 2px; - font-weight : bold; - white-space : nowrap; - cursor : pointer; - background-color : #C8AC6E3B; - border : 1px solid #C8AC6E; - border-color : currentColor; - border-radius : 4px; + display: inline-block; + padding: 2px; + margin: 2px; + font-weight: bold; + white-space: nowrap; + cursor: pointer; + background-color: #c8ac6e3b; + border: 1px solid #c8ac6e; + border-color: currentColor; + border-radius: 4px; &::before { - margin-right : 3px; - font-family : 'Font Awesome 6 Free'; - font-size : 12px; + margin-right: 3px; + font-family: 'Font Awesome 6 Free'; + font-size: 12px; } &.type { - color : #008000; - background-color : #0080003B; - &::before { content : '\f0ad'; } + color: #008000; + background-color: #0080003b; + &::before { + content: '\f0ad'; + } } &.group { - color : #000000; - background-color : #5050503B; - &::before { content : '\f500'; } + color: #000000; + background-color: #5050503b; + &::before { + content: '\f500'; + } } &.meta { - color : #000080; - background-color : #0000803B; - &::before { content : '\f05a'; } + color: #000080; + background-color: #0000803b; + &::before { + content: '\f05a'; + } } &.system { - color : #800000; - background-color : #8000003B; - &::before { content : '\f518'; } + color: #800000; + background-color: #8000003b; + &::before { + content: '\f518'; + } } } - &:hover, &:focus-within { - .links { opacity : 1; } + &:nth-child(2n + 1) { + margin-right: 0px; } - &:nth-child(2n + 1) { margin-right : 0px; } .links { - .animate(opacity); - position : absolute; - top : 0px; - right : 0px; - width : 2em; - height : 100%; - text-align : center; - background-color : fade(black, 60%); - opacity : 0; - a, button { + text-align: center; + background-color: fade(black, 60%); + a, + button { .animate(opacity); - display : block; - margin : 8px 0px; - font-size : 1.3em; - color : white; - text-decoration : unset; - opacity : 0.6; - width : 100%; - &:hover { opacity : 1; } - i { cursor : pointer; } + display: block; + margin: 8px 0px; + font-size: 1.3em; + color: white; + text-decoration: unset; + opacity: 0.6; + width: 100%; + &:hover { + opacity: 1; + } + i { + cursor: pointer; + } } } .googleDriveIcon { - padding : 0px; - margin : -5px; - height : 18px; + padding: 0px; + margin: -5px; + height: 18px; } .homebreweryIcon { - position : relative; - padding : 0px; - top : 5px; - left : -7.5px; - height : 18px; + position: relative; + padding: 0px; + top: 5px; + left: -7.5px; + height: 18px; } } + +.grid > .brewItem { + position: relative; + box-sizing: border-box; + display: inline-block; + width: 48%; + min-width:400px; + min-height: 125px; + padding: 5px 15px 2px 6px; + padding-right: 15px; + margin-right: 15px; + margin-bottom: 15px; + overflow: hidden; + vertical-align: top; + background-color: #cab2802e; + background-image: url('https://ik.imagekit.io/5eCleric/background%20note.png'); + background-size:cover; + border: 1px solid #c9ad6a; + border-radius: 5px; + box-shadow: 0px 4px 5px 0px #333333; + break-inside: avoid; + -webkit-column-break-inside: avoid; + page-break-inside: avoid; + isolation:isolate; + .thumbnail { + position: absolute; + top: 0; + right: 0; + z-index: -1; + width: 155px; + height: 100%; + background-repeat: no-repeat; + background-position: right top; + background-size: contain; + opacity: 50%; + -webkit-mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%); + mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%); + } + .text { + min-height: 54px; + h2 { + margin-bottom: 5px; + font-size: 1.3em; + } + } + .info { + position: initial; + bottom: 2px; + + font-size: .9em; + & > span { + margin-right: 12px; + line-height: 1.5em; + + a { + color: inherit; + } + } + } + .brewTags span { + display: inline-block; + padding: 2px; + margin: 2px; + font-weight: bold; + white-space: nowrap; + cursor: pointer; + background-color: #c8ac6e3b; + border: 1px solid #c8ac6e; + border-color: currentColor; + border-radius: 4px; + &::before { + margin-right: 3px; + font-family: 'Font Awesome 6 Free'; + font-size: 12px; + } + &.type { + color: #008000; + background-color: #0080003b; + &::before { + content: '\f0ad'; + } + } + &.group { + color: #000000; + background-color: #5050503b; + &::before { + content: '\f500'; + } + } + &.meta { + color: #000080; + background-color: #0000803b; + &::before { + content: '\f05a'; + } + } + &.system { + color: #800000; + background-color: #8000003b; + &::before { + content: '\f518'; + } + } + } + &:hover, + &:focus-within { + .links { + opacity: 1; + } + } + &:nth-child(2n + 1) { + margin-right: 0px; + } + .links { + .animate(opacity); + position: absolute; + top: 0px; + right: 0px; + width: 2em; + height: 100%; + text-align: center; + background-color: fade(black, 60%); + opacity: 0; + a, + button { + .animate(opacity); + display: block; + margin: 8px 0px; + font-size: 1.3em; + color: white; + text-decoration: unset; + opacity: 0.6; + width: 100%; + &:hover { + opacity: 1; + } + i { + cursor: pointer; + } + } + } + .googleDriveIcon { + padding: 0px; + margin: -5px; + height: 18px; + } + .homebreweryIcon { + position: relative; + padding: 0px; + top: 5px; + left: -7.5px; + height: 18px; + } +} + +.list > .brewItem { + height: 50px; + min-height: unset; + width: 100%; + display: grid; + grid-template-columns: 2fr 2fr 1fr; + align-items: center; + color: rgb(2, 2, 2); + background: #efefef; + overflow: visible; + font-size: 12px; + + .text { + min-height: unset; + width: 100%; + padding-inline: 10px; + height: 100%; + + display: grid; + align-content: center; + + h2 { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-size: 20px; + font-weight: 900; + height:100%; + min-height:1.4em; + align-content: center; + vertical-align: middle; + } + + .description { + display: none; + } + } + + hr { + display: none; + } + + .info { + width: 100%; + display: grid; + grid-template-areas: 'tags authors views pages update storage'; + justify-content: end; + align-content: space-around; + align-items:center; + grid-template-columns: 200px 150px 70px 60px 150px 20px; + br { + display: none; + } + .brewTags { + display: inline-block; + grid-area: tags; + } + [title*='Authors:'] { + display: inline-block; + grid-area: authors; + height: 40px; + overflow: hidden; + width: 150px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + } + [title*='Last'] { + display: inline-block; + grid-area: views; + } + [title*='Page'] { + display: inline-block; + grid-area: pages; + } + [title*='Created'] { + display: inline-block; + grid-area: update; + } + [title*='Storage'] { + display: inline-block; + grid-area: storage; + filter: drop-shadow(0 0 10px white); + } + + .brewTags { + padding-left: 10px; + } + + .brewTags:has(span:nth-of-type(4)) { + position: relative; + overflow: hidden; + display: flex; + flex-wrap: wrap; + + span:nth-of-type(n + 2) { + display: none; + } + + &:hover { + overflow: visible; + position: absolute; + top: 0; + background: #707070; + height: max-content; + z-index: 100; + width: min-content; + padding: 10px; + + span:nth-of-type(n + 4) { + display: block; + } + + &:after { + position: absolute; + top: 48px; + right: 0; + left: 0; + bottom: 0; + content: ''; + display: block; + height: calc(100% - 48px); + background: #707070; + border-inline: 1px solid gold; + border-bottom: 1px solid gold; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + z-index: -1; + } + } + } + } + + .links { + opacity: 1; + background: none; + position: relative; + display: flex; + justify-content: space-evenly; + width: 100%; + align-items: center; + height: 100%; + + > a { + opacity: 0.8; + + &:hover { + opacity: 1; + } + } + + .editLink { + color: @green; + } + .deleteLink { + color: @red; + } + + .shareLink { + color: deepskyblue; + } + + .downloadLink { + color: coral; + } + } +} + +.card > .brewItem { + background-color:grey; + background-image:url('@themes/assets/naturalCritLogoBlack.svg'); + background-size:60%; + background-position:center 20%; + background-repeat:no-repeat; + background-blend-mode: soft-light; + width:400px; + height:500px; + border:1px solid; + margin:10px; + border-radius:10px; + padding:10px; + padding-top:100px; + padding-bottom: 50px; + display:flex; + flex-direction: column; + justify-content: flex-end; + isolation: isolate; + position:relative; + color:white; + + + &::before { + display:block; + content:''; + height:50%; + position:absolute; + bottom:0; + left:0; + right:0; + background-image:linear-gradient(0deg, #777f 0 , #7770 90%); + z-index:-1; + transition: height 0.2s; + } + + &:hover { + &::before { + height:100%; + background-image:linear-gradient(0deg, #777f 0 ,#777f 42%, #7770 55%); + } + .text .description { + height:fit-content; + } + } + + .thumbnail { + position: absolute; + top: 0; + left:0; + z-index: -2; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-position: right top; + background-size: cover; + } + + .text { + filter:drop-shadow(0 1px 4px black); + + h2 { + font-weight:900; + font-size:1.2em; + } + + .description { + height:0; + overflow:hidden; + transition:height .2s; + } + } + + .info { + filter:drop-shadow(0 1px 2px black); + height: 130px; + display:grid; + grid-template-areas: + "tags tags tags" + "author author author" + "pages views views" + "update update storage"; + + .brewTags { + color:black; + grid-area: tags; + + i { + color:white; + } + > span { + background:hsl( from currentColor h 20% 80%); + } + } + .brewAuthors { + grid-area: author; + } + .brewPages { + grid-area: pages; + } + .lastViewed { + grid-area: views; + } + .lastUpdated { + grid-area: update; + } + .storage { + grid-area:storage; + } + + } + + .links { + position:absolute; + bottom:0; + left:0; + right:0; + height:40px; + display:flex; + } + +} diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index 0119a40c2..92829f6e4 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -19,6 +19,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI const [sortType, setSortType] = useState(query?.sort || null); const [sortDir, setSortDir] = useState(query?.dir || null); const [groupVisibility, setGroupVisibility] = useState({}); + const [layoutMode, setLayoutMode] = useState('grid'); const groupVisibilityRef = useRef(groupVisibility); const sortTypeRef = useRef(sortType); @@ -259,31 +260,61 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI const sortedBrewGroup = sortedBrewCollection[idx]; const visible = groupVisibility[brewGroup.class]; - return ( -
-

{ - 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'); + return; + }; + + const renderLayoutModeOptions = ()=>{ + return ( +
+
+ +
+
+ +
+
+ +
+
+ ); + }; + return (
- - {navItems} {renderSortOptions()} {renderTagsOptions()} + {renderLayoutModeOptions()}
-
{renderBrewCollection(brewCollection)}
+
{renderBrewCollection(brewCollection)}
); diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index e368dfac7..1640c0100 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -1,15 +1,16 @@ +@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); .noColumns() { - column-count : auto; - column-fill : auto; - column-gap : normal; + -webkit-column-width : auto; + -moz-column-width : auto; column-width : auto; -webkit-column-count : auto; -moz-column-count : auto; - -webkit-column-width : auto; - -moz-column-width : auto; + column-count : auto; + column-fill : auto; -webkit-column-gap : normal; -moz-column-gap : normal; + column-gap : normal; height : auto; min-height : 279.4mm; margin : 20px auto; @@ -18,28 +19,48 @@ .listPage { .content { z-index : 1; - .page { - .noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer - &::after { display : none; } - .noBrews { - margin : 10px 0px; - font-size : 1.3em; - font-style : italic; - } - .brewCollection { - h1:hover { cursor : pointer; } - .active::before, .inactive::before { + padding : 100px 250px; + .noBrews { + margin : 10px 0px; + font-size : 1.3em; + font-style : italic; + } + .brewCollection { + h1 { + margin-bottom : 20px; + font-size : 25px; + color : #DDDDDD; + + &.active::before, &.inactive::before { padding-right : 0.5em; font-family : 'Font Awesome 6 Free'; font-size : 0.6cm; font-weight : 900; } - .active { color : var(--HB_Color_HeaderText); } - .active::before { content : '\f107'; } - .inactive { color : #707070; } - .inactive::before { content : '\f105'; } + &.active { color : white; } + &.active::before { content : '\f107'; } + &.inactive::before { content : '\f105'; } + + } + h1:hover { cursor : pointer; } + + .brewGroup { + + + &.list { + display : flex; + flex-direction : column; + gap : 2px; + } + &.card { + display : flex; + flex-wrap : wrap; + + h1 { position : absolute; } + } } } + } .sort-container { position : sticky; @@ -161,4 +182,24 @@ } } } + .layout-container { + position : sticky; + top : 0; + left : 0; + z-index : 1; + display : flex; + flex-wrap : wrap; + row-gap : 5px; + column-gap : 15px; + align-items : baseline; + justify-content : center; + width : 100%; + height : 30px; + font-family : 'Open Sans', sans-serif; + color : white; + text-align : center; + background-color : #555555; + border-top : 1px solid #666666; + border-bottom : 1px solid #666666; + } } From 372753735cb03ba5cb9b15912c53a8a159243b09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 5 Sep 2026 19:22:20 +0200 Subject: [PATCH 02/34] updating styles --- .../homebrew/pages/basePages/listPage/brewItem/brewItem.less | 4 ++-- client/homebrew/pages/basePages/listPage/listPage.less | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 564f70662..627774d23 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -453,8 +453,8 @@ background-position:center 20%; background-repeat:no-repeat; background-blend-mode: soft-light; - width:400px; - height:500px; + width:300px; + height:400px; border:1px solid; margin:10px; border-radius:10px; diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index 1640c0100..fe323abed 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -55,6 +55,7 @@ &.card { display : flex; flex-wrap : wrap; + column-gap:50px; h1 { position : absolute; } } From 52aa1b99f2bbc8ff1625d5a9738358ae9de16d24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 5 Sep 2026 19:25:52 +0200 Subject: [PATCH 03/34] gap change --- client/homebrew/pages/basePages/listPage/brewItem/brewItem.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 627774d23..7f79b03c4 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -231,7 +231,7 @@ opacity: 1; } } - &:nth-child(2n + 1) { + &:nth-child(2n) { margin-right: 0px; } .links { From b2941881a7b130f35662df03ee74795add0b6e50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 6 Sep 2026 11:17:18 +0200 Subject: [PATCH 04/34] fixed spacing on grid --- .../pages/basePages/listPage/brewItem/brewItem.jsx | 4 ++-- .../pages/basePages/listPage/brewItem/brewItem.less | 8 +++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx index 264bbf56a..f92653533 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx @@ -133,7 +133,7 @@ const BrewItem = ({ })}
) : null} - +
{' '} {brew.authors?.map((author, index)=>( @@ -145,7 +145,7 @@ const BrewItem = ({ {index < brew.authors.length - 1 && ', '} ))} - +
{brew.pageCount && ( diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 7f79b03c4..2c46e8b40 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -175,9 +175,11 @@ margin-right: 12px; line-height: 1.5em; - a { - color: inherit; - } + + } + + a { + color: inherit; } } .brewTags span { From 4fdb2a17a570bacefbb9496ca6769b32de22e775 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 6 Sep 2026 11:20:13 +0200 Subject: [PATCH 05/34] reduce text size in card --- .../basePages/listPage/brewItem/brewItem.less | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 2c46e8b40..758fa2f48 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -33,10 +33,9 @@ font-size: 1.2em; & > span { line-height: 1.5em; - - a { - color: inherit; - } + } + a { + color: inherit; } } .brewTags span { @@ -174,12 +173,6 @@ & > span { margin-right: 12px; line-height: 1.5em; - - - } - - a { - color: inherit; } } .brewTags span { @@ -469,6 +462,7 @@ isolation: isolate; position:relative; color:white; + font-size: 13px; &::before { From 56401904b2b518a655eefde148cb573af3127207 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 6 Sep 2026 17:37:32 +0200 Subject: [PATCH 06/34] small changes to layout modes --- .../pages/basePages/listPage/listPage.jsx | 6 +++--- .../pages/basePages/listPage/listPage.less | 15 ++++++++++++++- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index 4af1f6ded..19b8a3779 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -286,20 +286,20 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index fe323abed..170ae6f3e 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -1,4 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); +@import '@sharedStyles/colors.less'; .noColumns() { -webkit-column-width : auto; @@ -192,7 +193,7 @@ flex-wrap : wrap; row-gap : 5px; column-gap : 15px; - align-items : baseline; + align-items : center; justify-content : center; width : 100%; height : 30px; @@ -202,5 +203,17 @@ background-color : #555555; border-top : 1px solid #666666; border-bottom : 1px solid #666666; + + input[type="radio"] { + display:none; + } + + i { + transition:color 0.2s; + } + + input:checked + i { + color:@blue; + } } } From dcad32bd095f467daf4e627076a075c3359648bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 6 Sep 2026 21:16:31 +0200 Subject: [PATCH 07/34] add localstorage handling --- client/homebrew/pages/basePages/listPage/listPage.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index 19b8a3779..893198281 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,7 +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('grid'); + const [layoutMode, setLayoutMode] = useState(null); const groupVisibilityRef = useRef(groupVisibility); const sortTypeRef = useRef(sortType); @@ -50,9 +52,12 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI return visibility; }, {}); + const newLayoutMode = layoutMode ?? (localStorage.getItem(USERPAGE_LAYOUT_MODE) || DEFAULT_LAYOUT_MODE); + setGroupVisibility(namedBrewCollection); setSortType(newSortType); setSortDir(newSortDir); + setLayoutMode(newLayoutMode); return ()=>{ window.onbeforeunload = null; @@ -65,6 +70,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI }); localStorage.setItem(USERPAGE_SORT_TYPE, sortTypeRef.current); localStorage.setItem(USERPAGE_SORT_DIR, sortDirRef.current); + localStorage.setItem(USERPAGE_LAYOUT_MODE, layoutMode); }; const renderBrews = (brews)=>{ From cb4a10495402ac61fb9e7e40c59c8836e5be3231 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Wed, 9 Sep 2026 13:56:26 +0200 Subject: [PATCH 08/34] responsiveness --- .../basePages/listPage/brewItem/brewItem.jsx | 8 +- .../basePages/listPage/brewItem/brewItem.less | 94 +++++++++++++++---- .../pages/basePages/listPage/listPage.jsx | 6 +- .../pages/basePages/listPage/listPage.less | 15 ++- 4 files changed, 97 insertions(+), 26 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx index f92653533..d97fa534f 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; @@ -117,7 +119,7 @@ const BrewItem = ({ const dateFormatString = 'YYYY-MM-DD HH:mm:ss'; return ( -
+
setDetailsOpen(!detailsOpen)} > {brew.thumbnail &&
}

{brew.title}

@@ -160,7 +162,7 @@ const BrewItem = ({ title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)} Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`} > - + {renderStorageIcon()}
diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 758fa2f48..97789b393 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -125,13 +125,10 @@ position: relative; box-sizing: border-box; display: inline-block; - width: 48%; - min-width:400px; + width: clamp(400px, 48%, 600px); min-height: 125px; padding: 5px 15px 2px 6px; padding-right: 15px; - margin-right: 15px; - margin-bottom: 15px; overflow: hidden; vertical-align: top; background-color: #cab2802e; @@ -226,9 +223,6 @@ opacity: 1; } } - &:nth-child(2n) { - margin-right: 0px; - } .links { .animate(opacity); position: absolute; @@ -276,7 +270,7 @@ min-height: unset; width: 100%; display: grid; - grid-template-columns: 2fr 2fr 1fr; + grid-template-columns: 2fr 3fr 1fr; align-items: center; color: rgb(2, 2, 2); background: #efefef; @@ -309,29 +303,26 @@ } } - hr { - display: none; - } - .info { - width: 100%; + width: clamp(400px, 100%, 650px); display: grid; grid-template-areas: 'tags authors views pages update storage'; justify-content: end; align-content: space-around; align-items:center; - grid-template-columns: 200px 150px 70px 60px 150px 20px; + grid-template-columns: 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px; br { display: none; } .brewTags { display: inline-block; grid-area: tags; + min-width:100px; } - [title*='Authors:'] { + .brewAuthors { display: inline-block; grid-area: authors; - height: 40px; + height: fit-content; overflow: hidden; width: 150px; overflow: hidden; @@ -339,14 +330,21 @@ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; + + &:has(a:only-of-type) { + width:fit-content; + } } - [title*='Last'] { + + .lastViewed { display: inline-block; grid-area: views; + min-width:50px; } - [title*='Page'] { + .brewPages { display: inline-block; grid-area: pages; + min-width:40px; } [title*='Created'] { display: inline-block; @@ -564,3 +562,63 @@ } } + + +@media screen and (max-width: 1400px) { + .brewCollection { + background:@yellow; + } + + .brewCollection .brewGroup { + &.list { + .brewItem:not(.detailsOpen) { + grid-template-columns: 3fr 2.5fr 1fr; + .info { + width: clamp(200px, 100%, 650px); + grid-template-columns: 2fr 1fr 20px; + grid-template-areas: 'tags update storage'; + } + + .brewPages, .lastViewed, .brewAuthors { + display:none; + } + } + .brewItem { + transition:height 0.2s; + } + .detailsOpen { + height:70px; + } + } + } +} + +@media screen and (max-width: 1200px) { + .brewCollection { + background:@yellow; + } + + .brewCollection .brewGroup { + &.list { + .brewItem:not(.detailsOpen) { + grid-template-columns: 3fr 2fr 1fr; + .info { + width: clamp(200px, 100%, 650px); + grid-template-columns: 1fr 20px; + grid-template-areas: 'tags storage'; + } + + .brewPages, .lastViewed, .brewAuthors, .lastUpdated { + display:none; + } + } + .detailsOpen { + grid-template-columns: 1fr 2fr; + .links{ + display:none; + } + } + } + } +} + diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index 893198281..c06e0dca3 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -21,7 +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(null); + const [layoutMode, setLayoutMode] = useState(DEFAULT_LAYOUT_MODE); const groupVisibilityRef = useRef(groupVisibility); const sortTypeRef = useRef(sortType); @@ -52,7 +52,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI return visibility; }, {}); - const newLayoutMode = layoutMode ?? (localStorage.getItem(USERPAGE_LAYOUT_MODE) || DEFAULT_LAYOUT_MODE); + const newLayoutMode = localStorage.getItem(USERPAGE_LAYOUT_MODE) || DEFAULT_LAYOUT_MODE; setGroupVisibility(namedBrewCollection); setSortType(newSortType); @@ -70,7 +70,6 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI }); localStorage.setItem(USERPAGE_SORT_TYPE, sortTypeRef.current); localStorage.setItem(USERPAGE_SORT_DIR, sortDirRef.current); - localStorage.setItem(USERPAGE_LAYOUT_MODE, layoutMode); }; const renderBrews = (brews)=>{ @@ -284,6 +283,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI const handleLayoutChange = (e, mode)=>{ setLayoutMode(e.target.checked ? mode : 'grid'); + localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : 'grid'); return; }; diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index 170ae6f3e..b7e241fa7 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -20,13 +20,15 @@ .listPage { .content { z-index : 1; - padding : 100px 250px; + padding : clamp(50px, 5vh, 200px) 10vw; .noBrews { margin : 10px 0px; font-size : 1.3em; font-style : italic; } .brewCollection { + width:fit-content; + h1 { margin-bottom : 20px; font-size : 25px; @@ -46,6 +48,14 @@ h1:hover { cursor : pointer; } .brewGroup { + + &.grid { + display:flex; + flex-wrap: wrap; + justify-content: center; + gap:20px; + min-width:400px; + } &.list { @@ -56,7 +66,8 @@ &.card { display : flex; flex-wrap : wrap; - column-gap:50px; + column-gap:40px; + justify-content: center; h1 { position : absolute; } } From 0e72c3ca84ef96c495b75b36354f4788dd1ff7c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Wed, 9 Sep 2026 20:00:31 +0200 Subject: [PATCH 09/34] seems to work across dimensions --- .../basePages/listPage/brewItem/brewItem.less | 286 ++++++++++++------ .../pages/basePages/listPage/listPage.less | 4 +- server.js | 2 +- 3 files changed, 193 insertions(+), 99 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 97789b393..a8b2c4f59 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -125,7 +125,7 @@ position: relative; box-sizing: border-box; display: inline-block; - width: clamp(400px, 48%, 600px); + width: clamp(300px, 48%, 600px); min-height: 125px; padding: 5px 15px 2px 6px; padding-right: 15px; @@ -133,14 +133,14 @@ vertical-align: top; background-color: #cab2802e; background-image: url('https://ik.imagekit.io/5eCleric/background%20note.png'); - background-size:cover; + background-size: cover; border: 1px solid #c9ad6a; border-radius: 5px; box-shadow: 0px 4px 5px 0px #333333; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; - isolation:isolate; + isolation: isolate; .thumbnail { position: absolute; top: 0; @@ -165,8 +165,8 @@ .info { position: initial; bottom: 2px; - - font-size: .9em; + + font-size: 0.9em; & > span { margin-right: 12px; line-height: 1.5em; @@ -292,8 +292,8 @@ white-space: nowrap; font-size: 20px; font-weight: 900; - height:100%; - min-height:1.4em; + height: 100%; + min-height: 1.4em; align-content: center; vertical-align: middle; } @@ -309,21 +309,20 @@ grid-template-areas: 'tags authors views pages update storage'; justify-content: end; align-content: space-around; - align-items:center; - grid-template-columns: 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px; + align-items: center; + grid-template-columns: 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px; br { display: none; } .brewTags { display: inline-block; grid-area: tags; - min-width:100px; + min-width: 100px; } .brewAuthors { display: inline-block; grid-area: authors; height: fit-content; - overflow: hidden; width: 150px; overflow: hidden; text-overflow: ellipsis; @@ -332,19 +331,19 @@ -webkit-box-orient: vertical; &:has(a:only-of-type) { - width:fit-content; + width: fit-content; } } .lastViewed { display: inline-block; grid-area: views; - min-width:50px; + min-width: 50px; } .brewPages { display: inline-block; grid-area: pages; - min-width:40px; + min-width: 40px; } [title*='Created'] { display: inline-block; @@ -356,10 +355,6 @@ filter: drop-shadow(0 0 10px white); } - .brewTags { - padding-left: 10px; - } - .brewTags:has(span:nth-of-type(4)) { position: relative; overflow: hidden; @@ -440,56 +435,55 @@ } .card > .brewItem { - background-color:grey; - background-image:url('@themes/assets/naturalCritLogoBlack.svg'); - background-size:60%; - background-position:center 20%; - background-repeat:no-repeat; + background-color: grey; + background-image: url('@themes/assets/naturalCritLogoBlack.svg'); + background-size: 60%; + background-position: center 20%; + background-repeat: no-repeat; background-blend-mode: soft-light; - width:300px; - height:400px; - border:1px solid; - margin:10px; - border-radius:10px; - padding:10px; - padding-top:100px; + width: 300px; + height: 400px; + border: 1px solid; + margin: 10px; + border-radius: 10px; + padding: 10px; + padding-top: 100px; padding-bottom: 50px; - display:flex; + display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; - position:relative; - color:white; + position: relative; + color: white; font-size: 13px; - &::before { - display:block; - content:''; - height:50%; - position:absolute; - bottom:0; - left:0; - right:0; - background-image:linear-gradient(0deg, #777f 0 , #7770 90%); - z-index:-1; + display: block; + content: ''; + height: 50%; + position: absolute; + bottom: 0; + left: 0; + right: 0; + background-image: linear-gradient(0deg, #777f 0, #7770 90%); + z-index: -1; transition: height 0.2s; } &:hover { &::before { - height:100%; - background-image:linear-gradient(0deg, #777f 0 ,#777f 42%, #7770 55%); + height: 100%; + background-image: linear-gradient(0deg, #777f 0, #777f 42%, #7770 55%); } .text .description { - height:fit-content; + height: fit-content; } } .thumbnail { position: absolute; top: 0; - left:0; + left: 0; z-index: -2; width: 100%; height: 100%; @@ -499,43 +493,43 @@ } .text { - filter:drop-shadow(0 1px 4px black); + filter: drop-shadow(0 1px 4px black); h2 { - font-weight:900; - font-size:1.2em; + font-weight: 900; + font-size: 1.2em; } .description { - height:0; - overflow:hidden; - transition:height .2s; + height: 0; + overflow: hidden; + transition: height 0.2s; } } .info { - filter:drop-shadow(0 1px 2px black); + filter: drop-shadow(0 1px 2px black); height: 130px; - display:grid; + display: grid; grid-template-areas: - "tags tags tags" - "author author author" - "pages views views" - "update update storage"; + 'tags tags tags' + 'authors authors authors' + 'pages views views' + 'update update storage'; .brewTags { - color:black; + color: black; grid-area: tags; - + i { - color:white; + color: white; } > span { - background:hsl( from currentColor h 20% 80%); + background: hsl(from currentColor h 20% 80%); } } .brewAuthors { - grid-area: author; + grid-area: authors; } .brewPages { grid-area: pages; @@ -547,57 +541,48 @@ grid-area: update; } .storage { - grid-area:storage; + grid-area: storage; } - } .links { - position:absolute; - bottom:0; - left:0; - right:0; - height:40px; - display:flex; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 40px; + display: flex; } - } - -@media screen and (max-width: 1400px) { - .brewCollection { - background:@yellow; - } - +@media screen and (max-width: 1400px) { .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { grid-template-columns: 3fr 2.5fr 1fr; .info { width: clamp(200px, 100%, 650px); - grid-template-columns: 2fr 1fr 20px; + grid-template-columns: 2fr 1fr 20px; grid-template-areas: 'tags update storage'; } - .brewPages, .lastViewed, .brewAuthors { - display:none; - } + .brewPages, + .lastViewed, + .brewAuthors { + display: none; + } } .brewItem { - transition:height 0.2s; + transition: height 0.2s; } .detailsOpen { - height:70px; + height: 70px; } } } } -@media screen and (max-width: 1200px) { - .brewCollection { - background:@yellow; - } - +@media screen and (max-width: 1200px) { .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { @@ -608,17 +593,126 @@ grid-template-areas: 'tags storage'; } - .brewPages, .lastViewed, .brewAuthors, .lastUpdated { - display:none; - } + .brewPages, + .lastViewed, + .brewAuthors, + .lastUpdated { + display: none; + } } .detailsOpen { - grid-template-columns: 1fr 2fr; - .links{ - display:none; + grid-template-columns: 3fr 2fr 1fr; + + .info { + width: clamp(200px, 100%, 650px); + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-template-areas: + 'tags views pages' + 'authors update storage'; + } + .lastUpdated { + width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-break: break-all; } } } } } +@media screen and (max-width: 800px) { + .brewCollection .brewGroup { + &.list { + .brewItem:not(.detailsOpen) { + .info { + width: clamp(200px, 100%, 650px); + grid-template-columns: 1fr; + grid-template-areas: 'tags'; + } + + .brewPages, + .lastViewed, + .brewAuthors, + .lastUpdated, + .storage { + display: none; + } + } + + .brewItem { + transition: height 0.2s; + } + .detailsOpen { + height: 100px; + padding: 5px; + display: grid; + grid-template-columns: 3fr 3fr 30px; + + .text { + height: 100%; + padding: 0; + + h2 { + height: fit-content; + white-space: wrap; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + } + } + + .info { + height: 100%; + width: 100%; + display: grid; + grid-template-columns: 2fr 1fr 1fr 20px; + grid-template-areas: + 'tags pages views views' + 'authors update update storage'; + } + .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 1fr; + .info { + display: none; + } + } + .detailsOpen { + grid-template-rows: 1fr 2fr; + .info { + display: grid; + + .lastUpdated { + width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-break: break-all; + } + } + } + } + } +} diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index b7e241fa7..fa4a92163 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -20,7 +20,7 @@ .listPage { .content { z-index : 1; - padding : clamp(50px, 5vh, 200px) 10vw; + padding : clamp(20px, 5vh, 200px) 10vw; .noBrews { margin : 10px 0px; font-size : 1.3em; @@ -54,7 +54,7 @@ flex-wrap: wrap; justify-content: center; gap:20px; - min-width:400px; + min-width:200px; } diff --git a/server.js b/server.js index a9da7c2ca..e53d031bd 100644 --- a/server.js +++ b/server.js @@ -23,7 +23,7 @@ async function start() { const app = await createApp(vite); const PORT = process.env.PORT || config.get('web_port') || 3000; - app.listen(PORT, ()=>{ + app.listen(PORT, '0.0.0.0', ()=>{ const reset = '\x1b[0m'; // Reset to default style const bright = '\x1b[1m'; // Bright (bold) style const cyan = '\x1b[36m'; // Cyan color From c4a41562f04a89bd6fb84c6ce62be66ce6f080d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Wed, 9 Sep 2026 20:00:54 +0200 Subject: [PATCH 10/34] undo server changes --- server.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server.js b/server.js index e53d031bd..a9da7c2ca 100644 --- a/server.js +++ b/server.js @@ -23,7 +23,7 @@ async function start() { const app = await createApp(vite); const PORT = process.env.PORT || config.get('web_port') || 3000; - app.listen(PORT, '0.0.0.0', ()=>{ + app.listen(PORT, ()=>{ const reset = '\x1b[0m'; // Reset to default style const bright = '\x1b[1m'; // Bright (bold) style const cyan = '\x1b[36m'; // Cyan color From 4e5480b5dd41fc28eef7101fd3ac8c38904ab48c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Wed, 9 Sep 2026 20:28:40 +0200 Subject: [PATCH 11/34] responsive filter bar --- .../pages/basePages/listPage/listPage.jsx | 25 +- .../pages/basePages/listPage/listPage.less | 390 +++++++++--------- 2 files changed, 225 insertions(+), 190 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index c06e0dca3..e17f99d95 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -181,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 ( @@ -191,7 +192,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI updateUrl(filterString, sortType, sortDir, tag); }}> {matches[2]} - + ); })}
@@ -207,7 +208,6 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI {renderSortOption('Updated Date', 'updated')} {renderSortOption('Views', 'views')} {/* {renderSortOption('Latest', 'latest')} */} - {renderFilterOption()}
); }; @@ -290,6 +290,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI const renderLayoutModeOptions = ()=>{ return (
+ View:
-
+
); }; + const renderNav = () =>{ + + return ( +
+ {renderSortOptions()} + {renderFilterOption()} + {renderTagsOptions()} + {renderLayoutModeOptions()} +
+ ); + + } + return (
{navItems} - {renderSortOptions()} - {renderTagsOptions()} - {renderLayoutModeOptions()} + + {renderNav()}
{renderBrewCollection(brewCollection)}
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index fa4a92163..35ab5fa79 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -2,229 +2,251 @@ @import '@sharedStyles/colors.less'; .noColumns() { - -webkit-column-width : auto; - -moz-column-width : auto; - column-width : auto; - -webkit-column-count : auto; - -moz-column-count : auto; - column-count : auto; - column-fill : auto; - -webkit-column-gap : normal; - -moz-column-gap : normal; - column-gap : normal; - height : auto; - min-height : 279.4mm; - margin : 20px auto; - contain : unset; + -webkit-column-width: auto; + -moz-column-width: auto; + column-width: auto; + -webkit-column-count: auto; + -moz-column-count: auto; + column-count: auto; + column-fill: auto; + -webkit-column-gap: normal; + -moz-column-gap: normal; + column-gap: normal; + height: auto; + min-height: 279.4mm; + margin: 20px auto; + contain: unset; } .listPage { .content { - z-index : 1; - padding : clamp(20px, 5vh, 200px) 10vw; + z-index: 1; + padding: clamp(20px, 5vh, 200px) 10vw; .noBrews { - margin : 10px 0px; - font-size : 1.3em; - font-style : italic; + margin: 10px 0px; + font-size: 1.3em; + font-style: italic; } .brewCollection { - width:fit-content; + width: fit-content; h1 { - margin-bottom : 20px; - font-size : 25px; - color : #DDDDDD; + 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::before, + &.inactive::before { + padding-right: 0.5em; + font-family: 'Font Awesome 6 Free'; + font-size: 0.6cm; + font-weight: 900; + } + &.active { + color: white; + } + &.active::before { + content: '\f107'; + } + &.inactive::before { + content: '\f105'; } - &.active { color : white; } - &.active::before { content : '\f107'; } - &.inactive::before { content : '\f105'; } - } - h1:hover { cursor : pointer; } - - .brewGroup { + h1:hover { + cursor: pointer; + } + .brewGroup { &.grid { - display:flex; + display: flex; flex-wrap: wrap; justify-content: center; - gap:20px; - min-width:200px; + gap: 20px; + min-width: 200px; } - &.list { - display : flex; - flex-direction : column; - gap : 2px; + display: flex; + flex-direction: column; + gap: 2px; } &.card { - display : flex; - flex-wrap : wrap; - column-gap:40px; + display: flex; + flex-wrap: wrap; + column-gap: 40px; justify-content: center; - - h1 { position : absolute; } + + h1 { + position: absolute; + } } } } - } - .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; + width: 100%; + height: fit-content; + display: flex; + flex-wrap: wrap; + align-items:center; + justify-content: center; + background: #555; + column-gap: 20px; + row-gap: 10px; + border-top: 1px solid #666; + border-bottom: 1px solid #666; + font-family: 'Open Sans', sans-serif; + color: white; + row-rule: 1px solid #666; + + > div { + width: fit-content; + padding-inline: 10px; + height:30px; } - .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; - 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; - 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'; } + display: grid; + place-items: center; + font-size: 11px; + background-color: transparent !important; + i { + padding-right: 5px; } } - } - .layout-container { - position : sticky; - top : 0; - left : 0; - z-index : 1; - display : flex; - flex-wrap : wrap; - row-gap : 5px; - column-gap : 15px; - align-items : center; - 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; - - 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; + 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; - i { - transition:color 0.2s; - } + input[type='radio'] { + display: none; + } - input:checked + i { - color:@blue; + i { + transition: color 0.2s; + } + + input:checked + i { + color: @blue; + } } } } From 43ba216bfa52361533a5122a1729d6a8c9214b86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Wed, 9 Sep 2026 20:56:47 +0200 Subject: [PATCH 12/34] better use of space --- .../basePages/listPage/brewItem/brewItem.less | 867 ++++++++---------- .../pages/basePages/listPage/listPage.less | 326 ++++--- 2 files changed, 546 insertions(+), 647 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index a8b2c4f59..2f05dae78 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -3,713 +3,626 @@ @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); .brewItem { - position: relative; - box-sizing: border-box; - display: inline-block; - overflow: hidden; - break-inside: avoid; - -webkit-column-break-inside: avoid; - page-break-inside: avoid; + position : relative; + box-sizing : border-box; + display : inline-block; + overflow : hidden; + break-inside : avoid; + -webkit-column-break-inside : avoid; + break-inside : avoid; .thumbnail { - position: absolute; - top: 0; - right: 0; - z-index: -1; - width: 150px; - height: 100%; - background-repeat: no-repeat; - background-position: right top; - background-size: contain; + position : absolute; + top : 0; + right : 0; + z-index : -1; + width : 150px; + height : 100%; + background-repeat : no-repeat; + background-position : right top; + background-size : contain; } .text { h4 { - margin-bottom: 5px; - font-size: 2.2em; + margin-bottom : 5px; + font-size : 2.2em; } } .info { - position: initial; - bottom: 2px; - font-size: 1.2em; - & > span { - line-height: 1.5em; - } - a { - color: inherit; - } + position : initial; + bottom : 2px; + font-size : 1.2em; + & > span { line-height : 1.5em; } + a { color : inherit; } } .brewTags span { - display: inline-block; - padding: 2px; - margin: 2px; - font-weight: bold; - white-space: nowrap; - cursor: pointer; - background-color: #c8ac6e3b; - border: 1px solid #c8ac6e; - border-color: currentColor; - border-radius: 4px; + display : inline-block; + padding : 2px; + margin : 2px; + font-weight : bold; + white-space : nowrap; + cursor : pointer; + background-color : #C8AC6E3B; + border : 1px solid #C8AC6E; + border-color : currentColor; + border-radius : 4px; &::before { - margin-right: 3px; - font-family: 'Font Awesome 6 Free'; - font-size: 12px; + margin-right : 3px; + font-family : 'Font Awesome 6 Free'; + font-size : 12px; } &.type { - color: #008000; - background-color: #0080003b; - &::before { - content: '\f0ad'; - } + color : #008000; + background-color : #0080003B; + &::before { content : '\f0ad'; } } &.group { - color: #000000; - background-color: #5050503b; - &::before { - content: '\f500'; - } + color : #000000; + background-color : #5050503B; + &::before { content : '\f500'; } } &.meta { - color: #000080; - background-color: #0000803b; - &::before { - content: '\f05a'; - } + color : #000080; + background-color : #0000803B; + &::before { content : '\f05a'; } } &.system { - color: #800000; - background-color: #8000003b; - &::before { - content: '\f518'; - } + color : #800000; + background-color : #8000003B; + &::before { content : '\f518'; } } } - &:nth-child(2n + 1) { - margin-right: 0px; - } + &:nth-child(2n + 1) { margin-right : 0px; } .links { - text-align: center; - background-color: fade(black, 60%); + text-align : center; + background-color : fade(black, 60%); a, button { .animate(opacity); - display: block; - margin: 8px 0px; - font-size: 1.3em; - color: white; - text-decoration: unset; - opacity: 0.6; - width: 100%; - &:hover { - opacity: 1; - } - i { - cursor: pointer; - } + display : block; + width : 100%; + margin : 8px 0px; + font-size : 1.3em; + color : white; + text-decoration : unset; + opacity : 0.6; + &:hover { opacity : 1; } + i { cursor : pointer; } } } .googleDriveIcon { - padding: 0px; - margin: -5px; - height: 18px; + height : 18px; + padding : 0px; + margin : -5px; } .homebreweryIcon { - position: relative; - padding: 0px; - top: 5px; - left: -7.5px; - height: 18px; + position : relative; + top : 5px; + left : -7.5px; + height : 18px; + padding : 0px; } } .grid > .brewItem { - position: relative; - box-sizing: border-box; - display: inline-block; - width: clamp(300px, 48%, 600px); - min-height: 125px; - padding: 5px 15px 2px 6px; - padding-right: 15px; - overflow: hidden; - vertical-align: top; - background-color: #cab2802e; - background-image: url('https://ik.imagekit.io/5eCleric/background%20note.png'); - background-size: cover; - border: 1px solid #c9ad6a; - border-radius: 5px; - box-shadow: 0px 4px 5px 0px #333333; - break-inside: avoid; - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - isolation: isolate; + position : relative; + box-sizing : border-box; + display : inline-block; + width : clamp(300px, 48%, 600px); + min-height : 125px; + padding : 5px 15px 2px 6px; + padding-right : 15px; + overflow : hidden; + vertical-align : top; + background-color : #CAB2802E; + background-image : url('https://ik.imagekit.io/5eCleric/background%20note.png'); + background-size : cover; + border : 1px solid #C9AD6A; + border-radius : 5px; + box-shadow : 0px 4px 5px 0px #333333; + isolation : isolate; + break-inside : avoid; + -webkit-column-break-inside : avoid; + break-inside : avoid; .thumbnail { - position: absolute; - top: 0; - right: 0; - z-index: -1; - width: 155px; - height: 100%; - background-repeat: no-repeat; - background-position: right top; - background-size: contain; - opacity: 50%; - -webkit-mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%); - mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%); + position : absolute; + top : 0; + right : 0; + z-index : -1; + width : 155px; + height : 100%; + background-repeat : no-repeat; + background-position : right top; + background-size : contain; + opacity : 50%; + -webkit-mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%); + mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%); } .text { - min-height: 54px; + min-height : 54px; h2 { - margin-bottom: 5px; - font-size: 1.3em; + margin-bottom : 5px; + font-size : 1.3em; } } .info { - position: initial; - bottom: 2px; + position : initial; + bottom : 2px; - font-size: 0.9em; + font-size : 0.9em; & > span { - margin-right: 12px; - line-height: 1.5em; + margin-right : 12px; + line-height : 1.5em; } } .brewTags span { - display: inline-block; - padding: 2px; - margin: 2px; - font-weight: bold; - white-space: nowrap; - cursor: pointer; - background-color: #c8ac6e3b; - border: 1px solid #c8ac6e; - border-color: currentColor; - border-radius: 4px; + display : inline-block; + padding : 2px; + margin : 2px; + font-weight : bold; + white-space : nowrap; + cursor : pointer; + background-color : #C8AC6E3B; + border : 1px solid #C8AC6E; + border-color : currentColor; + border-radius : 4px; &::before { - margin-right: 3px; - font-family: 'Font Awesome 6 Free'; - font-size: 12px; + margin-right : 3px; + font-family : 'Font Awesome 6 Free'; + font-size : 12px; } &.type { - color: #008000; - background-color: #0080003b; - &::before { - content: '\f0ad'; - } + color : #008000; + background-color : #0080003B; + &::before { content : '\f0ad'; } } &.group { - color: #000000; - background-color: #5050503b; - &::before { - content: '\f500'; - } + color : #000000; + background-color : #5050503B; + &::before { content : '\f500'; } } &.meta { - color: #000080; - background-color: #0000803b; - &::before { - content: '\f05a'; - } + color : #000080; + background-color : #0000803B; + &::before { content : '\f05a'; } } &.system { - color: #800000; - background-color: #8000003b; - &::before { - content: '\f518'; - } + color : #800000; + background-color : #8000003B; + &::before { content : '\f518'; } } } &:hover, &:focus-within { - .links { - opacity: 1; - } + .links { opacity : 1; } } .links { .animate(opacity); - position: absolute; - top: 0px; - right: 0px; - width: 2em; - height: 100%; - text-align: center; - background-color: fade(black, 60%); - opacity: 0; + position : absolute; + top : 0px; + right : 0px; + width : 2em; + height : 100%; + text-align : center; + background-color : fade(black, 60%); + opacity : 0; a, button { .animate(opacity); - display: block; - margin: 8px 0px; - font-size: 1.3em; - color: white; - text-decoration: unset; - opacity: 0.6; - width: 100%; - &:hover { - opacity: 1; - } - i { - cursor: pointer; - } + 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 { - padding: 0px; - margin: -5px; - height: 18px; + height : 18px; + padding : 0px; + margin : -5px; } .homebreweryIcon { - position: relative; - padding: 0px; - top: 5px; - left: -7.5px; - height: 18px; + position : relative; + top : 5px; + left : -7.5px; + height : 18px; + padding : 0px; } } .list > .brewItem { - height: 50px; - min-height: unset; - width: 100%; - display: grid; - grid-template-columns: 2fr 3fr 1fr; - align-items: center; - color: rgb(2, 2, 2); - background: #efefef; - overflow: visible; - font-size: 12px; + display : grid; + grid-template-columns : 2fr 3fr 1fr; + align-items : center; + width : 100%; + height : 50px; + min-height : unset; + overflow : visible; + font-size : 12px; + color : rgb(2, 2, 2); + background : #EFEFEF; .text { - min-height: unset; - width: 100%; - padding-inline: 10px; - height: 100%; - display: grid; - align-content: center; + display : grid; + align-content : center; + width : 100%; + height : 100%; + min-height : unset; + padding-inline : 10px; h2 { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - font-size: 20px; - font-weight: 900; - height: 100%; - min-height: 1.4em; - align-content: center; - vertical-align: middle; + align-content : center; + height : 100%; + min-height : 1.4em; + overflow : hidden; + text-overflow : ellipsis; + font-size : 20px; + font-weight : 900; + vertical-align : middle; + white-space : nowrap; } - .description { - display: none; - } + .description { display : none; } } .info { - width: clamp(400px, 100%, 650px); - display: grid; - grid-template-areas: 'tags authors views pages update storage'; - justify-content: end; - align-content: space-around; - align-items: center; - grid-template-columns: 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px; - br { - display: none; - } + display : grid; + grid-template-areas : 'tags authors views pages update storage'; + grid-template-columns : 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px; + align-content : space-around; + align-items : center; + justify-content : end; + width : clamp(400px, 100%, 650px); + br { display : none; } .brewTags { - display: inline-block; - grid-area: tags; - min-width: 100px; + display : inline-block; + grid-area : tags; + min-width : 100px; } .brewAuthors { - display: inline-block; - grid-area: authors; - height: fit-content; - width: 150px; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; + display : inline-block; + display : -webkit-box; + grid-area : authors; + width : 150px; + height : fit-content; + overflow : hidden; + text-overflow : ellipsis; + -webkit-line-clamp : 3; + -webkit-box-orient : vertical; - &:has(a:only-of-type) { - width: fit-content; - } + &:has(a:only-of-type) { width : fit-content; } } .lastViewed { - display: inline-block; - grid-area: views; - min-width: 50px; + display : inline-block; + grid-area : views; + min-width : 50px; } .brewPages { - display: inline-block; - grid-area: pages; - min-width: 40px; + display : inline-block; + grid-area : pages; + min-width : 40px; } [title*='Created'] { - display: inline-block; - grid-area: update; + display : inline-block; + grid-area : update; } [title*='Storage'] { - display: inline-block; - grid-area: storage; - filter: drop-shadow(0 0 10px white); + display : inline-block; + grid-area : storage; + filter : drop-shadow(0 0 10px white); } .brewTags:has(span:nth-of-type(4)) { - position: relative; - overflow: hidden; - display: flex; - flex-wrap: wrap; + position : relative; + display : flex; + flex-wrap : wrap; + overflow : hidden; - span:nth-of-type(n + 2) { - display: none; - } + span:nth-of-type(n + 2) { display : none; } &:hover { - overflow: visible; - position: absolute; - top: 0; - background: #707070; - height: max-content; - z-index: 100; - width: min-content; - padding: 10px; + position : absolute; + top : 0; + z-index : 100; + width : min-content; + height : max-content; + padding : 10px; + overflow : visible; + background : #707070; - span:nth-of-type(n + 4) { - display: block; - } + span:nth-of-type(n + 4) { display : block; } - &:after { - position: absolute; - top: 48px; - right: 0; - left: 0; - bottom: 0; - content: ''; - display: block; - height: calc(100% - 48px); - background: #707070; - border-inline: 1px solid gold; - border-bottom: 1px solid gold; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - z-index: -1; + &::after { + position : absolute; + top : 48px; + right : 0; + bottom : 0; + left : 0; + z-index : -1; + display : block; + height : calc(100% - 48px); + content : ''; + background : #707070; + border-inline : 1px solid gold; + border-bottom : 1px solid gold; + border-bottom-right-radius : 5px; + border-bottom-left-radius : 5px; } } } } .links { - opacity: 1; - background: none; - position: relative; - display: flex; - justify-content: space-evenly; - width: 100%; - align-items: center; - height: 100%; + position : relative; + display : flex; + align-items : center; + justify-content : space-evenly; + width : 100%; + height : 100%; + background : none; + opacity : 1; > a { - opacity: 0.8; + opacity : 0.8; - &:hover { - opacity: 1; - } + &:hover { opacity : 1; } } - .editLink { - color: @green; - } - .deleteLink { - color: @red; - } + .editLink { color : @green; } + .deleteLink { color : @red; } - .shareLink { - color: deepskyblue; - } + .shareLink { color : deepskyblue; } - .downloadLink { - color: coral; - } + .downloadLink { color : coral; } } } .card > .brewItem { - background-color: grey; - background-image: url('@themes/assets/naturalCritLogoBlack.svg'); - background-size: 60%; - background-position: center 20%; - background-repeat: no-repeat; - background-blend-mode: soft-light; - width: 300px; - height: 400px; - border: 1px solid; - margin: 10px; - border-radius: 10px; - padding: 10px; - padding-top: 100px; - padding-bottom: 50px; - display: flex; - flex-direction: column; - justify-content: flex-end; - isolation: isolate; - position: relative; - color: white; - font-size: 13px; + position : relative; + display : flex; + flex-direction : column; + justify-content : flex-end; + width : 300px; + height : 400px; + padding : 10px; + padding-top : 100px; + padding-bottom : 50px; + margin : 10px; + font-size : 13px; + color : white; + background-color : grey; + background-image : url('@themes/assets/naturalCritLogoBlack.svg'); + background-repeat : no-repeat; + background-position : center 20%; + background-size : 60%; + border : 1px solid; + border-radius : 10px; + background-blend-mode : soft-light; + isolation : isolate; &::before { - display: block; - content: ''; - height: 50%; - position: absolute; - bottom: 0; - left: 0; - right: 0; - background-image: linear-gradient(0deg, #777f 0, #7770 90%); - z-index: -1; - transition: height 0.2s; + position : absolute; + right : 0; + bottom : 0; + left : 0; + z-index : -1; + display : block; + height : 50%; + content : ''; + background-image : linear-gradient(0deg, #777777FF 0, #77777700 90%); + transition : height 0.2s; } &:hover { &::before { - height: 100%; - background-image: linear-gradient(0deg, #777f 0, #777f 42%, #7770 55%); - } - .text .description { - height: fit-content; + height : 100%; + background-image : linear-gradient(0deg, #777777FF 0, #777777FF 42%, #77777700 55%); } + .text .description { height : fit-content; } } .thumbnail { - position: absolute; - top: 0; - left: 0; - z-index: -2; - width: 100%; - height: 100%; - background-repeat: no-repeat; - background-position: right top; - background-size: cover; + position : absolute; + top : 0; + left : 0; + z-index : -2; + width : 100%; + height : 100%; + background-repeat : no-repeat; + background-position : right top; + background-size : cover; } .text { - filter: drop-shadow(0 1px 4px black); + filter : drop-shadow(0 1px 4px black); h2 { - font-weight: 900; - font-size: 1.2em; + font-size : 1.2em; + font-weight : 900; } .description { - height: 0; - overflow: hidden; - transition: height 0.2s; + height : 0; + overflow : hidden; + transition : height 0.2s; } } .info { - filter: drop-shadow(0 1px 2px black); - height: 130px; - display: grid; - grid-template-areas: - 'tags tags tags' + display : grid; + grid-template-areas : 'tags tags tags' 'authors authors authors' 'pages views views' 'update update storage'; + height : 130px; + filter : drop-shadow(0 1px 2px black); .brewTags { - color: black; - grid-area: tags; + grid-area : tags; + color : black; - i { - color: white; - } - > 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; + i { color : white; } + > 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 { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 40px; - display: flex; + position : absolute; + right : 0; + bottom : 0; + left : 0; + display : flex; + height : 40px; } } -@media screen and (max-width: 1400px) { +@media screen and (max-width : 1400px) { .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { - grid-template-columns: 3fr 2.5fr 1fr; + grid-template-columns : 3fr 2.5fr 1fr; .info { - width: clamp(200px, 100%, 650px); - grid-template-columns: 2fr 1fr 20px; - grid-template-areas: 'tags update storage'; + grid-template-areas : 'tags update storage'; + grid-template-columns : 2fr 1fr 20px; + width : clamp(200px, 100%, 650px); } .brewPages, .lastViewed, - .brewAuthors { - display: none; - } - } - .brewItem { - transition: height 0.2s; - } - .detailsOpen { - height: 70px; + .brewAuthors { display : none; } } + .brewItem { transition : height 0.2s; } + .detailsOpen { height : 70px; } } } } -@media screen and (max-width: 1200px) { +@media screen and (max-width : 1200px) { .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { - grid-template-columns: 3fr 2fr 1fr; + grid-template-columns : 3fr 2fr 1fr; .info { - width: clamp(200px, 100%, 650px); - grid-template-columns: 1fr 20px; - grid-template-areas: 'tags storage'; + grid-template-areas : 'tags storage'; + grid-template-columns : 1fr 20px; + width : clamp(200px, 100%, 650px); } .brewPages, .lastViewed, .brewAuthors, - .lastUpdated { - display: none; - } + .lastUpdated { display : none; } } .detailsOpen { - grid-template-columns: 3fr 2fr 1fr; + grid-template-columns : 3fr 2fr 1fr; .info { - width: clamp(200px, 100%, 650px); - display: grid; - grid-template-columns: 2fr 1fr 1fr; - grid-template-rows: 1fr 1fr; - grid-template-areas: - 'tags views pages' + display : grid; + grid-template-areas : 'tags views pages' 'authors update storage'; + grid-template-rows : 1fr 1fr; + grid-template-columns : 2fr 1fr 1fr; + width : clamp(200px, 100%, 650px); } .lastUpdated { - width: 100px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - word-break: break-all; + width : 100px; + overflow : hidden; + text-overflow : ellipsis; + word-break : break-all; + white-space : nowrap; } } } } } -@media screen and (max-width: 800px) { +@media screen and (max-width : 800px) { .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { .info { - width: clamp(200px, 100%, 650px); - grid-template-columns: 1fr; - grid-template-areas: 'tags'; + grid-template-areas : 'tags'; + grid-template-columns : 1fr; + width : clamp(200px, 100%, 650px); } .brewPages, .lastViewed, .brewAuthors, .lastUpdated, - .storage { - display: none; - } + .storage { display : none; } } - .brewItem { - transition: height 0.2s; - } + .brewItem { transition : height 0.2s; } .detailsOpen { - height: 100px; - padding: 5px; - display: grid; - grid-template-columns: 3fr 3fr 30px; + display : grid; + grid-template-columns : 3fr 3fr 30px; + height : 100px; + padding : 5px; .text { - height: 100%; - padding: 0; + height : 100%; + padding : 0; h2 { - height: fit-content; - white-space: wrap; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; + display : -webkit-box; + height : fit-content; + overflow : hidden; + text-overflow : ellipsis; + -webkit-line-clamp : 3; + white-space : wrap; + -webkit-box-orient : vertical; } } .info { - height: 100%; - width: 100%; - display: grid; - grid-template-columns: 2fr 1fr 1fr 20px; - grid-template-areas: - 'tags pages views views' + 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; + display : flex; + flex-direction : column; + gap : 5px; a, - button { - margin: 0; - } + button { margin : 0; } } } } } } -@media screen and (max-width: 650px) { +@media screen and (max-width : 650px) { .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { - grid-template-columns: 3fr 1fr; - .info { - display: none; - } + grid-template-columns : 3fr 1fr; + .info { display : none; } } .detailsOpen { - grid-template-rows: 1fr 2fr; + grid-template-rows : 1fr 2fr; .info { - display: grid; + display : grid; .lastUpdated { - width: 100px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - word-break: break-all; + width : 100px; + overflow : hidden; + text-overflow : ellipsis; + word-break : break-all; + white-space : nowrap; } } } diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index 35ab5fa79..d9f6dbc72 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -2,81 +2,87 @@ @import '@sharedStyles/colors.less'; .noColumns() { - -webkit-column-width: auto; - -moz-column-width: auto; - column-width: auto; - -webkit-column-count: auto; - -moz-column-count: auto; - column-count: auto; - column-fill: auto; - -webkit-column-gap: normal; - -moz-column-gap: normal; - column-gap: normal; - height: auto; - min-height: 279.4mm; - margin: 20px auto; - contain: unset; + -webkit-column-width : auto; + -moz-column-width : auto; + column-width : auto; + -webkit-column-count : auto; + -moz-column-count : auto; + column-count : auto; + column-fill : auto; + -webkit-column-gap : normal; + -moz-column-gap : normal; + column-gap : normal; + height : auto; + min-height : 279.4mm; + margin : 20px auto; + contain : unset; } .listPage { .content { - z-index: 1; - padding: clamp(20px, 5vh, 200px) 10vw; + z-index : 1; + padding-block : clamp(20px, 5vh, 200px); + padding-inline : clamp(20px, 20vw, 200px); + .noBrews { - margin: 10px 0px; - font-size: 1.3em; - font-style: italic; + margin : 10px 0px; + font-size : 1.3em; + font-style : italic; } .brewCollection { - width: fit-content; - h1 { - margin-bottom: 20px; - font-size: 25px; - color: #dddddd; + 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; + padding-right : 0.5em; + font-family : 'Font Awesome 6 Free'; + font-size : 0.6cm; + font-weight : 900; } &.active { - color: white; - } - &.active::before { - content: '\f107'; - } - &.inactive::before { - content: '\f105'; + color : white; + &::before { content : '\f107'; } } + &.inactive::before { content : '\f105'; } } - h1:hover { - cursor: pointer; - } + h1:hover { cursor : pointer; } .brewGroup { + margin-bottom : 20px; &.grid { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 20px; - min-width: 200px; + display : flex; + flex-wrap : wrap; + gap : 20px; + justify-content : center; + width : fit-content; + min-width : 200px; } &.list { - display: flex; - flex-direction: column; - gap: 2px; + display : flex; + flex-direction : column; + gap : 2px; } &.card { - display: flex; - flex-wrap: wrap; - column-gap: 40px; - justify-content: center; + --columns : 4; + display : grid; + grid-template-columns : repeat(var(--columns), 1fr); + column-gap : 40px; + justify-items : center; - h1 { - position: absolute; + @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; + } } } } @@ -84,169 +90,149 @@ } .listPageNav { - position: relative; - width: 100%; - height: fit-content; - display: flex; - flex-wrap: wrap; - align-items:center; - justify-content: center; - background: #555; - column-gap: 20px; - row-gap: 10px; - border-top: 1px solid #666; - border-bottom: 1px solid #666; - font-family: 'Open Sans', sans-serif; - color: white; - row-rule: 1px solid #666; + 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; - padding-inline: 10px; - height:30px; + width : fit-content; + height : 30px; + padding-inline : 10px; } .sort-container { - z-index: 1; - display: flex; - flex-wrap: wrap; - row-gap: 5px; - column-gap: 15px; - align-items: baseline; - justify-content: center; + z-index : 1; + display : flex; + flex-wrap : wrap; + row-gap : 5px; + column-gap : 15px; + align-items : baseline; + justify-content : center; - text-align: center; + text-align : center; h6 { - font-size: 11px; - font-weight: bold; - text-transform: uppercase; + font-size : 11px; + font-weight : bold; + text-transform : uppercase; } .sort-option { - display: flex; - align-items: center; - height: 100%; - padding: 0 8px; - color: #cccccc; + display : flex; + align-items : center; + height : 100%; + padding : 0 8px; + color : #CCCCCC; - &:hover { - background-color: #444444; - } + &:hover { background-color : #444444; } &.active { - font-weight: bold; - color: #dddddd; - background-color: #333333; + font-weight : bold; + color : #DDDDDD; + background-color : #333333; button { - height: 100%; - font-weight: 800; - color: white; - & + .sortDir { - padding-left: 5px; - } + 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; + padding : 0; + font-size : 11px; + font-weight : normal; + color : #CCCCCC; + text-transform : uppercase; + background-color : transparent; } } .filter-option { - display: grid; - place-items: center; - font-size: 11px; - background-color: transparent !important; - i { - padding-right: 5px; - } + display : grid; + place-items : center; + font-size : 11px; + background-color : transparent !important; + i { padding-right : 5px; } } .tags-container { - display: flex; - flex-wrap: wrap; - row-gap: 5px; - column-gap: 15px; - align-items: center; - justify-content: center; - height: 30px; + 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; + 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; + 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'; + margin-left : 3px; + font-family : 'Font Awesome 6 Free'; + font-size : 12px; + content : '\f00d'; } &.type { - background-color: #008000; - border-color: #00a000; - &::before { - content: '\f0ad'; - } + background-color : #008000; + border-color : #00A000; + &::before { content : '\f0ad'; } } &.group { - background-color: #505050; - border-color: #000000; - &::before { - content: '\f500'; - } + background-color : #505050; + border-color : #000000; + &::before { content : '\f500'; } } &.meta { - background-color: #000080; - border-color: #0000a0; - &::before { - content: '\f05a'; - } + background-color : #000080; + border-color : #0000A0; + &::before { content : '\f05a'; } } &.system { - background-color: #800000; - border-color: #a00000; - &::before { - content: '\f518'; - } + 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; + 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; - } + input[type='radio'] { display : none; } - i { - transition: color 0.2s; - } + i { transition : color 0.2s; } - input:checked + i { - color: @blue; - } + input:checked + i { color : @blue; } } } } From 1fe1738419db97402db1ae10a30c79508aa68166 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Thu, 10 Sep 2026 00:26:03 +0200 Subject: [PATCH 13/34] simplifying css 1 --- .../basePages/listPage/brewItem/brewItem.less | 21 +++---------- .../pages/basePages/listPage/listPage.less | 30 +++++-------------- 2 files changed, 11 insertions(+), 40 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 2f05dae78..41b628450 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -28,8 +28,6 @@ } } .info { - position : initial; - bottom : 2px; font-size : 1.2em; & > span { line-height : 1.5em; } a { color : inherit; } @@ -77,7 +75,7 @@ background-color : fade(black, 60%); a, button { - .animate(opacity); + display : block; width : 100%; margin : 8px 0px; @@ -104,15 +102,10 @@ } .grid > .brewItem { - position : relative; - box-sizing : border-box; - display : inline-block; - width : clamp(300px, 48%, 600px); + width : clamp(300px, 48%, 500px); min-height : 125px; padding : 5px 15px 2px 6px; padding-right : 15px; - overflow : hidden; - vertical-align : top; background-color : #CAB2802E; background-image : url('https://ik.imagekit.io/5eCleric/background%20note.png'); background-size : cover; @@ -120,9 +113,6 @@ border-radius : 5px; box-shadow : 0px 4px 5px 0px #333333; isolation : isolate; - break-inside : avoid; - -webkit-column-break-inside : avoid; - break-inside : avoid; .thumbnail { position : absolute; top : 0; @@ -145,9 +135,6 @@ } } .info { - position : initial; - bottom : 2px; - font-size : 0.9em; & > span { margin-right : 12px; @@ -196,7 +183,7 @@ .links { opacity : 1; } } .links { - .animate(opacity); + position : absolute; top : 0px; right : 0px; @@ -207,7 +194,7 @@ opacity : 0; a, button { - .animate(opacity); + display : block; width : 100%; margin : 8px 0px; diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index d9f6dbc72..b48e5cfbf 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -1,32 +1,16 @@ @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); @import '@sharedStyles/colors.less'; -.noColumns() { - -webkit-column-width : auto; - -moz-column-width : auto; - column-width : auto; - -webkit-column-count : auto; - -moz-column-count : auto; - column-count : auto; - column-fill : auto; - -webkit-column-gap : normal; - -moz-column-gap : normal; - column-gap : normal; - height : auto; - min-height : 279.4mm; - margin : 20px auto; - contain : unset; -} .listPage { .content { - z-index : 1; - padding-block : clamp(20px, 5vh, 200px); - padding-inline : clamp(20px, 20vw, 200px); + padding: clamp(20px, 5vh, 200px) clamp(20px, 20vw, 200px); .noBrews { margin : 10px 0px; font-size : 1.3em; font-style : italic; + color:white; + font-weight:900; } .brewCollection { h1 { @@ -101,10 +85,10 @@ 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; + background : #555; + border-top : 1px solid #666; + border-bottom : 1px solid #666; + row-rule : 1px solid #666; > div { width : fit-content; From 9c62207ae951b8c936c4bb720af6594d41b64e70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Thu, 10 Sep 2026 11:36:19 +0200 Subject: [PATCH 14/34] snippet colors --- .../basePages/listPage/brewItem/brewItem.less | 23 ++++++++++++++++++- .../pages/basePages/listPage/listPage.jsx | 4 ++-- .../pages/basePages/listPage/listPage.less | 2 +- 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 41b628450..59ab46c8a 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -269,6 +269,28 @@ display : inline-block; grid-area : tags; min-width : 100px; + + span { + color:#606060; + background-color: hsla(from #c1b673 h s l / 20% ); + } + .type { + color:#518251; + background-color: hsla(from currentColor h s l / 20% ); + } + .system { + color: #c55656; + background-color: hsla(from currentColor h s l / 20% ); + } + .group { + color : #525252; + background-color: hsla(from currentColor h s l / 20% ); + } + .meta { + color : #5050b1; + background-color: hsla(from currentColor h s l / 20% ); + } + } .brewAuthors { display : inline-block; @@ -379,7 +401,6 @@ padding : 10px; padding-top : 100px; padding-bottom : 50px; - margin : 10px; font-size : 13px; color : white; background-color : grey; diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index e17f99d95..2bfce14ea 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -294,13 +294,13 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index b48e5cfbf..982641d98 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -54,7 +54,7 @@ --columns : 4; display : grid; grid-template-columns : repeat(var(--columns), 1fr); - column-gap : 40px; + gap : 20px; justify-items : center; @media screen and (max-width : 1700px) {--columns : 3;} From 944d069fa2b7d59f829cc44e30dc77dc9693c7eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Thu, 10 Sep 2026 12:00:14 +0200 Subject: [PATCH 15/34] fix some sizing --- .../basePages/listPage/brewItem/brewItem.less | 879 ++++++++++-------- .../pages/basePages/listPage/listPage.less | 2 +- 2 files changed, 482 insertions(+), 399 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 59ab46c8a..853392ccc 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -3,634 +3,717 @@ @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); .brewItem { - position : relative; - box-sizing : border-box; - display : inline-block; - overflow : hidden; - break-inside : avoid; - -webkit-column-break-inside : avoid; - break-inside : avoid; + position: relative; + box-sizing: border-box; + display: inline-block; + overflow: hidden; + break-inside: avoid; + -webkit-column-break-inside: avoid; + break-inside: avoid; .thumbnail { - position : absolute; - top : 0; - right : 0; - z-index : -1; - width : 150px; - height : 100%; - background-repeat : no-repeat; - background-position : right top; - background-size : contain; + position: absolute; + top: 0; + right: 0; + z-index: -1; + width: 150px; + height: 100%; + background-repeat: no-repeat; + background-position: right top; + background-size: contain; } .text { - h4 { - margin-bottom : 5px; - font-size : 2.2em; + h2 { + margin-bottom: 5px; + font-size: 1.3em; + font-weight: 400; + font-family: Alata; } } .info { - font-size : 1.2em; - & > span { line-height : 1.5em; } - a { color : inherit; } + font-size: 1.2em; + & > span { + line-height: 1.5em; + } + a { + color: inherit; + } } .brewTags span { - display : inline-block; - padding : 2px; - margin : 2px; - font-weight : bold; - white-space : nowrap; - cursor : pointer; - background-color : #C8AC6E3B; - border : 1px solid #C8AC6E; - border-color : currentColor; - border-radius : 4px; + display: inline-block; + padding: 2px; + margin: 2px; + font-weight: bold; + white-space: nowrap; + cursor: pointer; + background-color: #c8ac6e3b; + border: 1px solid #c8ac6e; + border-color: currentColor; + border-radius: 4px; &::before { - margin-right : 3px; - font-family : 'Font Awesome 6 Free'; - font-size : 12px; + margin-right: 3px; + font-family: 'Font Awesome 6 Free'; + font-size: 12px; } &.type { - color : #008000; - background-color : #0080003B; - &::before { content : '\f0ad'; } + color: #008000; + background-color: #0080003b; + &::before { + content: '\f0ad'; + } } &.group { - color : #000000; - background-color : #5050503B; - &::before { content : '\f500'; } + color: #000000; + background-color: #5050503b; + &::before { + content: '\f500'; + } } &.meta { - color : #000080; - background-color : #0000803B; - &::before { content : '\f05a'; } + color: #000080; + background-color: #0000803b; + &::before { + content: '\f05a'; + } } &.system { - color : #800000; - background-color : #8000003B; - &::before { content : '\f518'; } + color: #800000; + background-color: #8000003b; + &::before { + content: '\f518'; + } } } - &:nth-child(2n + 1) { margin-right : 0px; } + &:nth-child(2n + 1) { + margin-right: 0px; + } .links { - text-align : center; - background-color : fade(black, 60%); + text-align: center; + background-color: fade(black, 60%); a, button { - - 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; } + display: block; + width: 100%; + font-size: 1.3em; + color: white; + text-decoration: unset; + opacity: 0.6; + &:hover { + opacity: 1; + } + i { + cursor: pointer; + } } } .googleDriveIcon { - height : 18px; - padding : 0px; - margin : -5px; + height: 18px; + padding: 0px; + margin: -5px; } .homebreweryIcon { - position : relative; - top : 5px; - left : -7.5px; - height : 18px; - padding : 0px; + position: relative; + top: 5px; + left: -7.5px; + height: 18px; + padding: 0px; } } .grid > .brewItem { - width : clamp(300px, 48%, 500px); - min-height : 125px; - padding : 5px 15px 2px 6px; - padding-right : 15px; - background-color : #CAB2802E; - background-image : url('https://ik.imagekit.io/5eCleric/background%20note.png'); - background-size : cover; - border : 1px solid #C9AD6A; - border-radius : 5px; - box-shadow : 0px 4px 5px 0px #333333; - isolation : isolate; + width: clamp(300px, 48%, 500px); + min-height: 125px; + padding: 5px 15px 2px 6px; + padding-right: 20px; + background-color: #cab2802e; + background-image: url('https://ik.imagekit.io/5eCleric/background%20note.png'); + background-size: cover; + border: 1px solid #c9ad6a; + border-radius: 5px; + box-shadow: 0px 4px 5px 0px #333333; + isolation: isolate; .thumbnail { - position : absolute; - top : 0; - right : 0; - z-index : -1; - width : 155px; - height : 100%; - background-repeat : no-repeat; - background-position : right top; - background-size : contain; - opacity : 50%; - -webkit-mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%); - mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%); + position: absolute; + top: 0; + right: 30px; + z-index: -1; + width: 155px; + height: 100%; + background-repeat: no-repeat; + background-position: right top; + background-size: contain; + opacity: 50%; + -webkit-mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%); + mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%); } .text { - min-height : 54px; + min-height: 54px; h2 { - margin-bottom : 5px; - font-size : 1.3em; + margin-bottom: 5px; + font-size: 1.3em; + } + .description { + padding-left: 5px; } } .info { - font-size : 0.9em; + font-size: 0.9em; + padding-left: 5px; & > span { - margin-right : 12px; - line-height : 1.5em; + margin-right: 12px; + line-height: 1.5em; } } .brewTags span { - display : inline-block; - padding : 2px; - margin : 2px; - font-weight : bold; - white-space : nowrap; - cursor : pointer; - background-color : #C8AC6E3B; - border : 1px solid #C8AC6E; - border-color : currentColor; - border-radius : 4px; + display: inline-block; + padding: 2px; + margin: 2px; + font-weight: bold; + white-space: nowrap; + cursor: pointer; + background-color: #c8ac6e3b; + border: 1px solid #c8ac6e; + border-color: currentColor; + border-radius: 4px; &::before { - margin-right : 3px; - font-family : 'Font Awesome 6 Free'; - font-size : 12px; + margin-right: 3px; + font-family: 'Font Awesome 6 Free'; + font-size: 12px; } &.type { - color : #008000; - background-color : #0080003B; - &::before { content : '\f0ad'; } + color: #008000; + background-color: #0080003b; + &::before { + content: '\f0ad'; + } } &.group { - color : #000000; - background-color : #5050503B; - &::before { content : '\f500'; } + color: #000000; + background-color: #5050503b; + &::before { + content: '\f500'; + } } &.meta { - color : #000080; - background-color : #0000803B; - &::before { content : '\f05a'; } + color: #000080; + background-color: #0000803b; + &::before { + content: '\f05a'; + } } &.system { - color : #800000; - background-color : #8000003B; - &::before { content : '\f518'; } + color: #800000; + background-color: #8000003b; + &::before { + content: '\f518'; + } } } - &:hover, - &:focus-within { - .links { opacity : 1; } - } .links { - - position : absolute; - top : 0px; - right : 0px; - width : 2em; - height : 100%; - text-align : center; - background-color : fade(black, 60%); - opacity : 0; + position: absolute; + top: 0px; + right: 0px; + width: 2em; + height: 100%; + text-align: center; + background-color: #555; + display: flex; + flex-direction: column; + justify-content: space-evenly; a, button { - - 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; } + display: block; + width: 100%; + font-size: 1.1em; + color: white; + text-decoration: unset; + opacity: 0.6; + &:hover { + opacity: 1; + } + i { + cursor: pointer; + } } } .googleDriveIcon { - height : 18px; - padding : 0px; - margin : -5px; + height: 18px; + padding: 0px; + margin: -5px; } .homebreweryIcon { - position : relative; - top : 5px; - left : -7.5px; - height : 18px; - padding : 0px; + position: relative; + top: 5px; + left: -7.5px; + height: 18px; + padding: 0px; } } .list > .brewItem { - display : grid; - grid-template-columns : 2fr 3fr 1fr; - align-items : center; - width : 100%; - height : 50px; - min-height : unset; - overflow : visible; - font-size : 12px; - color : rgb(2, 2, 2); - background : #EFEFEF; + display: grid; + grid-template-columns: 2fr 3fr 1fr; + align-items: center; + width: 100%; + height: 50px; + min-height: unset; + overflow: visible; + font-size: 12px; + color: rgb(2, 2, 2); + background: #efefef; .text { - - display : grid; - align-content : center; - width : 100%; - height : 100%; - min-height : unset; - padding-inline : 10px; + display: grid; + align-content: center; + width: 100%; + height: 100%; + min-height: unset; + padding-inline: 10px; h2 { - align-content : center; - height : 100%; - min-height : 1.4em; - overflow : hidden; - text-overflow : ellipsis; - font-size : 20px; - font-weight : 900; - vertical-align : middle; - white-space : nowrap; + align-content: center; + height: 100%; + min-height: 1.4em; + overflow: hidden; + text-overflow: ellipsis; + font-size: 1.6em; + font-weight: 900; + vertical-align: middle; + white-space: nowrap; } - .description { display : none; } + .description { + display: none; + } } .info { - display : grid; - grid-template-areas : 'tags authors views pages update storage'; - grid-template-columns : 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px; - align-content : space-around; - align-items : center; - justify-content : end; - width : clamp(400px, 100%, 650px); - br { display : none; } + display: grid; + grid-template-areas: 'tags authors views pages update storage'; + grid-template-columns: 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px; + align-content: space-around; + align-items: center; + justify-content: end; + width: clamp(400px, 100%, 650px); + br { + display: none; + } .brewTags { - display : inline-block; - grid-area : tags; - min-width : 100px; - + display: inline-block; + grid-area: tags; + min-width: 100px; + span { - color:#606060; - background-color: hsla(from #c1b673 h s l / 20% ); + color: #606060; + background-color: hsla(from #c1b673 h s l / 20%); } .type { - color:#518251; - background-color: hsla(from currentColor h s l / 20% ); + color: #518251; + background-color: hsla(from currentColor h s l / 20%); } .system { color: #c55656; - background-color: hsla(from currentColor h s l / 20% ); + background-color: hsla(from currentColor h s l / 20%); } .group { - color : #525252; - background-color: hsla(from currentColor h s l / 20% ); + color: #525252; + background-color: hsla(from currentColor h s l / 20%); } .meta { - color : #5050b1; - background-color: hsla(from currentColor h s l / 20% ); + color: #5050b1; + background-color: hsla(from currentColor h s l / 20%); } - } .brewAuthors { - display : inline-block; - display : -webkit-box; - grid-area : authors; - width : 150px; - height : fit-content; - overflow : hidden; - text-overflow : ellipsis; - -webkit-line-clamp : 3; - -webkit-box-orient : vertical; + display: inline-block; + display: -webkit-box; + grid-area: authors; + width: 150px; + height: fit-content; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; - &:has(a:only-of-type) { width : fit-content; } + &:has(a:only-of-type) { + width: fit-content; + } } .lastViewed { - display : inline-block; - grid-area : views; - min-width : 50px; + display: inline-block; + grid-area: views; + min-width: 50px; } .brewPages { - display : inline-block; - grid-area : pages; - min-width : 40px; + display: inline-block; + grid-area: pages; + min-width: 40px; } [title*='Created'] { - display : inline-block; - grid-area : update; + display: inline-block; + grid-area: update; } [title*='Storage'] { - display : inline-block; - grid-area : storage; - filter : drop-shadow(0 0 10px white); + display: inline-block; + grid-area: storage; + filter: drop-shadow(0 0 10px white); } .brewTags:has(span:nth-of-type(4)) { - position : relative; - display : flex; - flex-wrap : wrap; - overflow : hidden; + position: relative; + display: flex; + flex-wrap: wrap; + overflow: hidden; - span:nth-of-type(n + 2) { display : none; } + span:nth-of-type(n + 2) { + display: none; + } &:hover { - position : absolute; - top : 0; - z-index : 100; - width : min-content; - height : max-content; - padding : 10px; - overflow : visible; - background : #707070; + position: absolute; + top: 0; + z-index: 100; + width: min-content; + height: max-content; + padding: 10px; + overflow: visible; + background: #707070; - span:nth-of-type(n + 4) { display : block; } + span:nth-of-type(n + 4) { + display: block; + } &::after { - position : absolute; - top : 48px; - right : 0; - bottom : 0; - left : 0; - z-index : -1; - display : block; - height : calc(100% - 48px); - content : ''; - background : #707070; - border-inline : 1px solid gold; - border-bottom : 1px solid gold; - border-bottom-right-radius : 5px; - border-bottom-left-radius : 5px; + position: absolute; + top: 48px; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + display: block; + height: calc(100% - 48px); + content: ''; + background: #707070; + border-inline: 1px solid gold; + border-bottom: 1px solid gold; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; } } } } .links { - position : relative; - display : flex; - align-items : center; - justify-content : space-evenly; - width : 100%; - height : 100%; - background : none; - opacity : 1; + position: relative; + display: flex; + align-items: center; + justify-content: space-evenly; + width: 100%; + height: 100%; + background: none; + opacity: 1; > a { - opacity : 0.8; + opacity: 0.8; - &:hover { opacity : 1; } + &:hover { + opacity: 1; + } } - .editLink { color : @green; } - .deleteLink { color : @red; } + .editLink { + color: @green; + } + .deleteLink { + color: @red; + } - .shareLink { color : deepskyblue; } + .shareLink { + color: deepskyblue; + } - .downloadLink { color : coral; } + .downloadLink { + color: coral; + } } } .card > .brewItem { - position : relative; - display : flex; - flex-direction : column; - justify-content : flex-end; - width : 300px; - height : 400px; - padding : 10px; - padding-top : 100px; - padding-bottom : 50px; - font-size : 13px; - color : white; - background-color : grey; - background-image : url('@themes/assets/naturalCritLogoBlack.svg'); - background-repeat : no-repeat; - background-position : center 20%; - background-size : 60%; - border : 1px solid; - border-radius : 10px; - background-blend-mode : soft-light; - isolation : isolate; + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 300px; + height: 400px; + padding: 10px; + padding-top: 100px; + padding-bottom: 50px; + font-size: 12px; + color: white; + background-color: grey; + background-image: url('@themes/assets/naturalCritLogoBlack.svg'); + background-repeat: no-repeat; + background-position: center 20%; + background-size: 60%; + border: 1px solid; + border-radius: 10px; + background-blend-mode: soft-light; + isolation: isolate; &::before { - position : absolute; - right : 0; - bottom : 0; - left : 0; - z-index : -1; - display : block; - height : 50%; - content : ''; - background-image : linear-gradient(0deg, #777777FF 0, #77777700 90%); - transition : height 0.2s; + position: absolute; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + display: block; + height: 50%; + content: ''; + background-image: linear-gradient(0deg, #777777ff 0, #77777700 90%); + transition: height 0.2s; } &:hover { &::before { - height : 100%; - background-image : linear-gradient(0deg, #777777FF 0, #777777FF 42%, #77777700 55%); + height: 100%; + background-image: linear-gradient(0deg, #777777ff 0, #777777ff 42%, #77777700 55%); + } + .text .description { + height: fit-content; } - .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; + position: absolute; + top: 0; + left: 0; + z-index: -2; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-position: right top; + background-size: cover; } .text { - filter : drop-shadow(0 1px 4px black); + filter: drop-shadow(0 1px 4px black); h2 { - font-size : 1.2em; - font-weight : 900; + font-size: 1.6em; + font-weight: 900; } .description { - height : 0; - overflow : hidden; - transition : height 0.2s; + height: 0; + overflow: hidden; + transition: height 0.2s; } } .info { - display : grid; - grid-template-areas : 'tags tags tags' - 'authors authors authors' - 'pages views views' - 'update update storage'; - height : 130px; - filter : drop-shadow(0 1px 2px black); + 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 black); .brewTags { - grid-area : tags; - color : black; + grid-area: tags; + color: black; - i { color : white; } - > span { background : hsl(from currentColor h 20% 80%); } + i { + color: white; + } + > 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; } - .brewAuthors { grid-area : authors; } - .brewPages { grid-area : pages; } - .lastViewed { grid-area : views; } - .lastUpdated { grid-area : update; } - .storage { grid-area : storage; } } .links { - position : absolute; - right : 0; - bottom : 0; - left : 0; - display : flex; - height : 40px; + position: absolute; + right: 0; + bottom: 0; + left: 0; + display: flex; + height: 40px; } } -@media screen and (max-width : 1400px) { +@media screen and (max-width: 1400px) { .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { - grid-template-columns : 3fr 2.5fr 1fr; + grid-template-columns: 3fr 2.5fr 1fr; .info { - grid-template-areas : 'tags update storage'; - grid-template-columns : 2fr 1fr 20px; - width : clamp(200px, 100%, 650px); + grid-template-areas: 'tags update storage'; + grid-template-columns: 2fr 1fr 20px; + width: clamp(200px, 100%, 650px); } .brewPages, .lastViewed, - .brewAuthors { display : none; } + .brewAuthors { + display: none; + } + } + .brewItem { + transition: height 0.2s; + } + .detailsOpen { + height: 70px; } - .brewItem { transition : height 0.2s; } - .detailsOpen { height : 70px; } } } } -@media screen and (max-width : 1200px) { +@media screen and (max-width: 1200px) { .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { - grid-template-columns : 3fr 2fr 1fr; + grid-template-columns: 3fr 2fr 1fr; .info { - grid-template-areas : 'tags storage'; - grid-template-columns : 1fr 20px; - width : clamp(200px, 100%, 650px); + grid-template-areas: 'tags storage'; + grid-template-columns: 1fr 20px; + width: clamp(200px, 100%, 650px); } .brewPages, .lastViewed, .brewAuthors, - .lastUpdated { display : none; } + .lastUpdated { + display: none; + } } .detailsOpen { - grid-template-columns : 3fr 2fr 1fr; + grid-template-columns: 3fr 2fr 1fr; .info { - display : grid; - grid-template-areas : 'tags views pages' + display: grid; + grid-template-areas: + 'tags views pages' 'authors update storage'; - grid-template-rows : 1fr 1fr; - grid-template-columns : 2fr 1fr 1fr; - width : clamp(200px, 100%, 650px); + grid-template-rows: 1fr 1fr; + grid-template-columns: 2fr 1fr 1fr; + width: clamp(200px, 100%, 650px); } .lastUpdated { - width : 100px; - overflow : hidden; - text-overflow : ellipsis; - word-break : break-all; - white-space : nowrap; + width: 100px; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + white-space: nowrap; } } } } } -@media screen and (max-width : 800px) { +@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); + grid-template-areas: 'tags'; + grid-template-columns: 1fr; + width: clamp(200px, 100%, 650px); } .brewPages, .lastViewed, .brewAuthors, .lastUpdated, - .storage { display : none; } + .storage { + display: none; + } } - .brewItem { transition : height 0.2s; } + .brewItem { + transition: height 0.2s; + } .detailsOpen { - display : grid; - grid-template-columns : 3fr 3fr 30px; - height : 100px; - padding : 5px; + display: grid; + grid-template-columns: 3fr 3fr 30px; + height: 100px; + padding: 5px; .text { - height : 100%; - padding : 0; + height: 100%; + padding: 0; h2 { - display : -webkit-box; - height : fit-content; - overflow : hidden; - text-overflow : ellipsis; - -webkit-line-clamp : 3; - white-space : wrap; - -webkit-box-orient : vertical; + display: -webkit-box; + height: fit-content; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 3; + white-space: wrap; + -webkit-box-orient: vertical; } } .info { - display : grid; - grid-template-areas : 'tags pages views views' + display: grid; + grid-template-areas: + 'tags pages views views' 'authors update update storage'; - grid-template-columns : 2fr 1fr 1fr 20px; - width : 100%; - height : 100%; + grid-template-columns: 2fr 1fr 1fr 20px; + width: 100%; + height: 100%; } .links { - display : flex; - flex-direction : column; - gap : 5px; + display: flex; + flex-direction: column; + gap: 5px; a, - button { margin : 0; } + button { + margin: 0; + } } } } } } -@media screen and (max-width : 650px) { +@media screen and (max-width: 650px) { .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { - grid-template-columns : 3fr 1fr; - .info { display : none; } + grid-template-columns: 3fr 1fr; + .info { + display: none; + } } .detailsOpen { - grid-template-rows : 1fr 2fr; + grid-template-rows: 1fr 2fr; .info { - display : grid; + display: grid; .lastUpdated { - width : 100px; - overflow : hidden; - text-overflow : ellipsis; - word-break : break-all; - white-space : nowrap; + width: 100px; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + white-space: nowrap; } } } diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index 982641d98..cd54b4a51 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -216,7 +216,7 @@ i { transition : color 0.2s; } - input:checked + i { color : @blue; } + input:checked + i { color : @blueLight; } } } } From fda04ba15aada2b5908dbd7b17fcd9c8cf83579d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 11 Sep 2026 16:49:29 +0200 Subject: [PATCH 16/34] adding unprefixed line clamp too --- client/homebrew/pages/basePages/listPage/brewItem/brewItem.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 853392ccc..7ff5d3a7c 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -331,6 +331,7 @@ height: fit-content; overflow: hidden; text-overflow: ellipsis; + line-clamp : 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; @@ -665,6 +666,7 @@ height: fit-content; overflow: hidden; text-overflow: ellipsis; + line-clamp:3; -webkit-line-clamp: 3; white-space: wrap; -webkit-box-orient: vertical; From 3f7516f9a1543e1ebc5756d45bf7dc4ace88f2da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 11 Sep 2026 18:04:23 +0200 Subject: [PATCH 17/34] small changes --- .../basePages/listPage/brewItem/brewItem.jsx | 2 +- .../basePages/listPage/brewItem/brewItem.less | 869 +++++++----------- 2 files changed, 352 insertions(+), 519 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx index d97fa534f..2e02a4d9f 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx @@ -122,7 +122,7 @@ const BrewItem = ({
setDetailsOpen(!detailsOpen)} > {brew.thumbnail &&
}
-

{brew.title}

+

{brew.title}

{brew.description}

diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 7ff5d3a7c..1be4fce6c 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -3,719 +3,552 @@ @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); .brewItem { - position: relative; - box-sizing: border-box; - display: inline-block; - overflow: hidden; - break-inside: avoid; - -webkit-column-break-inside: avoid; - break-inside: avoid; + position : relative; + overflow : hidden; + font-size : 15px; + break-inside : avoid; + -webkit-column-break-inside : avoid; .thumbnail { - position: absolute; - top: 0; - right: 0; - z-index: -1; - width: 150px; - height: 100%; - background-repeat: no-repeat; - background-position: right top; - background-size: contain; + position : absolute; + top : 0; + right : 0; + z-index : -1; + width : 150px; + height : 100%; + background-repeat : no-repeat; + background-position : right top; + background-size : contain; } .text { h2 { - margin-bottom: 5px; - font-size: 1.3em; - font-weight: 400; - font-family: Alata; + font-family : "Alata"; + font-size : 1.25em; } } .info { - font-size: 1.2em; - & > span { - line-height: 1.5em; - } - a { - color: inherit; - } + font-size : 0.9em; + & > span { line-height : 1.5em; } + a { color : inherit; } } .brewTags span { - display: inline-block; - padding: 2px; - margin: 2px; - font-weight: bold; - white-space: nowrap; - cursor: pointer; - background-color: #c8ac6e3b; - border: 1px solid #c8ac6e; - border-color: currentColor; - border-radius: 4px; + display : inline-block; + padding : 2px; + margin : 2px; + font-weight : bold; + white-space : nowrap; + cursor : pointer; + 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; + 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; - &::before { - content: '\f0ad'; - } + color : var(--tag-type); + background-color : rgba(from var(--tag-type) r g b / 0.231); + &::before { content : '\f0ad'; } } &.group { - color: #000000; - background-color: #5050503b; - &::before { - content: '\f500'; - } + 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; - &::before { - content: '\f05a'; - } + color : var(--tag-meta); + background-color : rgba(from var(--tag-meta) r g b / 0.231); + &::before { content : '\f05a'; } } &.system { - color: #800000; - background-color: #8000003b; - &::before { - content: '\f518'; - } - } - } - &:nth-child(2n + 1) { - margin-right: 0px; - } - .links { - text-align: center; - background-color: fade(black, 60%); - a, - button { - display: block; - width: 100%; - font-size: 1.3em; - color: white; - text-decoration: unset; - opacity: 0.6; - &:hover { - opacity: 1; - } - i { - cursor: pointer; - } + color : var(--tag-system); + background-color : rgba(from var(--tag-system) r g b / 0.231); + &::before { content : '\f518'; } } } + &:nth-child(2n + 1) { margin-right : 0px; } .googleDriveIcon { - height: 18px; - padding: 0px; - margin: -5px; + height : 18px; + padding : 0px; + margin : -5px; } .homebreweryIcon { - position: relative; - top: 5px; - left: -7.5px; - height: 18px; - padding: 0px; + position : relative; + top : 5px; + left : -7.5px; + height : 18px; + padding : 0px; } + .links { + a, + button { + display : block; + width : 100%; + font-size : 1.3em; + color : white; + text-decoration : unset; + i { cursor : pointer; } + } + } + } .grid > .brewItem { - width: clamp(300px, 48%, 500px); - min-height: 125px; - padding: 5px 15px 2px 6px; - padding-right: 20px; - background-color: #cab2802e; - background-image: url('https://ik.imagekit.io/5eCleric/background%20note.png'); - background-size: cover; - border: 1px solid #c9ad6a; - border-radius: 5px; - box-shadow: 0px 4px 5px 0px #333333; - isolation: isolate; + display : flex; + flex-direction : column; + justify-content : space-between; + width : clamp(300px, 48%, 500px); + min-height : 125px; + padding : 5px 15px 5px 6px; + padding-right : 30px; + background-color : #CAB2802E; + background-image : url('https://ik.imagekit.io/5eCleric/background%20note.png'); + background-size : cover; + border : 1px solid #C9AD6A; + border-radius : 5px; + box-shadow : 0px 4px 5px 0px #333333; + isolation : isolate; .thumbnail { - position: absolute; - top: 0; - right: 30px; - z-index: -1; - width: 155px; - height: 100%; - background-repeat: no-repeat; - background-position: right top; - background-size: contain; - opacity: 50%; - -webkit-mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%); - mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%); + position : absolute; + top : 0; + right : 30px; + z-index : -1; + width : 155px; + height : 100%; + background-repeat : no-repeat; + background-position : right top; + background-size : contain; + opacity : 50%; + -webkit-mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%); + mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%); } .text { - min-height: 54px; - h2 { - margin-bottom: 5px; - font-size: 1.3em; - } - .description { - padding-left: 5px; - } + min-height : 54px; + h2 { margin-bottom : 5px; } + .description { padding-left : 5px; } } .info { - font-size: 0.9em; - padding-left: 5px; - & > span { - margin-right: 12px; - line-height: 1.5em; - } - } - .brewTags span { - display: inline-block; - padding: 2px; - margin: 2px; - font-weight: bold; - white-space: nowrap; - cursor: pointer; - background-color: #c8ac6e3b; - border: 1px solid #c8ac6e; - border-color: currentColor; - border-radius: 4px; - &::before { - margin-right: 3px; - font-family: 'Font Awesome 6 Free'; - font-size: 12px; - } - &.type { - color: #008000; - background-color: #0080003b; - &::before { - content: '\f0ad'; - } - } - &.group { - color: #000000; - background-color: #5050503b; - &::before { - content: '\f500'; - } - } - &.meta { - color: #000080; - background-color: #0000803b; - &::before { - content: '\f05a'; - } - } - &.system { - color: #800000; - background-color: #8000003b; - &::before { - content: '\f518'; - } - } + padding-left : 5px; + & > span { margin-right : 12px; } } .links { - position: absolute; - top: 0px; - right: 0px; - width: 2em; - height: 100%; - text-align: center; - background-color: #555; - display: flex; - flex-direction: column; - justify-content: space-evenly; + position : absolute; + top : 0px; + right : 0px; + display : flex; + flex-direction : column; + justify-content : space-evenly; + width : 2em; + height : 100%; + text-align : center; + background-color : #555555; a, button { - display: block; - width: 100%; - font-size: 1.1em; - color: white; - text-decoration: unset; - opacity: 0.6; - &:hover { - opacity: 1; - } - i { - cursor: pointer; - } + display : block; + width : 100%; + font-size : 1.1em; + color : white; + text-decoration : unset; + opacity : 0.6; + &:hover { opacity : 1; } + i { cursor : pointer; } } } - .googleDriveIcon { - height: 18px; - padding: 0px; - margin: -5px; - } - .homebreweryIcon { - position: relative; - top: 5px; - left: -7.5px; - height: 18px; - padding: 0px; - } } .list > .brewItem { - display: grid; - grid-template-columns: 2fr 3fr 1fr; - align-items: center; - width: 100%; - height: 50px; - min-height: unset; - overflow: visible; - font-size: 12px; - color: rgb(2, 2, 2); - background: #efefef; + display : grid; + grid-template-columns : 35% 3fr 150px; + gap : 10px; + align-items : center; + width : 100%; + height : 50px; + color : #000000; + background : #EEEEEE; .text { - display: grid; - align-content: center; - width: 100%; - height: 100%; - min-height: unset; - padding-inline: 10px; + padding-left : 10px; h2 { - align-content: center; - height: 100%; - min-height: 1.4em; - overflow: hidden; - text-overflow: ellipsis; - font-size: 1.6em; - font-weight: 900; - vertical-align: middle; - white-space: nowrap; + align-content : center; + min-height : 1.4em; + overflow : hidden; + text-overflow : ellipsis; + font-weight : 900; + vertical-align : middle; + white-space : nowrap; } - .description { - display: none; - } + .description { display : none; } } .info { - display: grid; - grid-template-areas: 'tags authors views pages update storage'; - grid-template-columns: 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px; - align-content: space-around; - align-items: center; - justify-content: end; - width: clamp(400px, 100%, 650px); - br { - display: none; - } + 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; } .brewTags { - display: inline-block; - grid-area: tags; - min-width: 100px; + display : inline-block; + grid-area : tags; + min-width : 100px; span { - color: #606060; - background-color: hsla(from #c1b673 h s l / 20%); - } - .type { - color: #518251; - background-color: hsla(from currentColor h s l / 20%); - } - .system { - color: #c55656; - background-color: hsla(from currentColor h s l / 20%); - } - .group { - color: #525252; - background-color: hsla(from currentColor h s l / 20%); - } - .meta { - color: #5050b1; - background-color: hsla(from currentColor h s l / 20%); + --tag-base : #AE9913; + --tag-type : #3D843D; + --tag-group : #525252; + --tag-meta : #5050B1; + --tag-system : #C55656; } + } .brewAuthors { - display: inline-block; - display: -webkit-box; - grid-area: authors; - width: 150px; - height: fit-content; - overflow: hidden; - text-overflow: ellipsis; - line-clamp : 3; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; + display : -webkit-box; + grid-area : authors; + align-content : center; + width : 150px; + height : 40px; + overflow : hidden; + text-overflow : ellipsis; + -webkit-line-clamp : 3; + line-clamp : 3; + -webkit-box-orient : vertical; - &:has(a:only-of-type) { - width: fit-content; - } + &:has(a:only-of-type) { width : fit-content; } } .lastViewed { - display: inline-block; - grid-area: views; - min-width: 50px; + display : inline-block; + grid-area : views; + min-width : 50px; } .brewPages { - display: inline-block; - grid-area: pages; - min-width: 40px; + display : inline-block; + grid-area : pages; + min-width : 40px; } [title*='Created'] { - display: inline-block; - grid-area: update; + display : inline-block; + grid-area : update; } [title*='Storage'] { - display: inline-block; - grid-area: storage; - filter: drop-shadow(0 0 10px white); + display : inline-block; + grid-area : storage; + filter : drop-shadow(0 0 10px white); } .brewTags:has(span:nth-of-type(4)) { - position: relative; - display: flex; - flex-wrap: wrap; - overflow: hidden; + position : relative; + display : flex; + flex-wrap : wrap; + overflow : hidden; - span:nth-of-type(n + 2) { - display: none; - } + span:nth-of-type(n + 2) { display : none; } &:hover { - position: absolute; - top: 0; - z-index: 100; - width: min-content; - height: max-content; - padding: 10px; - overflow: visible; - background: #707070; + position : absolute; + top : 0; + z-index : 100; + width : min-content; + height : max-content; + padding : 10px; + overflow : visible; + background : #707070; - span:nth-of-type(n + 4) { - display: block; - } + span:nth-of-type(n + 4) { display : block; } &::after { - position: absolute; - top: 48px; - right: 0; - bottom: 0; - left: 0; - z-index: -1; - display: block; - height: calc(100% - 48px); - content: ''; - background: #707070; - border-inline: 1px solid gold; - border-bottom: 1px solid gold; - border-bottom-right-radius: 5px; - border-bottom-left-radius: 5px; + position : absolute; + top : 48px; + right : 0; + bottom : 0; + left : 0; + z-index : -1; + display : block; + height : calc(100% - 48px); + content : ''; + background : #707070; + border-inline : 1px solid gold; + border-bottom : 1px solid gold; + border-bottom-right-radius : 5px; + border-bottom-left-radius : 5px; } } } } .links { - position: relative; - display: flex; - align-items: center; - justify-content: space-evenly; - width: 100%; - height: 100%; - background: none; - opacity: 1; + position : relative; + display : flex; + align-items : center; + justify-content : space-evenly; + height : 100%; - > a { - opacity: 0.8; - - &:hover { - opacity: 1; - } - } - - .editLink { - color: @green; - } - .deleteLink { - color: @red; - } - - .shareLink { - color: deepskyblue; - } - - .downloadLink { - color: coral; + a, button { + align-content : center; + height : 100%; + text-align : center; + &:hover { background-color : hsl(from currentColor h 30% 90%); } } + + .shareLink { color : @yellow; } + .editLink { color : @green; } + .downloadLink { color : @blueLight; } + .deleteLink { color : @red; } } } .card > .brewItem { - position: relative; - display: flex; - flex-direction: column; - justify-content: flex-end; - width: 300px; - height: 400px; - padding: 10px; - padding-top: 100px; - padding-bottom: 50px; - font-size: 12px; - color: white; - background-color: grey; - background-image: url('@themes/assets/naturalCritLogoBlack.svg'); - background-repeat: no-repeat; - background-position: center 20%; - background-size: 60%; - border: 1px solid; - border-radius: 10px; - background-blend-mode: soft-light; - isolation: isolate; + display : flex; + flex-direction : column; + gap : 5px; + justify-content : flex-end; + width : 300px; + height : 400px; + padding : 10px; + padding-top : 100px; + padding-bottom : 50px; + color : white; + background-color : grey; + background-image : url('@themes/assets/naturalCritLogoBlack.svg'); + background-repeat : no-repeat; + background-position : center 20%; + background-size : 60%; + border : 1px solid; + border-radius : 10px; + background-blend-mode : soft-light; + isolation : isolate; &::before { - position: absolute; - right: 0; - bottom: 0; - left: 0; - z-index: -1; - display: block; - height: 50%; - content: ''; - background-image: linear-gradient(0deg, #777777ff 0, #77777700 90%); - transition: height 0.2s; + position : absolute; + right : 0; + bottom : 0; + left : 0; + z-index : -1; + display : block; + height : 50%; + content : ''; + background-image : linear-gradient(0deg, #777777FF 0, #77777700 90%); + transition : height 0.2s; } &:hover { &::before { - height: 100%; - background-image: linear-gradient(0deg, #777777ff 0, #777777ff 42%, #77777700 55%); - } - .text .description { - height: fit-content; + height : 100%; + background-image : linear-gradient(0deg, #777777FF 0, #777777FF 55%, #77777700 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; + position : absolute; + top : 0; + left : 0; + z-index : -2; + width : 100%; + height : 100%; + background-repeat : no-repeat; + background-position : right top; + background-size : cover; } .text { - filter: drop-shadow(0 1px 4px black); + filter : drop-shadow(0 1px 4px black); - h2 { - font-size: 1.6em; - font-weight: 900; - } + h2 { font-weight : 900; } .description { - height: 0; - overflow: hidden; - transition: height 0.2s; + height : 0; + overflow : hidden; + transition : height 0.2s; } } .info { - display: grid; - grid-template-areas: - 'tags tags tags tags' + 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 black); + grid-template-columns : 1fr 1fr 1fr 30px; + height : 110px; + filter : drop-shadow(0 1px 2px black); .brewTags { - grid-area: tags; - color: black; + grid-area : tags; + color : black; - i { - color: white; - } - > 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; + i { color : white; } + > 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 { - position: absolute; - right: 0; - bottom: 0; - left: 0; - display: flex; - height: 40px; + position : absolute; + right : 0; + bottom : 0; + left : 0; + display : flex; + height : 40px; } } -@media screen and (max-width: 1400px) { +@media screen and (max-width : 1400px) { .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { - grid-template-columns: 3fr 2.5fr 1fr; + grid-template-columns : 35% 3fr 150px; .info { - grid-template-areas: 'tags update storage'; - grid-template-columns: 2fr 1fr 20px; - width: clamp(200px, 100%, 650px); + grid-template-areas : 'tags update storage'; + grid-template-columns : 2fr 1fr 20px; + width : clamp(200px, 100%, 650px); } .brewPages, .lastViewed, - .brewAuthors { - display: none; - } + .brewAuthors { display : none; } } .brewItem { - transition: height 0.2s; - } - .detailsOpen { - height: 70px; + grid-template-columns : 25% 3fr 150px; + transition : height 0.2s; } + .detailsOpen { height : 70px; } } } } -@media screen and (max-width: 1200px) { +@media screen and (max-width : 1200px) { .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { - grid-template-columns: 3fr 2fr 1fr; + grid-template-columns : 35% 3fr 150px; .info { - grid-template-areas: 'tags storage'; - grid-template-columns: 1fr 20px; - width: clamp(200px, 100%, 650px); + grid-template-areas : 'tags storage'; + grid-template-columns : 1fr 20px; + width : clamp(200px, 100%, 650px); } .brewPages, .lastViewed, .brewAuthors, - .lastUpdated { - display: none; - } + .lastUpdated { display : none; } } .detailsOpen { - grid-template-columns: 3fr 2fr 1fr; + height : 100px; .info { - display: grid; - grid-template-areas: - 'tags views pages' - 'authors update storage'; - grid-template-rows: 1fr 1fr; - grid-template-columns: 2fr 1fr 1fr; - width: clamp(200px, 100%, 650px); + display : grid; + 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 { - width: 100px; - overflow: hidden; - text-overflow: ellipsis; - word-break: break-all; - white-space: nowrap; + max-width : 120px; + overflow : hidden; + text-overflow : ellipsis; + word-break : break-all; + white-space : nowrap; } } } } } -@media screen and (max-width: 800px) { +@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); + grid-template-areas : 'tags'; + grid-template-columns : 1fr; + width : clamp(200px, 100%, 650px); } .brewPages, .lastViewed, .brewAuthors, .lastUpdated, - .storage { - display: none; - } + .storage { display : none; } } - .brewItem { - transition: height 0.2s; - } + .brewItem { transition : height 0.2s; } .detailsOpen { - display: grid; - grid-template-columns: 3fr 3fr 30px; - height: 100px; - padding: 5px; + display : grid; + grid-template-columns : 3fr 3fr 30px; + height : 100px; + padding : 5px; .text { - height: 100%; - padding: 0; + height : 100%; + padding : 0; h2 { - display: -webkit-box; - height: fit-content; - overflow: hidden; - text-overflow: ellipsis; - line-clamp:3; - -webkit-line-clamp: 3; - white-space: wrap; - -webkit-box-orient: vertical; + 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' + display : grid; + grid-template-areas : 'tags pages views views' 'authors update update storage'; - grid-template-columns: 2fr 1fr 1fr 20px; - width: 100%; - height: 100%; + grid-template-columns : 2fr 1fr 1fr 20px; + width : 100%; + height : 100%; } .links { - display: flex; - flex-direction: column; - gap: 5px; + display : flex; + flex-direction : column; + gap : 5px; a, - button { - margin: 0; - } + button { margin : 0; } } } } } } -@media screen and (max-width: 650px) { +@media screen and (max-width : 650px) { .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { - grid-template-columns: 3fr 1fr; - .info { - display: none; - } + grid-template-columns : 3fr 1fr; + .info { display : none; } } .detailsOpen { - grid-template-rows: 1fr 2fr; + grid-template-rows : 1fr 2fr; .info { - display: grid; + display : grid; .lastUpdated { - width: 100px; - overflow: hidden; - text-overflow: ellipsis; - word-break: break-all; - white-space: nowrap; + width : 100px; + overflow : hidden; + text-overflow : ellipsis; + word-break : break-all; + white-space : nowrap; } } } From 467e5ee87f386d364ce8a5194982df0ac93ddcc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 12 Sep 2026 14:52:37 +0200 Subject: [PATCH 18/34] simplify css --- .../basePages/listPage/brewItem/brewItem.less | 75 ++++--------------- 1 file changed, 15 insertions(+), 60 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 1be4fce6c..b2f183e71 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -1,13 +1,15 @@ @import '@sharedStyles/core.less'; @import '@themes/assets/assets.less'; @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); - .brewItem { + display:flex; + flex-direction : column; position : relative; overflow : hidden; font-size : 15px; break-inside : avoid; -webkit-column-break-inside : avoid; + isolation : isolate; .thumbnail { position : absolute; top : 0; @@ -45,13 +47,11 @@ 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 : var(--tag-type); background-color : rgba(from var(--tag-type) r g b / 0.231); @@ -91,18 +91,19 @@ button { display : block; width : 100%; + font-size : 1.3em; color : white; text-decoration : unset; + align-content : center; + height : 100%; + text-align : center; + i { cursor : pointer; } } } - } - .grid > .brewItem { - display : flex; - flex-direction : column; justify-content : space-between; width : clamp(300px, 48%, 500px); min-height : 125px; @@ -162,7 +163,6 @@ } } } - .list > .brewItem { display : grid; grid-template-columns : 35% 3fr 150px; @@ -170,25 +170,21 @@ align-items : center; width : 100%; height : 50px; - color : #000000; - background : #EEEEEE; - + color : white; + background : #666; + .thumbnail { display:none; } .text { padding-left : 10px; - h2 { align-content : center; min-height : 1.4em; overflow : hidden; text-overflow : ellipsis; - font-weight : 900; vertical-align : middle; white-space : nowrap; } - .description { display : none; } } - .info { display : grid; grid-template-areas : 'tags authors pages views update storage'; @@ -202,7 +198,6 @@ display : inline-block; grid-area : tags; min-width : 100px; - span { --tag-base : #AE9913; --tag-type : #3D843D; @@ -210,7 +205,6 @@ --tag-meta : #5050B1; --tag-system : #C55656; } - } .brewAuthors { display : -webkit-box; @@ -223,10 +217,8 @@ -webkit-line-clamp : 3; line-clamp : 3; -webkit-box-orient : vertical; - &:has(a:only-of-type) { width : fit-content; } } - .lastViewed { display : inline-block; grid-area : views; @@ -246,15 +238,12 @@ grid-area : storage; filter : drop-shadow(0 0 10px white); } - .brewTags:has(span:nth-of-type(4)) { position : relative; display : flex; flex-wrap : wrap; overflow : hidden; - span:nth-of-type(n + 2) { display : none; } - &:hover { position : absolute; top : 0; @@ -264,9 +253,7 @@ padding : 10px; overflow : visible; background : #707070; - span:nth-of-type(n + 4) { display : block; } - &::after { position : absolute; top : 48px; @@ -286,40 +273,32 @@ } } } - .links { position : relative; display : flex; align-items : center; justify-content : space-evenly; height : 100%; - a, button { align-content : center; height : 100%; text-align : center; &:hover { background-color : hsl(from currentColor h 30% 90%); } } - .shareLink { color : @yellow; } .editLink { color : @green; } .downloadLink { color : @blueLight; } .deleteLink { color : @red; } } } - .card > .brewItem { - display : flex; - flex-direction : column; gap : 5px; justify-content : flex-end; width : 300px; height : 400px; - padding : 10px; - padding-top : 100px; - padding-bottom : 50px; + padding : 100px 10px 50px; color : white; - background-color : grey; + background-color : #555; background-image : url('@themes/assets/naturalCritLogoBlack.svg'); background-repeat : no-repeat; background-position : center 20%; @@ -327,8 +306,6 @@ border : 1px solid; border-radius : 10px; background-blend-mode : soft-light; - isolation : isolate; - &::before { position : absolute; right : 0; @@ -338,18 +315,16 @@ display : block; height : 50%; content : ''; - background-image : linear-gradient(0deg, #777777FF 0, #77777700 90%); + background-image : linear-gradient(0deg, #555F 0, #5550 90%); transition : height 0.2s; } - &:hover { &::before { height : 100%; - background-image : linear-gradient(0deg, #777777FF 0, #777777FF 55%, #77777700 65%); + background-image : linear-gradient(0deg, #555F 0, #555F 55%, #5550 65%); } .text .description { height : fit-content; } } - .thumbnail { position : absolute; top : 0; @@ -361,19 +336,15 @@ background-position : right top; background-size : cover; } - .text { filter : drop-shadow(0 1px 4px black); - h2 { font-weight : 900; } - .description { height : 0; overflow : hidden; transition : height 0.2s; } } - .info { display : grid; grid-template-areas : 'tags tags tags tags' @@ -383,11 +354,9 @@ grid-template-columns : 1fr 1fr 1fr 30px; height : 110px; filter : drop-shadow(0 1px 2px black); - .brewTags { grid-area : tags; color : black; - i { color : white; } > span { background : hsl(from currentColor h 20% 80%); } } @@ -397,7 +366,6 @@ .lastUpdated { grid-area : update; } .storage { grid-area : storage; } } - .links { position : absolute; right : 0; @@ -407,7 +375,6 @@ height : 40px; } } - @media screen and (max-width : 1400px) { .brewCollection .brewGroup { &.list { @@ -418,7 +385,6 @@ grid-template-columns : 2fr 1fr 20px; width : clamp(200px, 100%, 650px); } - .brewPages, .lastViewed, .brewAuthors { display : none; } @@ -431,7 +397,6 @@ } } } - @media screen and (max-width : 1200px) { .brewCollection .brewGroup { &.list { @@ -442,7 +407,6 @@ grid-template-columns : 1fr 20px; width : clamp(200px, 100%, 650px); } - .brewPages, .lastViewed, .brewAuthors, @@ -450,7 +414,6 @@ } .detailsOpen { height : 100px; - .info { display : grid; grid-template-areas : 'tags views pages .' @@ -470,7 +433,6 @@ } } } - @media screen and (max-width : 800px) { .brewCollection .brewGroup { &.list { @@ -480,25 +442,21 @@ grid-template-columns : 1fr; width : clamp(200px, 100%, 650px); } - .brewPages, .lastViewed, .brewAuthors, .lastUpdated, .storage { display : none; } } - .brewItem { transition : height 0.2s; } .detailsOpen { display : grid; grid-template-columns : 3fr 3fr 30px; height : 100px; padding : 5px; - .text { height : 100%; padding : 0; - h2 { display : -webkit-box; height : fit-content; @@ -510,7 +468,6 @@ -webkit-box-orient : vertical; } } - .info { display : grid; grid-template-areas : 'tags pages views views' @@ -530,7 +487,6 @@ } } } - @media screen and (max-width : 650px) { .brewCollection .brewGroup { &.list { @@ -542,7 +498,6 @@ grid-template-rows : 1fr 2fr; .info { display : grid; - .lastUpdated { width : 100px; overflow : hidden; From 1224cf70113775a583bce114edb4591a031bc9a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 12 Sep 2026 14:55:15 +0200 Subject: [PATCH 19/34] lint --- .../basePages/listPage/brewItem/brewItem.less | 24 +++++++++---------- .../pages/basePages/listPage/listPage.less | 22 ++++++++--------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index b2f183e71..04832f607 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -2,14 +2,14 @@ @import '@themes/assets/assets.less'; @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); .brewItem { - display:flex; - flex-direction : column; position : relative; + display : flex; + flex-direction : column; overflow : hidden; font-size : 15px; + isolation : isolate; break-inside : avoid; -webkit-column-break-inside : avoid; - isolation : isolate; .thumbnail { position : absolute; top : 0; @@ -23,7 +23,7 @@ } .text { h2 { - font-family : "Alata"; + font-family : 'Alata'; font-size : 1.25em; } } @@ -90,14 +90,14 @@ a, button { display : block; + align-content : center; width : 100%; + height : 100%; font-size : 1.3em; color : white; + text-align : center; text-decoration : unset; - align-content : center; - height : 100%; - text-align : center; i { cursor : pointer; } } @@ -171,8 +171,8 @@ width : 100%; height : 50px; color : white; - background : #666; - .thumbnail { display:none; } + background : #666666; + .thumbnail { display : none; } .text { padding-left : 10px; h2 { @@ -298,7 +298,7 @@ height : 400px; padding : 100px 10px 50px; color : white; - background-color : #555; + background-color : #555555; background-image : url('@themes/assets/naturalCritLogoBlack.svg'); background-repeat : no-repeat; background-position : center 20%; @@ -315,13 +315,13 @@ display : block; height : 50%; content : ''; - background-image : linear-gradient(0deg, #555F 0, #5550 90%); + background-image : linear-gradient(0deg, #555555FF 0, #55555500 90%); transition : height 0.2s; } &:hover { &::before { height : 100%; - background-image : linear-gradient(0deg, #555F 0, #555F 55%, #5550 65%); + background-image : linear-gradient(0deg, #555555FF 0, #555555FF 55%, #55555500 65%); } .text .description { height : fit-content; } } diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index cd54b4a51..2d68b793c 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -3,14 +3,14 @@ .listPage { .content { - padding: clamp(20px, 5vh, 200px) clamp(20px, 20vw, 200px); + padding : clamp(20px, 5vh, 200px) clamp(20px, 20vw, 200px); .noBrews { - margin : 10px 0px; - font-size : 1.3em; - font-style : italic; - color:white; - font-weight:900; + margin : 10px 0px; + font-size : 1.3em; + font-style : italic; + font-weight : 900; + color : white; } .brewCollection { h1 { @@ -54,7 +54,7 @@ --columns : 4; display : grid; grid-template-columns : repeat(var(--columns), 1fr); - gap : 20px; + gap : 20px; justify-items : center; @media screen and (max-width : 1700px) {--columns : 3;} @@ -85,10 +85,10 @@ height : fit-content; font-family : 'Open Sans', sans-serif; color : white; - background : #555; - border-top : 1px solid #666; - border-bottom : 1px solid #666; - row-rule : 1px solid #666; + background : #555555; + border-top : 1px solid #666666; + border-bottom : 1px solid #666666; + row-rule : 1px solid #666666; > div { width : fit-content; From dd037fc6748ffdc8d69ed9ca54a66fdc152d82d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 2 Oct 2026 19:02:45 +0200 Subject: [PATCH 20/34] small changes --- client/homebrew/homebrew.less | 16 ----- .../basePages/listPage/brewItem/brewItem.less | 58 +++++++++---------- .../pages/basePages/listPage/listPage.less | 18 +++++- 3 files changed, 44 insertions(+), 48 deletions(-) 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.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 114ca953e..45232b669 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -2,6 +2,17 @@ @import '@themes/assets/assets.less'; @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); .brewItem { + --bg-clr : #eee; + --bg-image : @backgroundImageAlt; + --h1-clr : black; + --h2-clr : #000077; + --label-clr : black; + --input-bg : white; + --input-bg-hover : #DDDDDD; + --input-text-clr : black; + --input-placeholder-clr : grey; + + background-color:var(--bg-clr); position : relative; display : flex; flex-direction : column; @@ -110,7 +121,12 @@ text-decoration : unset; i { 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 { @@ -119,10 +135,6 @@ min-height : 125px; padding : 5px 15px 5px 6px; padding-right : 30px; - background-color : #CAB2802E; - background-image : url('https://ik.imagekit.io/5eCleric/background%20note.png'); - background-size : cover; - border : 1px solid #C9AD6A; border-radius : 5px; box-shadow : 0px 4px 5px 0px #333333; isolation : isolate; @@ -159,16 +171,11 @@ width : 2em; height : 100%; text-align : center; - background-color : #555555; a, button { display : block; width : 100%; font-size : 1.1em; - color : white; - text-decoration : unset; - opacity : 0.6; - &:hover { opacity : 1; } i { cursor : pointer; } } } @@ -180,8 +187,6 @@ align-items : center; width : 100%; height : 50px; - color : white; - background : #666666; .thumbnail { display : none; } .text { padding-left : 10px; @@ -209,11 +214,7 @@ grid-area : tags; min-width : 100px; span { - --tag-base : #AE9913; - --tag-type : #3D843D; - --tag-group : #525252; - --tag-meta : #5050B1; - --tag-system : #C55656; + } } .brewAuthors { @@ -293,29 +294,24 @@ align-content : center; height : 100%; text-align : center; - &:hover { background-color : hsl(from currentColor h 30% 90%); } } - .shareLink { color : @yellow; } - .editLink { color : @green; } - .downloadLink { color : @blueLight; } - .deleteLink { color : @red; } } } .card > .brewItem { + --grad-clr: hsl(from var(--bg-clr) h s l / 0); + gap : 5px; justify-content : flex-end; width : 300px; height : 400px; padding : 100px 10px 50px; - color : white; - background-color : #555555; background-image : url('@themes/assets/naturalCritLogoBlack.svg'); background-repeat : no-repeat; background-position : center 20%; - background-size : 60%; + background-size : 50%; border : 1px solid; border-radius : 10px; - background-blend-mode : soft-light; + background-blend-mode : normal; &::before { position : absolute; right : 0; @@ -325,13 +321,13 @@ display : block; height : 50%; content : ''; - background-image : linear-gradient(0deg, #555555FF 0, #55555500 90%); + background-image : linear-gradient(0deg, var(--bg-clr) 0, var(--grad-clr) 90%); transition : height 0.2s; } &:hover { &::before { height : 100%; - background-image : linear-gradient(0deg, #555555FF 0, #555555FF 55%, #55555500 65%); + background-image : linear-gradient(0deg, var(--bg-clr) 0, var(--bg-clr) 55%, var(--grad-clr) 65%); } .text .description { height : fit-content; } } @@ -347,7 +343,7 @@ background-size : cover; } .text { - filter : drop-shadow(0 1px 4px black); + filter:drop-shadow(0 1px 4px white); h2 { font-weight : 900; } .description { height : 0; @@ -356,6 +352,7 @@ } } .info { + filter:drop-shadow(0 1px 2px white); display : grid; grid-template-areas : 'tags tags tags tags' 'authors authors authors authors' @@ -363,11 +360,10 @@ 'update update storage .'; grid-template-columns : 1fr 1fr 1fr 30px; height : 110px; - filter : drop-shadow(0 1px 2px black); .brewTags { grid-area : tags; - color : black; - i { color : white; } + color : inherit; + i { color : inherit;} > span { background : hsl(from currentColor h 20% 80%); } } .brewAuthors { grid-area : authors; } diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index f56472537..acce1b65a 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -17,9 +17,25 @@ margin : 20px auto; contain : unset; } -.listPage { +.sitePage.listPage { + --bg-clr: white; .content { padding : clamp(20px, 5vh, 200px) clamp(20px, 20vw, 200px); + scrollbar-gutter:stable; + overflow-y : scroll; + + &::-webkit-scrollbar { + width : 15px; + &:horizontal { + width : auto; + height : 20px; + } + &-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; From 1c0b9a58523b1755e3130455861c1e4cd1eb9603 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 3 Oct 2026 00:17:32 +0200 Subject: [PATCH 21/34] better ui in mobile --- .../basePages/listPage/brewItem/brewItem.less | 35 +++++++++---------- .../pages/basePages/listPage/listPage.less | 3 ++ 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 45232b669..c8efc3625 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -4,15 +4,12 @@ .brewItem { --bg-clr : #eee; --bg-image : @backgroundImageAlt; - --h1-clr : black; - --h2-clr : #000077; - --label-clr : black; - --input-bg : white; - --input-bg-hover : #DDDDDD; - --input-text-clr : black; - --input-placeholder-clr : grey; + --text-clr : black; + --text-shadow-clr: hsl(from var(--text-clr) h calc(100% - s) calc(100% - l)); background-color:var(--bg-clr); + background-image:var(--bg-image); + background-size:cover; position : relative; display : flex; flex-direction : column; @@ -22,6 +19,7 @@ break-inside : avoid; -webkit-column-break-inside : avoid; break-inside : avoid; + color:var(--text-clr); .thumbnail { position : absolute; top : 0; @@ -116,7 +114,6 @@ height : 100%; font-size : 1.3em; - color : white; text-align : center; text-decoration : unset; @@ -213,9 +210,6 @@ display : inline-block; grid-area : tags; min-width : 100px; - span { - - } } .brewAuthors { display : -webkit-box; @@ -247,7 +241,7 @@ [title*='Storage'] { display : inline-block; grid-area : storage; - filter : drop-shadow(0 0 10px white); + filter : drop-shadow(0 0 10px var(--text-shadow-clr)); } .brewTags:has(span:nth-of-type(4)) { position : relative; @@ -305,13 +299,12 @@ width : 300px; height : 400px; padding : 100px 10px 50px; - background-image : url('@themes/assets/naturalCritLogoBlack.svg'); + background-image : url('@themes/assets/naturalCritLogoBlack.svg'), var(--bg-image); background-repeat : no-repeat; - background-position : center 20%; - background-size : 50%; + background-position : center 20%, center; + background-size : 50%, cover; border : 1px solid; border-radius : 10px; - background-blend-mode : normal; &::before { position : absolute; right : 0; @@ -454,7 +447,13 @@ .lastUpdated, .storage { display : none; } } - .brewItem { transition : height 0.2s; } + .brewItem { + h2 { + font-size:1em; + width:200px; + } + transition : height 0.2s; + } .detailsOpen { display : grid; grid-template-columns : 3fr 3fr 30px; @@ -497,7 +496,7 @@ .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { - grid-template-columns : 3fr 1fr; + grid-template-columns : 3fr 2fr; .info { display : none; } } .detailsOpen { diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index acce1b65a..3e0799307 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -21,6 +21,9 @@ --bg-clr: white; .content { padding : clamp(20px, 5vh, 200px) clamp(20px, 20vw, 200px); + @media screen and (max-width : 800px) { + padding : clamp(20px, 5vh, 200px) clamp(20px, 5vw, 200px); + } scrollbar-gutter:stable; overflow-y : scroll; From 500f71356eabe62a66691dbc50b17e0655578efc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 3 Oct 2026 21:44:07 +0200 Subject: [PATCH 22/34] custom icons --- .../homebrew/pages/basePages/listPage/listPage.jsx | 6 +++--- .../homebrew/pages/basePages/listPage/listPage.less | 4 ++++ client/icons/compressed-grid.svg | 13 +++++++++++++ client/icons/customIcons.less | 2 ++ client/icons/format-card.svg | 6 ++++++ 5 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 client/icons/compressed-grid.svg create mode 100644 client/icons/format-card.svg diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index 2bfce14ea..76f15b471 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -294,19 +294,19 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index 3e0799307..c0a43dc8f 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -1,5 +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; @@ -21,6 +22,9 @@ --bg-clr: white; .content { padding : clamp(20px, 5vh, 200px) clamp(20px, 20vw, 200px); + @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); } 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 From d59a730ed59a95ca7fc8905c617fa49ee4297137 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Mon, 5 Oct 2026 17:44:12 +0200 Subject: [PATCH 23/34] mmake up new mixin for text ellipsis... --- shared/naturalcrit/styles/core.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/shared/naturalcrit/styles/core.less b/shared/naturalcrit/styles/core.less index 02d3dbab8..85538c4b8 100644 --- a/shared/naturalcrit/styles/core.less +++ b/shared/naturalcrit/styles/core.less @@ -32,3 +32,9 @@ html,body, #reactRoot { background-color : @silver !important; } } +.ellipsis() { + overflow : hidden; + text-overflow : ellipsis; + word-break : break-all; + white-space : nowrap; +} From b9ba9db69986ba635fbeb7f04d43e964fa9e7889 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Mon, 5 Oct 2026 17:44:30 +0200 Subject: [PATCH 24/34] linting --- client/homebrew/pages/basePages/listPage/listPage.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index c0a43dc8f..2e7933ea8 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -19,17 +19,17 @@ contain : unset; } .sitePage.listPage { - --bg-clr: white; + --bg-clr : white; .content { - padding : clamp(20px, 5vh, 200px) clamp(20px, 20vw, 200px); + 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); } - scrollbar-gutter:stable; - overflow-y : scroll; &::-webkit-scrollbar { width : 15px; From db1fc3494f8a5d26e83d3ed96e3c33fdc84943e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Mon, 5 Oct 2026 17:45:03 +0200 Subject: [PATCH 25/34] linting and simplifying --- .../basePages/listPage/brewItem/brewItem.less | 90 ++++++------------- 1 file changed, 29 insertions(+), 61 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index c8efc3625..c164c27da 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -2,24 +2,23 @@ @import '@themes/assets/assets.less'; @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); .brewItem { - --bg-clr : #eee; - --bg-image : @backgroundImageAlt; - --text-clr : black; - --text-shadow-clr: hsl(from var(--text-clr) h calc(100% - s) calc(100% - l)); - - background-color:var(--bg-clr); - background-image:var(--bg-image); - background-size:cover; + --bg-clr : #EEEEEE; + --bg-image : @backgroundImageAlt; + --text-clr : black; + --text-shadow-clr : hsl(from var(--text-clr) h calc(100% - s) calc(100% - l)); //inverted text color position : relative; display : flex; flex-direction : column; overflow : hidden; 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; - color:var(--text-clr); .thumbnail { position : absolute; top : 0; @@ -38,12 +37,8 @@ } } .info { - - & > span { line-height : 1.5em; } a { color : inherit; } - position : initial; - bottom : 2px; - font-size : 0.9em; + font-size : 0.9em; & > span { margin-right : 12px; line-height : 1.5em; @@ -92,7 +87,7 @@ &::before { content : '\f518'; } } } - &:nth-child(2n + 1) { margin-right : 0px; } + &:nth-child(2n + 1) { margin-right : 0; } .googleDriveIcon { height : 18px; padding : 0px; @@ -106,6 +101,10 @@ padding : 0px; } .links { + position : absolute; + right : 0; + display : flex; + height:100%; a, button { display : block; @@ -133,8 +132,7 @@ padding : 5px 15px 5px 6px; padding-right : 30px; border-radius : 5px; - box-shadow : 0px 4px 5px 0px #333333; - isolation : isolate; + box-shadow : 0 4px 5px 0px #333333; .thumbnail { position : absolute; top : 0; @@ -154,20 +152,11 @@ h2 { margin-bottom : 5px; } .description { padding-left : 5px; } } - .info { - padding-left : 5px; - & > span { margin-right : 12px; } - } + .info { padding-left : 5px; } .links { - position : absolute; - top : 0px; - right : 0px; - display : flex; + top : 0; flex-direction : column; - justify-content : space-evenly; width : 2em; - height : 100%; - text-align : center; a, button { display : block; @@ -184,16 +173,13 @@ align-items : center; width : 100%; height : 50px; - .thumbnail { display : none; } + .thumbnail { display : none; } .text { padding-left : 10px; h2 { + .ellipsis(); align-content : center; min-height : 1.4em; - overflow : hidden; - text-overflow : ellipsis; - vertical-align : middle; - white-space : nowrap; } .description { display : none; } } @@ -212,13 +198,12 @@ min-width : 100px; } .brewAuthors { + .ellipsis(); display : -webkit-box; grid-area : authors; align-content : center; width : 150px; height : 40px; - overflow : hidden; - text-overflow : ellipsis; -webkit-line-clamp : 3; line-clamp : 3; -webkit-box-orient : vertical; @@ -280,10 +265,6 @@ } .links { position : relative; - display : flex; - align-items : center; - justify-content : space-evenly; - height : 100%; a, button { align-content : center; height : 100%; @@ -292,7 +273,7 @@ } } .card > .brewItem { - --grad-clr: hsl(from var(--bg-clr) h s l / 0); + --grad-clr : hsl(from var(--bg-clr) h s l / 0); gap : 5px; justify-content : flex-end; @@ -336,7 +317,7 @@ background-size : cover; } .text { - filter:drop-shadow(0 1px 4px white); + filter : drop-shadow(0 1px 4px white); h2 { font-weight : 900; } .description { height : 0; @@ -345,7 +326,6 @@ } } .info { - filter:drop-shadow(0 1px 2px white); display : grid; grid-template-areas : 'tags tags tags tags' 'authors authors authors authors' @@ -353,6 +333,7 @@ 'update update storage .'; grid-template-columns : 1fr 1fr 1fr 30px; height : 110px; + filter : drop-shadow(0 1px 2px white); .brewTags { grid-area : tags; color : inherit; @@ -366,11 +347,8 @@ .storage { grid-area : storage; } } .links { - position : absolute; - right : 0; bottom : 0; left : 0; - display : flex; height : 40px; } } @@ -404,7 +382,6 @@ .info { grid-template-areas : 'tags storage'; grid-template-columns : 1fr 20px; - width : clamp(200px, 100%, 650px); } .brewPages, .lastViewed, @@ -414,7 +391,6 @@ .detailsOpen { height : 100px; .info { - display : grid; grid-template-areas : 'tags views pages .' 'authors update update storage'; grid-template-rows : 1fr 1fr; @@ -422,11 +398,8 @@ width : clamp(200px, 100%, 650px); } .lastUpdated { + .ellipsis(); max-width : 120px; - overflow : hidden; - text-overflow : ellipsis; - word-break : break-all; - white-space : nowrap; } } } @@ -449,14 +422,14 @@ } .brewItem { h2 { - font-size:1em; - width:200px; + width : 200px; + font-size : 1em; } transition : height 0.2s; } .detailsOpen { display : grid; - grid-template-columns : 3fr 3fr 30px; + grid-template-columns : 1fr 4fr 30px; height : 100px; padding : 5px; .text { @@ -500,15 +473,10 @@ .info { display : none; } } .detailsOpen { - grid-template-rows : 1fr 2fr; .info { - display : grid; .lastUpdated { + .ellipsis(); width : 100px; - overflow : hidden; - text-overflow : ellipsis; - word-break : break-all; - white-space : nowrap; } } } From e94e69c0f543303924cf6bf5ce82fc280811b07e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 6 Oct 2026 20:12:11 +0200 Subject: [PATCH 26/34] changes --- client/homebrew/pages/basePages/listPage/brewItem/brewItem.less | 1 + client/homebrew/pages/basePages/listPage/listPage.less | 1 + 2 files changed, 2 insertions(+) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index c164c27da..73c7c907c 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -286,6 +286,7 @@ background-size : 50%, cover; border : 1px solid; border-radius : 10px; + box-shadow : 0 4px 5px #222; &::before { position : absolute; right : 0; diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index 2e7933ea8..4267bb982 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -18,6 +18,7 @@ margin : 20px auto; contain : unset; } + .sitePage.listPage { --bg-clr : white; .content { From 14a923ecfb27c23d2dc4934bfce5833e06dc246f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 6 Oct 2026 22:29:36 +0200 Subject: [PATCH 27/34] fix small things --- .../basePages/listPage/brewItem/brewItem.less | 77 +++++++------------ 1 file changed, 27 insertions(+), 50 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 73c7c907c..4fb6a0052 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -2,7 +2,7 @@ @import '@themes/assets/assets.less'; @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); .brewItem { - --bg-clr : #EEEEEE; + --bg-clr : #EEE; --bg-image : @backgroundImageAlt; --text-clr : black; --text-shadow-clr : hsl(from var(--text-clr) h calc(100% - s) calc(100% - l)); //inverted text color @@ -68,7 +68,7 @@ --tag-system : #800000; &.type { color : var(--tag-type); - background-color : rgba(from var(--tag-type) r g b / 0.231); + background-color : rgba(from var(--tag-type) r g b / 0.2); &::before { content : '\f0ad'; } } &.group { @@ -78,19 +78,19 @@ } &.meta { color : var(--tag-meta); - background-color : rgba(from var(--tag-meta) r g b / 0.231); + background-color : rgba(from var(--tag-meta) r g b / 0.2); &::before { content : '\f05a'; } } &.system { color : var(--tag-system); - background-color : rgba(from var(--tag-system) r g b / 0.231); + background-color : rgba(from var(--tag-system) r g b / 0.2); &::before { content : '\f518'; } } } &:nth-child(2n + 1) { margin-right : 0; } .googleDriveIcon { height : 18px; - padding : 0px; + padding : 0; margin : -5px; } .homebreweryIcon { @@ -98,7 +98,7 @@ top : 5px; left : -7.5px; height : 18px; - padding : 0px; + padding : 0; } .links { position : absolute; @@ -132,7 +132,7 @@ padding : 5px 15px 5px 6px; padding-right : 30px; border-radius : 5px; - box-shadow : 0 4px 5px 0px #333333; + box-shadow : 0 4px 5px 0 #333; .thumbnail { position : absolute; top : 0; @@ -144,8 +144,8 @@ background-position : right top; background-size : contain; opacity : 50%; - -webkit-mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%); - mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%); + -webkit-mask-image : linear-gradient(80deg, #0000 20%, #050 40%); + mask-image : linear-gradient(80deg, #0000 20%, #050 40%); } .text { min-height : 54px; @@ -193,9 +193,11 @@ width : clamp(400px, 100%, 650px); br { display : none; } .brewTags { - display : inline-block; + display : inline-flex; + align-items: center; grid-area : tags; - min-width : 100px; + max-width : 100px; + width:fit-content; } .brewAuthors { .ellipsis(); @@ -233,34 +235,7 @@ display : flex; flex-wrap : wrap; overflow : hidden; - span:nth-of-type(n + 2) { display : none; } - &:hover { - position : absolute; - top : 0; - z-index : 100; - width : min-content; - height : max-content; - padding : 10px; - overflow : visible; - background : #707070; - span:nth-of-type(n + 4) { display : block; } - &::after { - position : absolute; - top : 48px; - right : 0; - bottom : 0; - left : 0; - z-index : -1; - display : block; - height : calc(100% - 48px); - content : ''; - background : #707070; - border-inline : 1px solid gold; - border-bottom : 1px solid gold; - border-bottom-right-radius : 5px; - border-bottom-left-radius : 5px; - } - } + span:nth-of-type(n + 4) { display : none; } } } .links { @@ -273,8 +248,6 @@ } } .card > .brewItem { - --grad-clr : hsl(from var(--bg-clr) h s l / 0); - gap : 5px; justify-content : flex-end; width : 300px; @@ -286,7 +259,7 @@ background-size : 50%, cover; border : 1px solid; border-radius : 10px; - box-shadow : 0 4px 5px #222; + box-shadow : 0 4px 5px #222; &::before { position : absolute; right : 0; @@ -296,13 +269,13 @@ display : block; height : 50%; content : ''; - background-image : linear-gradient(0deg, var(--bg-clr) 0, var(--grad-clr) 90%); - transition : height 0.2s; + 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%, var(--grad-clr) 65%); + 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; } } @@ -323,7 +296,7 @@ .description { height : 0; overflow : hidden; - transition : height 0.2s; + transition : height @defaultDuration; } } .info { @@ -357,7 +330,6 @@ .brewCollection .brewGroup { &.list { .brewItem:not(.detailsOpen) { - grid-template-columns : 35% 3fr 150px; .info { grid-template-areas : 'tags update storage'; grid-template-columns : 2fr 1fr 20px; @@ -368,10 +340,15 @@ .brewAuthors { display : none; } } .brewItem { + transition : height @defaultDuration; + cursor:pointer; + &:hover {box-shadow: 0 0 5px var(--bg-clr); + filter:brightness(.97) } + } + .detailsOpen { grid-template-columns : 25% 3fr 150px; - transition : height 0.2s; + height : 70px; } - .detailsOpen { height : 70px; } } } } @@ -426,7 +403,7 @@ width : 200px; font-size : 1em; } - transition : height 0.2s; + transition : height @defaultDuration; } .detailsOpen { display : grid; From 414c8e1200d49bfc79e8fbe5491fa8f6e223b9bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 6 Oct 2026 22:31:23 +0200 Subject: [PATCH 28/34] add comment on ellipsis --- shared/naturalcrit/styles/core.less | 1 + 1 file changed, 1 insertion(+) diff --git a/shared/naturalcrit/styles/core.less b/shared/naturalcrit/styles/core.less index 85538c4b8..5ea1fad18 100644 --- a/shared/naturalcrit/styles/core.less +++ b/shared/naturalcrit/styles/core.less @@ -37,4 +37,5 @@ html,body, #reactRoot { text-overflow : ellipsis; word-break : break-all; white-space : nowrap; + //remember, for ellipsis to work, an explicit width must be set } From 95f18df4906d9ac4b734abe1fc2f87ca040d0fe3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 6 Oct 2026 22:43:09 +0200 Subject: [PATCH 29/34] swap order --- .../basePages/listPage/brewItem/brewItem.less | 187 +++++++++--------- 1 file changed, 90 insertions(+), 97 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 4fb6a0052..4797660c9 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -5,14 +5,14 @@ --bg-clr : #EEE; --bg-image : @backgroundImageAlt; --text-clr : black; - --text-shadow-clr : hsl(from var(--text-clr) h calc(100% - s) calc(100% - l)); //inverted text color + --text-shadow-clr : white; + position : relative; display : flex; flex-direction : column; overflow : hidden; font-size : 15px; color : var(--text-clr); - background-color : var(--bg-clr); background-image : var(--bg-image); background-size : cover; @@ -22,13 +22,16 @@ .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; background-size : contain; + opacity : 50%; + -webkit-mask-image : linear-gradient(80deg, #0000 20%, #050 40%); + mask-image : linear-gradient(80deg, #0000 20%, #050 40%); } .text { h2 { @@ -133,20 +136,6 @@ padding-right : 30px; border-radius : 5px; box-shadow : 0 4px 5px 0 #333; - .thumbnail { - position : absolute; - top : 0; - right : 30px; - z-index : -1; - width : 155px; - height : 100%; - background-repeat : no-repeat; - background-position : right top; - background-size : contain; - opacity : 50%; - -webkit-mask-image : linear-gradient(80deg, #0000 20%, #050 40%); - mask-image : linear-gradient(80deg, #0000 20%, #050 40%); - } .text { min-height : 54px; h2 { margin-bottom : 5px; } @@ -166,6 +155,87 @@ } } } +.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 #222; + &::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; + mask-image:unset; + opacity:1; + } + .text { + filter : drop-shadow(0 1px 4px white); + 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; @@ -247,85 +317,8 @@ } } } -.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 : 1px solid; - border-radius : 10px; - box-shadow : 0 4px 5px #222; - &::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; - } - .text { - filter : drop-shadow(0 1px 4px white); - 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 white); - .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; - } -} + +//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 { From aa4ae35791028b482cd0b91387d19df17b18651e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 6 Oct 2026 22:48:28 +0200 Subject: [PATCH 30/34] better managing --- .../basePages/listPage/brewItem/brewItem.less | 23 +++++-------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 4797660c9..b7cf190ab 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -1,6 +1,7 @@ @import '@sharedStyles/core.less'; @import '@themes/assets/assets.less'; @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); + .brewItem { --bg-clr : #EEE; --bg-image : @backgroundImageAlt; @@ -201,7 +202,7 @@ opacity:1; } .text { - filter : drop-shadow(0 1px 4px white); + filter : drop-shadow(0 1px 4px var(--text-shadow-clr)); h2 { font-weight : 900; } .description { height : 0; @@ -346,16 +347,13 @@ } } @media screen and (max-width : 1200px) { - .brewCollection .brewGroup { - &.list { + .brewCollection .brewGroup .list { .brewItem:not(.detailsOpen) { grid-template-columns : 35% 3fr 150px; .info { grid-template-areas : 'tags storage'; grid-template-columns : 1fr 20px; } - .brewPages, - .lastViewed, .brewAuthors, .lastUpdated { display : none; } } @@ -373,22 +371,16 @@ max-width : 120px; } } - } } } @media screen and (max-width : 800px) { - .brewCollection .brewGroup { - &.list { + .brewCollection .brewGroup .list { .brewItem:not(.detailsOpen) { .info { grid-template-areas : 'tags'; grid-template-columns : 1fr; width : clamp(200px, 100%, 650px); } - .brewPages, - .lastViewed, - .brewAuthors, - .lastUpdated, .storage { display : none; } } .brewItem { @@ -432,13 +424,11 @@ a, button { margin : 0; } } - } - } + } } } @media screen and (max-width : 650px) { - .brewCollection .brewGroup { - &.list { + .brewCollection .brewGroup .list { .brewItem:not(.detailsOpen) { grid-template-columns : 3fr 2fr; .info { display : none; } @@ -451,6 +441,5 @@ } } } - } } } From 87994b0de94c059b35f08d53ee9f732989a3028b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 6 Oct 2026 23:04:24 +0200 Subject: [PATCH 31/34] lint --- .../basePages/listPage/brewItem/brewItem.less | 230 +++++++++--------- 1 file changed, 117 insertions(+), 113 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index b7cf190ab..99cac99bf 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -3,7 +3,7 @@ @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); .brewItem { - --bg-clr : #EEE; + --bg-clr : #EEEEEE; --bg-image : @backgroundImageAlt; --text-clr : black; --text-shadow-clr : white; @@ -31,8 +31,8 @@ background-position : right top; background-size : contain; opacity : 50%; - -webkit-mask-image : linear-gradient(80deg, #0000 20%, #050 40%); - mask-image : linear-gradient(80deg, #0000 20%, #050 40%); + -webkit-mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%); + mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%); } .text { h2 { @@ -108,19 +108,17 @@ position : absolute; right : 0; display : flex; - height:100%; + height : 100%; a, button { display : block; align-content : center; width : 100%; height : 100%; - font-size : 1.3em; text-align : center; text-decoration : unset; - - i { cursor : pointer; } + cursor : pointer; &:hover { background-color : hsl(from currentColor h 30% 90%); } } .shareLink { color : @yellow; } @@ -136,7 +134,7 @@ padding : 5px 15px 5px 6px; padding-right : 30px; border-radius : 5px; - box-shadow : 0 4px 5px 0 #333; + box-shadow : 0 4px 5px 0 #333333; .text { min-height : 54px; h2 { margin-bottom : 5px; } @@ -168,12 +166,10 @@ background-size : 50%, cover; border : 3px solid; border-radius : 10px; - box-shadow : 0 4px 5px #222; + box-shadow : 0 4px 5px #222222; &::before { position : absolute; - right : 0; - bottom : 0; - left : 0; + inset : unset 0 0 0; z-index : -1; display : block; height : 50%; @@ -198,8 +194,8 @@ background-repeat : no-repeat; background-position : right top; background-size : cover; - mask-image:unset; - opacity:1; + opacity : 1; + mask-image : unset; } .text { filter : drop-shadow(0 1px 4px var(--text-shadow-clr)); @@ -263,12 +259,20 @@ justify-content : end; width : clamp(400px, 100%, 650px); br { display : none; } + span { display : inline-block; margin : 0; } .brewTags { - display : inline-flex; - align-items: center; - grid-area : tags; - max-width : 100px; - width:fit-content; + display : inline-flex; + grid-area : tags; + align-items : center; + width : fit-content; + max-width : 100px; + &:has(span:nth-of-type(4)) { + position : relative; + display : flex; + flex-wrap : wrap; + overflow : hidden; + span:nth-of-type(n + 4) { display : none; } + } } .brewAuthors { .ellipsis(); @@ -277,36 +281,34 @@ 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 { - display : inline-block; grid-area : views; min-width : 50px; } .brewPages { - display : inline-block; grid-area : pages; min-width : 40px; } - [title*='Created'] { - display : inline-block; - grid-area : update; + .lastUpdated { + display : flex; + grid-area : update; + gap : 5px; + align-items : center; } - [title*='Storage'] { - display : inline-block; + .storage { grid-area : storage; filter : drop-shadow(0 0 10px var(--text-shadow-clr)); - } - .brewTags:has(span:nth-of-type(4)) { - position : relative; - display : flex; - flex-wrap : wrap; - overflow : hidden; - span:nth-of-type(n + 4) { display : none; } + .homebreweryIcon { + top : 3px; + left : -5px; + height : 20px; + } } } .links { @@ -334,112 +336,114 @@ .brewAuthors { display : none; } } .brewItem { + cursor : pointer; transition : height @defaultDuration; - cursor:pointer; - &:hover {box-shadow: 0 0 5px var(--bg-clr); - filter:brightness(.97) } + &:hover { + box-shadow : 0 0 5px var(--bg-clr); + filter : brightness(0.97); + } } .detailsOpen { grid-template-columns : 25% 3fr 150px; - height : 70px; + 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; } + .brewItem:not(.detailsOpen) { + grid-template-columns : 35% 3fr 150px; + .info { + grid-template-areas : 'tags storage'; + grid-template-columns : 1fr 20px; } - .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; - } + .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:not(.detailsOpen) { + .info { + grid-template-areas : 'tags'; + grid-template-columns : 1fr; + width : clamp(200px, 100%, 650px); } - .brewItem { + .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 { - width : 200px; - font-size : 1em; + 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; } - transition : height @defaultDuration; } - .detailsOpen { + .info { 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; } - } - } + 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; - } + .brewItem:not(.detailsOpen) { + grid-template-columns : 3fr 2fr; + .info { display : none; } + } + .detailsOpen { + .info { + .lastUpdated { + .ellipsis(); + width : 100px; } } + } } } From 8eb7d28222432e6c16bb8b29d2f00de36fe8733e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 6 Oct 2026 23:12:25 +0200 Subject: [PATCH 32/34] last changes --- .../basePages/listPage/brewItem/brewItem.less | 57 +++++++++---------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 99cac99bf..b106b88a5 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -262,16 +262,17 @@ span { display : inline-block; margin : 0; } .brewTags { display : inline-flex; + flex-wrap : wrap; grid-area : tags; align-items : center; - width : fit-content; - max-width : 100px; - &:has(span:nth-of-type(4)) { + 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 + 4) { display : none; } + span:nth-of-type(n + 3) { display : none; } } } .brewAuthors { @@ -323,35 +324,33 @@ //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; } + .brewCollection .brewGroup.list { + .brewItem:not(.detailsOpen) { + .info { + grid-template-areas : 'tags update storage'; + grid-template-columns : 2fr 1fr 20px; + width : clamp(200px, 100%, 650px); } - .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; + .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 { + .brewCollection .brewGroup.list { .brewItem:not(.detailsOpen) { grid-template-columns : 35% 3fr 150px; .info { @@ -378,7 +377,7 @@ } } @media screen and (max-width : 800px) { - .brewCollection .brewGroup .list { + .brewCollection .brewGroup.list { .brewItem:not(.detailsOpen) { .info { grid-template-areas : 'tags'; @@ -432,7 +431,7 @@ } } @media screen and (max-width : 650px) { - .brewCollection .brewGroup .list { + .brewCollection .brewGroup.list { .brewItem:not(.detailsOpen) { grid-template-columns : 3fr 2fr; .info { display : none; } From 95714b1242329beb05379516325c1d7ca2be15e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 6 Oct 2026 23:18:49 +0200 Subject: [PATCH 33/34] restore properties --- .../homebrew/pages/basePages/listPage/brewItem/brewItem.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index b106b88a5..a98bcabb7 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -169,7 +169,9 @@ box-shadow : 0 4px 5px #222222; &::before { position : absolute; - inset : unset 0 0 0; + right : 0; + bottom : 0; + left : 0; z-index : -1; display : block; height : 50%; From 17c01b888aeb9e0c7db71a0ce1661db6abb9e2b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 6 Oct 2026 23:21:14 +0200 Subject: [PATCH 34/34] lint some more --- .../homebrew/pages/basePages/listPage/brewItem/brewItem.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index a98bcabb7..e695a786b 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -416,7 +416,8 @@ } .info { display : grid; - grid-template-areas : 'tags pages views views' + grid-template-areas : + 'tags pages views views' 'authors update update storage'; grid-template-columns : 2fr 1fr 1fr 20px; width : 100%;