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 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 (
<div className='brewItem'>
<div className={`brewItem${detailsOpen ? ' detailsOpen' : ''}`} onClick={() => setDetailsOpen(!detailsOpen)} >
{brew.thumbnail && <div className='thumbnail' style={{ backgroundImage: `url(${brew.thumbnail})` }}></div>}
<div className='text'>
<h2>{brew.title}</h2>
@@ -160,7 +162,7 @@ const BrewItem = ({
title={dedent` Created: ${moment(brew.createdAt).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>
{renderStorageIcon()}
</div>
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+76 -18
View File
@@ -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;
}
}
}
}
}
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 [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;
};
client/homebrew/pages/basePages/listPage/listPage.less
+13 -2
View File
@@ -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; }
}