f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-09-20 14:32:57 +00:00
Code Wiki Activity

responsiveness

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-09-09 13:56:26 +02:00
parent 96946c1bb0
commit cb4a104954
4 changed files with 97 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+5 -3
View File
@@ -1,5 +1,5 @@
import './brewItem.less'; import './brewItem.less';
import React, { useCallback } from 'react'; import React, { useCallback, useState } from 'react';
import moment from 'moment'; import moment from 'moment';
import request from '../../../../utils/request-middleware.js'; import request from '../../../../utils/request-middleware.js';
@@ -19,6 +19,8 @@ const BrewItem = ({
renderStorage = true, renderStorage = true,
})=>{ })=>{
const [detailsOpen, setDetailsOpen] = useState(false);
const deleteBrew = useCallback(()=>{ const deleteBrew = useCallback(()=>{
if(brew.authors.length <= 1) { 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; 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'; const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
return ( return (
<div className='brewItem'> <div className={`brewItem${detailsOpen ? ' detailsOpen' : ''}`} onClick={() => setDetailsOpen(!detailsOpen)} >
{brew.thumbnail && <div className='thumbnail' style={{ backgroundImage: `url(${brew.thumbnail})` }}></div>} {brew.thumbnail && <div className='thumbnail' style={{ backgroundImage: `url(${brew.thumbnail})` }}></div>}
<div className='text'> <div className='text'>
<h2>{brew.title}</h2> <h2>{brew.title}</h2>
@@ -160,7 +162,7 @@ const BrewItem = ({
title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)} title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)}
Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`} Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}
> >
<span aria-hidden='true'><i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}</span> <i className='fas fa-sync-alt' /><span aria-hidden='true'> {moment(brew.updatedAt).fromNow()}</span>
</span> </span>
{renderStorageIcon()} {renderStorageIcon()}
</div> </div>
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+76 -18
View File
@@ -125,13 +125,10 @@
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
width: 48%; width: clamp(400px, 48%, 600px);
min-width:400px;
min-height: 125px; min-height: 125px;
padding: 5px 15px 2px 6px; padding: 5px 15px 2px 6px;
padding-right: 15px; padding-right: 15px;
margin-right: 15px;
margin-bottom: 15px;
overflow: hidden; overflow: hidden;
vertical-align: top; vertical-align: top;
background-color: #cab2802e; background-color: #cab2802e;
@@ -226,9 +223,6 @@
opacity: 1; opacity: 1;
} }
} }
&:nth-child(2n) {
margin-right: 0px;
}
.links { .links {
.animate(opacity); .animate(opacity);
position: absolute; position: absolute;
@@ -276,7 +270,7 @@
min-height: unset; min-height: unset;
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 2fr 2fr 1fr; grid-template-columns: 2fr 3fr 1fr;
align-items: center; align-items: center;
color: rgb(2, 2, 2); color: rgb(2, 2, 2);
background: #efefef; background: #efefef;
@@ -309,29 +303,26 @@
} }
} }
hr {
display: none;
}
.info { .info {
width: 100%; width: clamp(400px, 100%, 650px);
display: grid; display: grid;
grid-template-areas: 'tags authors views pages update storage'; grid-template-areas: 'tags authors views pages update storage';
justify-content: end; justify-content: end;
align-content: space-around; align-content: space-around;
align-items:center; 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 { br {
display: none; display: none;
} }
.brewTags { .brewTags {
display: inline-block; display: inline-block;
grid-area: tags; grid-area: tags;
min-width:100px;
} }
[title*='Authors:'] { .brewAuthors {
display: inline-block; display: inline-block;
grid-area: authors; grid-area: authors;
height: 40px; height: fit-content;
overflow: hidden; overflow: hidden;
width: 150px; width: 150px;
overflow: hidden; overflow: hidden;
@@ -339,14 +330,21 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
&:has(a:only-of-type) {
width:fit-content;
}
} }
[title*='Last'] {
.lastViewed {
display: inline-block; display: inline-block;
grid-area: views; grid-area: views;
min-width:50px;
} }
[title*='Page'] { .brewPages {
display: inline-block; display: inline-block;
grid-area: pages; grid-area: pages;
min-width:40px;
} }
[title*='Created'] { [title*='Created'] {
display: inline-block; 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;
}
}
}
}
}
client/homebrew/pages/basePages/listPage/listPage.jsx
+3 -3
View File
@@ -21,7 +21,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
const [sortType, setSortType] = useState(query?.sort || null); const [sortType, setSortType] = useState(query?.sort || null);
const [sortDir, setSortDir] = useState(query?.dir || null); const [sortDir, setSortDir] = useState(query?.dir || null);
const [groupVisibility, setGroupVisibility] = useState({}); const [groupVisibility, setGroupVisibility] = useState({});
const [layoutMode, setLayoutMode] = useState(null); const [layoutMode, setLayoutMode] = useState(DEFAULT_LAYOUT_MODE);
const groupVisibilityRef = useRef(groupVisibility); const groupVisibilityRef = useRef(groupVisibility);
const sortTypeRef = useRef(sortType); const sortTypeRef = useRef(sortType);
@@ -52,7 +52,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
return visibility; 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); setGroupVisibility(namedBrewCollection);
setSortType(newSortType); setSortType(newSortType);
@@ -70,7 +70,6 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
}); });
localStorage.setItem(USERPAGE_SORT_TYPE, sortTypeRef.current); localStorage.setItem(USERPAGE_SORT_TYPE, sortTypeRef.current);
localStorage.setItem(USERPAGE_SORT_DIR, sortDirRef.current); localStorage.setItem(USERPAGE_SORT_DIR, sortDirRef.current);
localStorage.setItem(USERPAGE_LAYOUT_MODE, layoutMode);
}; };
const renderBrews = (brews)=>{ const renderBrews = (brews)=>{
@@ -284,6 +283,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
const handleLayoutChange = (e, mode)=>{ const handleLayoutChange = (e, mode)=>{
setLayoutMode(e.target.checked ? mode : 'grid'); setLayoutMode(e.target.checked ? mode : 'grid');
localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : 'grid');
return; return;
}; };
client/homebrew/pages/basePages/listPage/listPage.less
+13 -2
View File
@@ -20,13 +20,15 @@
.listPage { .listPage {
.content { .content {
z-index : 1; z-index : 1;
padding : 100px 250px; padding : clamp(50px, 5vh, 200px) 10vw;
.noBrews { .noBrews {
margin : 10px 0px; margin : 10px 0px;
font-size : 1.3em; font-size : 1.3em;
font-style : italic; font-style : italic;
} }
.brewCollection { .brewCollection {
width:fit-content;
h1 { h1 {
margin-bottom : 20px; margin-bottom : 20px;
font-size : 25px; font-size : 25px;
@@ -46,6 +48,14 @@
h1:hover { cursor : pointer; } h1:hover { cursor : pointer; }
.brewGroup { .brewGroup {
&.grid {
display:flex;
flex-wrap: wrap;
justify-content: center;
gap:20px;
min-width:400px;
}
&.list { &.list {
@@ -56,7 +66,8 @@
&.card { &.card {
display : flex; display : flex;
flex-wrap : wrap; flex-wrap : wrap;
column-gap:50px; column-gap:40px;
justify-content: center;
h1 { position : absolute; } h1 { position : absolute; }
} }