f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-11-04 22:38:43 +00:00
Code Wiki Activity

lint

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-10-06 23:04:24 +02:00
parent aa4ae35791
commit 87994b0de9
1 changed files with 117 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+117 -113
View File
@@ -3,7 +3,7 @@
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
.brewItem {
--bg-clr : #EEE;
--bg-clr : #EEEEEE;
--bg-image : @backgroundImageAlt;
--text-clr : black;
--text-shadow-clr : white;
@@ -31,8 +31,8 @@
background-position : right top;
background-size : contain;
opacity : 50%;
-webkit-mask-image : linear-gradient(80deg, #0000 20%, #050 40%);
mask-image : linear-gradient(80deg, #0000 20%, #050 40%);
-webkit-mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%);
mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%);
}
.text {
h2 {
@@ -108,19 +108,17 @@
position : absolute;
right : 0;
display : flex;
height:100%;
height : 100%;
a,
button {
display : block;
align-content : center;
width : 100%;
height : 100%;
font-size : 1.3em;
text-align : center;
text-decoration : unset;
i { cursor : pointer; }
cursor : pointer;
&:hover { background-color : hsl(from currentColor h 30% 90%); }
}
.shareLink { color : @yellow; }
@@ -136,7 +134,7 @@
padding : 5px 15px 5px 6px;
padding-right : 30px;
border-radius : 5px;
box-shadow : 0 4px 5px 0 #333;
box-shadow : 0 4px 5px 0 #333333;
.text {
min-height : 54px;
h2 { margin-bottom : 5px; }
@@ -168,12 +166,10 @@
background-size : 50%, cover;
border : 3px solid;
border-radius : 10px;
box-shadow : 0 4px 5px #222;
box-shadow : 0 4px 5px #222222;
&::before {
position : absolute;
right : 0;
bottom : 0;
left : 0;
inset : unset 0 0 0;
z-index : -1;
display : block;
height : 50%;
@@ -198,8 +194,8 @@
background-repeat : no-repeat;
background-position : right top;
background-size : cover;
mask-image:unset;
opacity:1;
opacity : 1;
mask-image : unset;
}
.text {
filter : drop-shadow(0 1px 4px var(--text-shadow-clr));
@@ -263,12 +259,20 @@
justify-content : end;
width : clamp(400px, 100%, 650px);
br { display : none; }
span { display : inline-block; margin : 0; }
.brewTags {
display : inline-flex;
align-items: center;
grid-area : tags;
max-width : 100px;
width:fit-content;
display : inline-flex;
grid-area : tags;
align-items : center;
width : fit-content;
max-width : 100px;
&:has(span:nth-of-type(4)) {
position : relative;
display : flex;
flex-wrap : wrap;
overflow : hidden;
span:nth-of-type(n + 4) { display : none; }
}
}
.brewAuthors {
.ellipsis();
@@ -277,36 +281,34 @@
align-content : center;
width : 150px;
height : 40px;
padding-right : 5px;
-webkit-line-clamp : 3;
line-clamp : 3;
-webkit-box-orient : vertical;
&:has(a:only-of-type) { width : fit-content; }
}
.lastViewed {
display : inline-block;
grid-area : views;
min-width : 50px;
}
.brewPages {
display : inline-block;
grid-area : pages;
min-width : 40px;
}
[title*='Created'] {
display : inline-block;
grid-area : update;
.lastUpdated {
display : flex;
grid-area : update;
gap : 5px;
align-items : center;
}
[title*='Storage'] {
display : inline-block;
.storage {
grid-area : storage;
filter : drop-shadow(0 0 10px var(--text-shadow-clr));
}
.brewTags:has(span:nth-of-type(4)) {
position : relative;
display : flex;
flex-wrap : wrap;
overflow : hidden;
span:nth-of-type(n + 4) { display : none; }
.homebreweryIcon {
top : 3px;
left : -5px;
height : 20px;
}
}
}
.links {
@@ -334,112 +336,114 @@
.brewAuthors { display : none; }
}
.brewItem {
cursor : pointer;
transition : height @defaultDuration;
cursor:pointer;
&:hover {box-shadow: 0 0 5px var(--bg-clr);
filter:brightness(.97) }
&:hover {
box-shadow : 0 0 5px var(--bg-clr);
filter : brightness(0.97);
}
}
.detailsOpen {
grid-template-columns : 25% 3fr 150px;
height : 70px;
height : 70px;
}
}
}
}
@media screen and (max-width : 1200px) {
.brewCollection .brewGroup .list {
.brewItem:not(.detailsOpen) {
grid-template-columns : 35% 3fr 150px;
.info {
grid-template-areas : 'tags storage';
grid-template-columns : 1fr 20px;
}
.brewAuthors,
.lastUpdated { display : none; }
.brewItem:not(.detailsOpen) {
grid-template-columns : 35% 3fr 150px;
.info {
grid-template-areas : 'tags storage';
grid-template-columns : 1fr 20px;
}
.detailsOpen {
height : 100px;
.info {
grid-template-areas : 'tags views pages .'
'authors update update storage';
grid-template-rows : 1fr 1fr;
grid-template-columns : 2fr 1fr 1fr 30px;
width : clamp(200px, 100%, 650px);
}
.lastUpdated {
.ellipsis();
max-width : 120px;
}
.brewAuthors,
.lastUpdated { display : none; }
}
.detailsOpen {
height : 100px;
.info {
grid-template-areas : 'tags views pages .'
'authors update update storage';
grid-template-rows : 1fr 1fr;
grid-template-columns : 2fr 1fr 1fr 30px;
width : clamp(200px, 100%, 650px);
}
.lastUpdated {
.ellipsis();
max-width : 120px;
}
}
}
}
@media screen and (max-width : 800px) {
.brewCollection .brewGroup .list {
.brewItem:not(.detailsOpen) {
.info {
grid-template-areas : 'tags';
grid-template-columns : 1fr;
width : clamp(200px, 100%, 650px);
}
.storage { display : none; }
.brewItem:not(.detailsOpen) {
.info {
grid-template-areas : 'tags';
grid-template-columns : 1fr;
width : clamp(200px, 100%, 650px);
}
.brewItem {
.storage { display : none; }
}
.brewItem {
h2 {
width : 200px;
font-size : 1em;
}
transition : height @defaultDuration;
}
.detailsOpen {
display : grid;
grid-template-columns : 1fr 4fr 30px;
height : 100px;
padding : 5px;
.text {
height : 100%;
padding : 0;
h2 {
width : 200px;
font-size : 1em;
display : -webkit-box;
height : fit-content;
overflow : hidden;
text-overflow : ellipsis;
-webkit-line-clamp : 3;
line-clamp : 3;
white-space : wrap;
-webkit-box-orient : vertical;
}
transition : height @defaultDuration;
}
.detailsOpen {
.info {
display : grid;
grid-template-columns : 1fr 4fr 30px;
height : 100px;
padding : 5px;
.text {
height : 100%;
padding : 0;
h2 {
display : -webkit-box;
height : fit-content;
overflow : hidden;
text-overflow : ellipsis;
-webkit-line-clamp : 3;
line-clamp : 3;
white-space : wrap;
-webkit-box-orient : vertical;
}
}
.info {
display : grid;
grid-template-areas : 'tags pages views views'
'authors update update storage';
grid-template-columns : 2fr 1fr 1fr 20px;
width : 100%;
height : 100%;
}
.links {
display : flex;
flex-direction : column;
gap : 5px;
a,
button { margin : 0; }
}
}
grid-template-areas : 'tags pages views views'
'authors update update storage';
grid-template-columns : 2fr 1fr 1fr 20px;
width : 100%;
height : 100%;
}
.links {
display : flex;
flex-direction : column;
gap : 5px;
a,
button { margin : 0; }
}
}
}
}
@media screen and (max-width : 650px) {
.brewCollection .brewGroup .list {
.brewItem:not(.detailsOpen) {
grid-template-columns : 3fr 2fr;
.info { display : none; }
}
.detailsOpen {
.info {
.lastUpdated {
.ellipsis();
width : 100px;
}
.brewItem:not(.detailsOpen) {
grid-template-columns : 3fr 2fr;
.info { display : none; }
}
.detailsOpen {
.info {
.lastUpdated {
.ellipsis();
width : 100px;
}
}
}
}
}