From 87994b0de94c059b35f08d53ee9f732989a3028b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 6 Oct 2026 23:04:24 +0200 Subject: [PATCH] lint --- .../basePages/listPage/brewItem/brewItem.less | 230 +++++++++--------- 1 file changed, 117 insertions(+), 113 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index b7cf190ab..99cac99bf 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -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; } } + } } }