f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-09-24 13:52:58 +00:00
Code Wiki Activity

small changes

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-09-11 18:04:23 +02:00
parent fda04ba15a
commit 3f7516f9a1
2 changed files with 352 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+1 -1
View File
@@ -122,7 +122,7 @@ const BrewItem = ({
<div className={`brewItem${detailsOpen ? ' detailsOpen' : ''}`} onClick={() => setDetailsOpen(!detailsOpen)} > <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 title={brew.title}>{brew.title}</h2>
<p className='description'>{brew.description}</p> <p className='description'>{brew.description}</p>
</div> </div>
<div className='info'> <div className='info'>
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+116 -283
View File
@@ -4,12 +4,10 @@
.brewItem { .brewItem {
position : relative; position : relative;
box-sizing: border-box;
display: inline-block;
overflow : hidden; overflow : hidden;
font-size : 15px;
break-inside : avoid; break-inside : avoid;
-webkit-column-break-inside : avoid; -webkit-column-break-inside : avoid;
break-inside: avoid;
.thumbnail { .thumbnail {
position : absolute; position : absolute;
top : 0; top : 0;
@@ -23,20 +21,14 @@
} }
.text { .text {
h2 { h2 {
margin-bottom: 5px; font-family : "Alata";
font-size: 1.3em; font-size : 1.25em;
font-weight: 400;
font-family: Alata;
} }
} }
.info { .info {
font-size: 1.2em; font-size : 0.9em;
& > span { & > span { line-height : 1.5em; }
line-height: 1.5em; a { color : inherit; }
}
a {
color: inherit;
}
} }
.brewTags span { .brewTags span {
display : inline-block; display : inline-block;
@@ -45,66 +37,43 @@
font-weight : bold; font-weight : bold;
white-space : nowrap; white-space : nowrap;
cursor : pointer; cursor : pointer;
background-color: #c8ac6e3b; background-color : rgba(from var(--tag-base) r g b / 0.1);
border: 1px solid #c8ac6e; border : 1px solid currentColor;
border-color: currentColor;
border-radius : 4px; border-radius : 4px;
&::before { &::before {
margin-right : 3px; margin-right : 3px;
font-family : 'Font Awesome 6 Free'; font-family : 'Font Awesome 6 Free';
font-size : 12px; font-size : 12px;
} }
--tag-base : #C8AC6E;
--tag-type : #008000;
--tag-group : #000000;
--tag-meta : #000080;
--tag-system : #800000;
&.type { &.type {
color: #008000; color : var(--tag-type);
background-color: #0080003b; background-color : rgba(from var(--tag-type) r g b / 0.231);
&::before { &::before { content : '\f0ad'; }
content: '\f0ad';
}
} }
&.group { &.group {
color: #000000; color : var(--tag-group);
background-color: #5050503b; background-color : rgba(from var(--tag-group) r g b / 0.1);
&::before { &::before { content : '\f500'; }
content: '\f500';
}
} }
&.meta { &.meta {
color: #000080; color : var(--tag-meta);
background-color: #0000803b; background-color : rgba(from var(--tag-meta) r g b / 0.231);
&::before { &::before { content : '\f05a'; }
content: '\f05a';
}
} }
&.system { &.system {
color: #800000; color : var(--tag-system);
background-color: #8000003b; background-color : rgba(from var(--tag-system) r g b / 0.231);
&::before { &::before { content : '\f518'; }
content: '\f518';
}
}
}
&:nth-child(2n + 1) {
margin-right: 0px;
}
.links {
text-align: center;
background-color: fade(black, 60%);
a,
button {
display: block;
width: 100%;
font-size: 1.3em;
color: white;
text-decoration: unset;
opacity: 0.6;
&:hover {
opacity: 1;
}
i {
cursor: pointer;
}
} }
} }
&:nth-child(2n + 1) { margin-right : 0px; }
.googleDriveIcon { .googleDriveIcon {
height : 18px; height : 18px;
padding : 0px; padding : 0px;
@@ -117,17 +86,32 @@
height : 18px; height : 18px;
padding : 0px; padding : 0px;
} }
.links {
a,
button {
display : block;
width : 100%;
font-size : 1.3em;
color : white;
text-decoration : unset;
i { cursor : pointer; }
}
}
} }
.grid > .brewItem { .grid > .brewItem {
display : flex;
flex-direction : column;
justify-content : space-between;
width : clamp(300px, 48%, 500px); width : clamp(300px, 48%, 500px);
min-height : 125px; min-height : 125px;
padding: 5px 15px 2px 6px; padding : 5px 15px 5px 6px;
padding-right: 20px; padding-right : 30px;
background-color: #cab2802e; background-color : #CAB2802E;
background-image : url('https://ik.imagekit.io/5eCleric/background%20note.png'); background-image : url('https://ik.imagekit.io/5eCleric/background%20note.png');
background-size : cover; background-size : cover;
border: 1px solid #c9ad6a; border : 1px solid #C9AD6A;
border-radius : 5px; border-radius : 5px;
box-shadow : 0px 4px 5px 0px #333333; box-shadow : 0px 4px 5px 0px #333333;
isolation : isolate; isolation : isolate;
@@ -147,78 +131,24 @@
} }
.text { .text {
min-height : 54px; min-height : 54px;
h2 { h2 { margin-bottom : 5px; }
margin-bottom: 5px; .description { padding-left : 5px; }
font-size: 1.3em;
}
.description {
padding-left: 5px;
}
} }
.info { .info {
font-size: 0.9em;
padding-left : 5px; padding-left : 5px;
& > span { & > span { margin-right : 12px; }
margin-right: 12px;
line-height: 1.5em;
}
}
.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';
}
}
} }
.links { .links {
position : absolute; position : absolute;
top : 0px; top : 0px;
right : 0px; right : 0px;
width: 2em;
height: 100%;
text-align: center;
background-color: #555;
display : flex; display : flex;
flex-direction : column; flex-direction : column;
justify-content : space-evenly; justify-content : space-evenly;
width : 2em;
height : 100%;
text-align : center;
background-color : #555555;
a, a,
button { button {
display : block; display : block;
@@ -227,117 +157,74 @@
color : white; color : white;
text-decoration : unset; text-decoration : unset;
opacity : 0.6; opacity : 0.6;
&:hover { &:hover { opacity : 1; }
opacity: 1; i { cursor : pointer; }
} }
i {
cursor: pointer;
}
}
}
.googleDriveIcon {
height: 18px;
padding: 0px;
margin: -5px;
}
.homebreweryIcon {
position: relative;
top: 5px;
left: -7.5px;
height: 18px;
padding: 0px;
} }
} }
.list > .brewItem { .list > .brewItem {
display : grid; display : grid;
grid-template-columns: 2fr 3fr 1fr; grid-template-columns : 35% 3fr 150px;
gap : 10px;
align-items : center; align-items : center;
width : 100%; width : 100%;
height : 50px; height : 50px;
min-height: unset; color : #000000;
overflow: visible; background : #EEEEEE;
font-size: 12px;
color: rgb(2, 2, 2);
background: #efefef;
.text { .text {
display: grid; padding-left : 10px;
align-content: center;
width: 100%;
height: 100%;
min-height: unset;
padding-inline: 10px;
h2 { h2 {
align-content : center; align-content : center;
height: 100%;
min-height : 1.4em; min-height : 1.4em;
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
font-size: 1.6em;
font-weight : 900; font-weight : 900;
vertical-align : middle; vertical-align : middle;
white-space : nowrap; white-space : nowrap;
} }
.description { .description { display : none; }
display: none;
}
} }
.info { .info {
display : grid; display : grid;
grid-template-areas: 'tags authors views pages update storage'; grid-template-areas : 'tags authors pages views update storage';
grid-template-columns: 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px; grid-template-columns : 2fr 150px 0.7fr 65px 1.5fr 20px;
align-content : space-around; align-content : space-around;
align-items : center; align-items : center;
justify-content : end; justify-content : end;
width : clamp(400px, 100%, 650px); width : clamp(400px, 100%, 650px);
br { br { display : none; }
display: none;
}
.brewTags { .brewTags {
display : inline-block; display : inline-block;
grid-area : tags; grid-area : tags;
min-width : 100px; min-width : 100px;
span { span {
color: #606060; --tag-base : #AE9913;
background-color: hsla(from #c1b673 h s l / 20%); --tag-type : #3D843D;
} --tag-group : #525252;
.type { --tag-meta : #5050B1;
color: #518251; --tag-system : #C55656;
background-color: hsla(from currentColor h s l / 20%);
}
.system {
color: #c55656;
background-color: hsla(from currentColor h s l / 20%);
}
.group {
color: #525252;
background-color: hsla(from currentColor h s l / 20%);
}
.meta {
color: #5050b1;
background-color: hsla(from currentColor h s l / 20%);
} }
} }
.brewAuthors { .brewAuthors {
display: inline-block;
display : -webkit-box; display : -webkit-box;
grid-area : authors; grid-area : authors;
align-content : center;
width : 150px; width : 150px;
height: fit-content; height : 40px;
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
line-clamp : 3;
-webkit-line-clamp : 3; -webkit-line-clamp : 3;
line-clamp : 3;
-webkit-box-orient : vertical; -webkit-box-orient : vertical;
&:has(a:only-of-type) { &:has(a:only-of-type) { width : fit-content; }
width: fit-content;
}
} }
.lastViewed { .lastViewed {
@@ -366,9 +253,7 @@
flex-wrap : wrap; flex-wrap : wrap;
overflow : hidden; overflow : hidden;
span:nth-of-type(n + 2) { span:nth-of-type(n + 2) { display : none; }
display: none;
}
&:hover { &:hover {
position : absolute; position : absolute;
@@ -380,9 +265,7 @@
overflow : visible; overflow : visible;
background : #707070; background : #707070;
span:nth-of-type(n + 4) { span:nth-of-type(n + 4) { display : block; }
display: block;
}
&::after { &::after {
position : absolute; position : absolute;
@@ -409,47 +292,32 @@
display : flex; display : flex;
align-items : center; align-items : center;
justify-content : space-evenly; justify-content : space-evenly;
width: 100%;
height : 100%; height : 100%;
background: none;
opacity: 1;
> a { a, button {
opacity: 0.8; align-content : center;
height : 100%;
&:hover { text-align : center;
opacity: 1; &:hover { background-color : hsl(from currentColor h 30% 90%); }
}
} }
.editLink { .shareLink { color : @yellow; }
color: @green; .editLink { color : @green; }
} .downloadLink { color : @blueLight; }
.deleteLink { .deleteLink { color : @red; }
color: @red;
}
.shareLink {
color: deepskyblue;
}
.downloadLink {
color: coral;
}
} }
} }
.card > .brewItem { .card > .brewItem {
position: relative;
display : flex; display : flex;
flex-direction : column; flex-direction : column;
gap : 5px;
justify-content : flex-end; justify-content : flex-end;
width : 300px; width : 300px;
height : 400px; height : 400px;
padding : 10px; padding : 10px;
padding-top : 100px; padding-top : 100px;
padding-bottom : 50px; padding-bottom : 50px;
font-size: 12px;
color : white; color : white;
background-color : grey; background-color : grey;
background-image : url('@themes/assets/naturalCritLogoBlack.svg'); background-image : url('@themes/assets/naturalCritLogoBlack.svg');
@@ -470,18 +338,16 @@
display : block; display : block;
height : 50%; height : 50%;
content : ''; content : '';
background-image: linear-gradient(0deg, #777777ff 0, #77777700 90%); background-image : linear-gradient(0deg, #777777FF 0, #77777700 90%);
transition : height 0.2s; transition : height 0.2s;
} }
&:hover { &:hover {
&::before { &::before {
height : 100%; height : 100%;
background-image: linear-gradient(0deg, #777777ff 0, #777777ff 42%, #77777700 55%); background-image : linear-gradient(0deg, #777777FF 0, #777777FF 55%, #77777700 65%);
}
.text .description {
height: fit-content;
} }
.text .description { height : fit-content; }
} }
.thumbnail { .thumbnail {
@@ -499,10 +365,7 @@
.text { .text {
filter : drop-shadow(0 1px 4px black); filter : drop-shadow(0 1px 4px black);
h2 { h2 { font-weight : 900; }
font-size: 1.6em;
font-weight: 900;
}
.description { .description {
height : 0; height : 0;
@@ -513,8 +376,7 @@
.info { .info {
display : grid; display : grid;
grid-template-areas: grid-template-areas : 'tags tags tags tags'
'tags tags tags tags'
'authors authors authors authors' 'authors authors authors authors'
'pages views . .' 'pages views . .'
'update update storage .'; 'update update storage .';
@@ -526,28 +388,14 @@
grid-area : tags; grid-area : tags;
color : black; color : black;
i { i { color : white; }
color: white; > span { background : hsl(from currentColor h 20% 80%); }
}
> span {
background: hsl(from currentColor h 20% 80%);
}
}
.brewAuthors {
grid-area: authors;
}
.brewPages {
grid-area: pages;
}
.lastViewed {
grid-area: views;
}
.lastUpdated {
grid-area: update;
}
.storage {
grid-area: storage;
} }
.brewAuthors { grid-area : authors; }
.brewPages { grid-area : pages; }
.lastViewed { grid-area : views; }
.lastUpdated { grid-area : update; }
.storage { grid-area : storage; }
} }
.links { .links {
@@ -564,7 +412,7 @@
.brewCollection .brewGroup { .brewCollection .brewGroup {
&.list { &.list {
.brewItem:not(.detailsOpen) { .brewItem:not(.detailsOpen) {
grid-template-columns: 3fr 2.5fr 1fr; grid-template-columns : 35% 3fr 150px;
.info { .info {
grid-template-areas : 'tags update storage'; grid-template-areas : 'tags update storage';
grid-template-columns : 2fr 1fr 20px; grid-template-columns : 2fr 1fr 20px;
@@ -573,16 +421,13 @@
.brewPages, .brewPages,
.lastViewed, .lastViewed,
.brewAuthors { .brewAuthors { display : none; }
display: none;
}
} }
.brewItem { .brewItem {
grid-template-columns : 25% 3fr 150px;
transition : height 0.2s; transition : height 0.2s;
} }
.detailsOpen { .detailsOpen { height : 70px; }
height: 70px;
}
} }
} }
} }
@@ -591,7 +436,7 @@
.brewCollection .brewGroup { .brewCollection .brewGroup {
&.list { &.list {
.brewItem:not(.detailsOpen) { .brewItem:not(.detailsOpen) {
grid-template-columns: 3fr 2fr 1fr; grid-template-columns : 35% 3fr 150px;
.info { .info {
grid-template-areas : 'tags storage'; grid-template-areas : 'tags storage';
grid-template-columns : 1fr 20px; grid-template-columns : 1fr 20px;
@@ -601,24 +446,21 @@
.brewPages, .brewPages,
.lastViewed, .lastViewed,
.brewAuthors, .brewAuthors,
.lastUpdated { .lastUpdated { display : none; }
display: none;
}
} }
.detailsOpen { .detailsOpen {
grid-template-columns: 3fr 2fr 1fr; height : 100px;
.info { .info {
display : grid; display : grid;
grid-template-areas: grid-template-areas : 'tags views pages .'
'tags views pages' 'authors update update storage';
'authors update storage';
grid-template-rows : 1fr 1fr; grid-template-rows : 1fr 1fr;
grid-template-columns: 2fr 1fr 1fr; grid-template-columns : 2fr 1fr 1fr 30px;
width : clamp(200px, 100%, 650px); width : clamp(200px, 100%, 650px);
} }
.lastUpdated { .lastUpdated {
width: 100px; max-width : 120px;
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
word-break : break-all; word-break : break-all;
@@ -643,14 +485,10 @@
.lastViewed, .lastViewed,
.brewAuthors, .brewAuthors,
.lastUpdated, .lastUpdated,
.storage { .storage { display : none; }
display: none;
}
} }
.brewItem { .brewItem { transition : height 0.2s; }
transition: height 0.2s;
}
.detailsOpen { .detailsOpen {
display : grid; display : grid;
grid-template-columns : 3fr 3fr 30px; grid-template-columns : 3fr 3fr 30px;
@@ -666,8 +504,8 @@
height : fit-content; height : fit-content;
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
line-clamp:3;
-webkit-line-clamp : 3; -webkit-line-clamp : 3;
line-clamp : 3;
white-space : wrap; white-space : wrap;
-webkit-box-orient : vertical; -webkit-box-orient : vertical;
} }
@@ -675,8 +513,7 @@
.info { .info {
display : grid; display : grid;
grid-template-areas: grid-template-areas : 'tags pages views views'
'tags pages views views'
'authors update update storage'; 'authors update update storage';
grid-template-columns : 2fr 1fr 1fr 20px; grid-template-columns : 2fr 1fr 1fr 20px;
width : 100%; width : 100%;
@@ -687,9 +524,7 @@
flex-direction : column; flex-direction : column;
gap : 5px; gap : 5px;
a, a,
button { button { margin : 0; }
margin: 0;
}
} }
} }
} }
@@ -701,9 +536,7 @@
&.list { &.list {
.brewItem:not(.detailsOpen) { .brewItem:not(.detailsOpen) {
grid-template-columns : 3fr 1fr; grid-template-columns : 3fr 1fr;
.info { .info { display : none; }
display: none;
}
} }
.detailsOpen { .detailsOpen {
grid-template-rows : 1fr 2fr; grid-template-rows : 1fr 2fr;