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