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

fix some sizing

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-09-10 12:00:14 +02:00
parent 9c62207ae9
commit 944d069fa2
2 changed files with 482 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+168 -85
View File
@@ -22,15 +22,21 @@
background-size: contain; background-size: contain;
} }
.text { .text {
h4 { h2 {
margin-bottom: 5px; margin-bottom: 5px;
font-size : 2.2em; font-size: 1.3em;
font-weight: 400;
font-family: Alata;
} }
} }
.info { .info {
font-size: 1.2em; font-size: 1.2em;
& > span { line-height : 1.5em; } & > span {
a { color : inherit; } line-height: 1.5em;
}
a {
color: inherit;
}
} }
.brewTags span { .brewTags span {
display: inline-block; display: inline-block;
@@ -39,8 +45,8 @@
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
background-color : #C8AC6E3B; background-color: #c8ac6e3b;
border : 1px solid #C8AC6E; border: 1px solid #c8ac6e;
border-color: currentColor; border-color: currentColor;
border-radius: 4px; border-radius: 4px;
&::before { &::before {
@@ -50,41 +56,53 @@
} }
&.type { &.type {
color: #008000; color: #008000;
background-color : #0080003B; background-color: #0080003b;
&::before { content : '\f0ad'; } &::before {
content: '\f0ad';
}
} }
&.group { &.group {
color: #000000; color: #000000;
background-color : #5050503B; background-color: #5050503b;
&::before { content : '\f500'; } &::before {
content: '\f500';
}
} }
&.meta { &.meta {
color: #000080; color: #000080;
background-color : #0000803B; background-color: #0000803b;
&::before { content : '\f05a'; } &::before {
content: '\f05a';
}
} }
&.system { &.system {
color: #800000; color: #800000;
background-color : #8000003B; background-color: #8000003b;
&::before { content : '\f518'; } &::before {
content: '\f518';
} }
} }
&:nth-child(2n + 1) { margin-right : 0px; } }
&:nth-child(2n + 1) {
margin-right: 0px;
}
.links { .links {
text-align: center; text-align: center;
background-color: fade(black, 60%); background-color: fade(black, 60%);
a, a,
button { button {
display: block; display: block;
width: 100%; width: 100%;
margin : 8px 0px;
font-size: 1.3em; font-size: 1.3em;
color: white; color: white;
text-decoration: unset; text-decoration: unset;
opacity: 0.6; opacity: 0.6;
&:hover { opacity : 1; } &:hover {
i { cursor : pointer; } opacity: 1;
}
i {
cursor: pointer;
}
} }
} }
.googleDriveIcon { .googleDriveIcon {
@@ -105,18 +123,18 @@
width: clamp(300px, 48%, 500px); width: clamp(300px, 48%, 500px);
min-height: 125px; min-height: 125px;
padding: 5px 15px 2px 6px; padding: 5px 15px 2px 6px;
padding-right : 15px; padding-right: 20px;
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;
.thumbnail { .thumbnail {
position: absolute; position: absolute;
top: 0; top: 0;
right : 0; right: 30px;
z-index: -1; z-index: -1;
width: 155px; width: 155px;
height: 100%; height: 100%;
@@ -133,9 +151,13 @@
margin-bottom: 5px; margin-bottom: 5px;
font-size: 1.3em; font-size: 1.3em;
} }
.description {
padding-left: 5px;
}
} }
.info { .info {
font-size: 0.9em; font-size: 0.9em;
padding-left: 5px;
& > span { & > span {
margin-right: 12px; margin-right: 12px;
line-height: 1.5em; line-height: 1.5em;
@@ -148,8 +170,8 @@
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
background-color : #C8AC6E3B; background-color: #c8ac6e3b;
border : 1px solid #C8AC6E; border: 1px solid #c8ac6e;
border-color: currentColor; border-color: currentColor;
border-radius: 4px; border-radius: 4px;
&::before { &::before {
@@ -159,51 +181,58 @@
} }
&.type { &.type {
color: #008000; color: #008000;
background-color : #0080003B; background-color: #0080003b;
&::before { content : '\f0ad'; } &::before {
content: '\f0ad';
}
} }
&.group { &.group {
color: #000000; color: #000000;
background-color : #5050503B; background-color: #5050503b;
&::before { content : '\f500'; } &::before {
content: '\f500';
}
} }
&.meta { &.meta {
color: #000080; color: #000080;
background-color : #0000803B; background-color: #0000803b;
&::before { content : '\f05a'; } &::before {
content: '\f05a';
}
} }
&.system { &.system {
color: #800000; color: #800000;
background-color : #8000003B; background-color: #8000003b;
&::before { content : '\f518'; } &::before {
content: '\f518';
} }
} }
&:hover,
&:focus-within {
.links { opacity : 1; }
} }
.links { .links {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
width: 2em; width: 2em;
height: 100%; height: 100%;
text-align: center; text-align: center;
background-color : fade(black, 60%); background-color: #555;
opacity : 0; display: flex;
flex-direction: column;
justify-content: space-evenly;
a, a,
button { button {
display: block; display: block;
width: 100%; width: 100%;
margin : 8px 0px; font-size: 1.1em;
font-size : 1.3em;
color: white; color: white;
text-decoration: unset; text-decoration: unset;
opacity: 0.6; opacity: 0.6;
&:hover { opacity : 1; } &:hover {
i { cursor : pointer; } opacity: 1;
}
i {
cursor: pointer;
}
} }
} }
.googleDriveIcon { .googleDriveIcon {
@@ -230,10 +259,9 @@
overflow: visible; overflow: visible;
font-size: 12px; font-size: 12px;
color: rgb(2, 2, 2); color: rgb(2, 2, 2);
background : #EFEFEF; background: #efefef;
.text { .text {
display: grid; display: grid;
align-content: center; align-content: center;
width: 100%; width: 100%;
@@ -247,13 +275,15 @@
min-height: 1.4em; min-height: 1.4em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size : 20px; font-size: 1.6em;
font-weight: 900; font-weight: 900;
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
} }
.description { display : none; } .description {
display: none;
}
} }
.info { .info {
@@ -264,7 +294,9 @@
align-items: center; align-items: center;
justify-content: end; justify-content: end;
width: clamp(400px, 100%, 650px); width: clamp(400px, 100%, 650px);
br { display : none; } br {
display: none;
}
.brewTags { .brewTags {
display: inline-block; display: inline-block;
grid-area: tags; grid-area: tags;
@@ -290,7 +322,6 @@
color: #5050b1; color: #5050b1;
background-color: hsla(from currentColor h s l / 20%); background-color: hsla(from currentColor h s l / 20%);
} }
} }
.brewAuthors { .brewAuthors {
display: inline-block; display: inline-block;
@@ -303,7 +334,9 @@
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
&:has(a:only-of-type) { width : fit-content; } &:has(a:only-of-type) {
width: fit-content;
}
} }
.lastViewed { .lastViewed {
@@ -332,7 +365,9 @@
flex-wrap: wrap; flex-wrap: wrap;
overflow: hidden; overflow: hidden;
span:nth-of-type(n + 2) { display : none; } span:nth-of-type(n + 2) {
display: none;
}
&:hover { &:hover {
position: absolute; position: absolute;
@@ -344,7 +379,9 @@
overflow: visible; overflow: visible;
background: #707070; background: #707070;
span:nth-of-type(n + 4) { display : block; } span:nth-of-type(n + 4) {
display: block;
}
&::after { &::after {
position: absolute; position: absolute;
@@ -379,15 +416,25 @@
> a { > a {
opacity: 0.8; opacity: 0.8;
&:hover { opacity : 1; } &:hover {
opacity: 1;
}
} }
.editLink { color : @green; } .editLink {
.deleteLink { color : @red; } color: @green;
}
.deleteLink {
color: @red;
}
.shareLink { color : deepskyblue; } .shareLink {
color: deepskyblue;
}
.downloadLink { color : coral; } .downloadLink {
color: coral;
}
} }
} }
@@ -401,7 +448,7 @@
padding: 10px; padding: 10px;
padding-top: 100px; padding-top: 100px;
padding-bottom: 50px; padding-bottom: 50px;
font-size : 13px; 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');
@@ -422,16 +469,18 @@
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 42%, #77777700 55%);
}
.text .description {
height: fit-content;
} }
.text .description { height : fit-content; }
} }
.thumbnail { .thumbnail {
@@ -450,7 +499,7 @@
filter: drop-shadow(0 1px 4px black); filter: drop-shadow(0 1px 4px black);
h2 { h2 {
font-size : 1.2em; font-size: 1.6em;
font-weight: 900; font-weight: 900;
} }
@@ -463,25 +512,41 @@
.info { .info {
display: grid; display: grid;
grid-template-areas : 'tags tags tags' grid-template-areas:
'authors authors authors' 'tags tags tags tags'
'pages views views' 'authors authors authors authors'
'update update storage'; 'pages views . .'
height : 130px; 'update update storage .';
grid-template-columns: 1fr 1fr 1fr 30px;
height: 110px;
filter: drop-shadow(0 1px 2px black); filter: drop-shadow(0 1px 2px black);
.brewTags { .brewTags {
grid-area: tags; grid-area: tags;
color: black; color: black;
i { color : white; } i {
> span { background : hsl(from currentColor h 20% 80%); } color: white;
}
> 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 {
@@ -507,10 +572,16 @@
.brewPages, .brewPages,
.lastViewed, .lastViewed,
.brewAuthors { display : none; } .brewAuthors {
display: none;
}
}
.brewItem {
transition: height 0.2s;
}
.detailsOpen {
height: 70px;
} }
.brewItem { transition : height 0.2s; }
.detailsOpen { height : 70px; }
} }
} }
} }
@@ -529,14 +600,17 @@
.brewPages, .brewPages,
.lastViewed, .lastViewed,
.brewAuthors, .brewAuthors,
.lastUpdated { display : none; } .lastUpdated {
display: none;
}
} }
.detailsOpen { .detailsOpen {
grid-template-columns: 3fr 2fr 1fr; grid-template-columns: 3fr 2fr 1fr;
.info { .info {
display: grid; display: grid;
grid-template-areas : 'tags views pages' grid-template-areas:
'tags views pages'
'authors 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;
@@ -568,10 +642,14 @@
.lastViewed, .lastViewed,
.brewAuthors, .brewAuthors,
.lastUpdated, .lastUpdated,
.storage { display : none; } .storage {
display: none;
}
} }
.brewItem { transition : height 0.2s; } .brewItem {
transition: height 0.2s;
}
.detailsOpen { .detailsOpen {
display: grid; display: grid;
grid-template-columns: 3fr 3fr 30px; grid-template-columns: 3fr 3fr 30px;
@@ -595,7 +673,8 @@
.info { .info {
display: grid; display: grid;
grid-template-areas : 'tags pages views views' grid-template-areas:
'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%;
@@ -606,7 +685,9 @@
flex-direction: column; flex-direction: column;
gap: 5px; gap: 5px;
a, a,
button { margin : 0; } button {
margin: 0;
}
} }
} }
} }
@@ -618,7 +699,9 @@
&.list { &.list {
.brewItem:not(.detailsOpen) { .brewItem:not(.detailsOpen) {
grid-template-columns: 3fr 1fr; grid-template-columns: 3fr 1fr;
.info { display : none; } .info {
display: none;
}
} }
.detailsOpen { .detailsOpen {
grid-template-rows: 1fr 2fr; grid-template-rows: 1fr 2fr;
client/homebrew/pages/basePages/listPage/listPage.less
+1 -1
View File
@@ -216,7 +216,7 @@
i { transition : color 0.2s; } i { transition : color 0.2s; }
input:checked + i { color : @blue; } input:checked + i { color : @blueLight; }
} }
} }
} }