f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-09-26 00:32:58 +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;
}
}
}
}
}