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