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

better use of space

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-09-09 20:56:47 +02:00
parent 4e5480b5dd
commit 43ba216bfa
2 changed files with 546 additions and 647 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+390 -477
View File
File diff suppressed because it is too large Load Diff
client/homebrew/pages/basePages/listPage/listPage.less
+156 -170
View File
@@ -2,81 +2,87 @@
@import '@sharedStyles/colors.less'; @import '@sharedStyles/colors.less';
.noColumns() { .noColumns() {
-webkit-column-width: auto; -webkit-column-width : auto;
-moz-column-width: auto; -moz-column-width : auto;
column-width: auto; column-width : auto;
-webkit-column-count: auto; -webkit-column-count : auto;
-moz-column-count: auto; -moz-column-count : auto;
column-count: auto; column-count : auto;
column-fill: auto; column-fill : auto;
-webkit-column-gap: normal; -webkit-column-gap : normal;
-moz-column-gap: normal; -moz-column-gap : normal;
column-gap: normal; column-gap : normal;
height: auto; height : auto;
min-height: 279.4mm; min-height : 279.4mm;
margin: 20px auto; margin : 20px auto;
contain: unset; contain : unset;
} }
.listPage { .listPage {
.content { .content {
z-index: 1; z-index : 1;
padding: clamp(20px, 5vh, 200px) 10vw; padding-block : clamp(20px, 5vh, 200px);
padding-inline : clamp(20px, 20vw, 200px);
.noBrews { .noBrews {
margin: 10px 0px; margin : 10px 0px;
font-size: 1.3em; font-size : 1.3em;
font-style: italic; font-style : italic;
} }
.brewCollection { .brewCollection {
width: fit-content;
h1 { h1 {
margin-bottom: 20px; width : fit-content;
font-size: 25px; margin-bottom : 20px;
color: #dddddd; font-size : 25px;
color : #DDDDDD;
&.active::before, &.active::before,
&.inactive::before { &.inactive::before {
padding-right: 0.5em; padding-right : 0.5em;
font-family: 'Font Awesome 6 Free'; font-family : 'Font Awesome 6 Free';
font-size: 0.6cm; font-size : 0.6cm;
font-weight: 900; font-weight : 900;
} }
&.active { &.active {
color: white; color : white;
} &::before { content : '\f107'; }
&.active::before {
content: '\f107';
}
&.inactive::before {
content: '\f105';
} }
&.inactive::before { content : '\f105'; }
} }
h1:hover { h1:hover { cursor : pointer; }
cursor: pointer;
}
.brewGroup { .brewGroup {
margin-bottom : 20px;
&.grid { &.grid {
display: flex; display : flex;
flex-wrap: wrap; flex-wrap : wrap;
justify-content: center; gap : 20px;
gap: 20px; justify-content : center;
min-width: 200px; width : fit-content;
min-width : 200px;
} }
&.list { &.list {
display: flex; display : flex;
flex-direction: column; flex-direction : column;
gap: 2px; gap : 2px;
} }
&.card { &.card {
display: flex; --columns : 4;
flex-wrap: wrap; display : grid;
column-gap: 40px; grid-template-columns : repeat(var(--columns), 1fr);
justify-content: center; column-gap : 40px;
justify-items : center;
h1 { @media screen and (max-width : 1700px) {--columns : 3;}
position: absolute; @media screen and (max-width : 1400px) {--columns : 2;}
@media screen and (max-width : 900px) {--columns : 1;}
h1 { position : absolute; }
&:not(:has(.brewItem:last-child:nth-child(3n))) {
.brewItem:last-child {
margin-right : auto;
background : green;
}
} }
} }
} }
@@ -84,169 +90,149 @@
} }
.listPageNav { .listPageNav {
position: relative; position : relative;
width: 100%; display : flex;
height: fit-content; flex-wrap : wrap;
display: flex; row-gap : 10px;
flex-wrap: wrap; column-gap : 20px;
align-items:center; align-items : center;
justify-content: center; justify-content : center;
background: #555; width : 100%;
column-gap: 20px; height : fit-content;
row-gap: 10px; font-family : 'Open Sans', sans-serif;
border-top: 1px solid #666; color : white;
border-bottom: 1px solid #666; background : #555555;
font-family: 'Open Sans', sans-serif; border-top : 1px solid #666666;
color: white; border-bottom : 1px solid #666666;
row-rule: 1px solid #666; row-rule : 1px solid #666666;
> div { > div {
width: fit-content; width : fit-content;
padding-inline: 10px; height : 30px;
height:30px; padding-inline : 10px;
} }
.sort-container { .sort-container {
z-index: 1; z-index : 1;
display: flex; display : flex;
flex-wrap: wrap; flex-wrap : wrap;
row-gap: 5px; row-gap : 5px;
column-gap: 15px; column-gap : 15px;
align-items: baseline; align-items : baseline;
justify-content: center; justify-content : center;
text-align: center; text-align : center;
h6 { h6 {
font-size: 11px; font-size : 11px;
font-weight: bold; font-weight : bold;
text-transform: uppercase; text-transform : uppercase;
} }
.sort-option { .sort-option {
display: flex; display : flex;
align-items: center; align-items : center;
height: 100%; height : 100%;
padding: 0 8px; padding : 0 8px;
color: #cccccc; color : #CCCCCC;
&:hover { &:hover { background-color : #444444; }
background-color: #444444;
}
&.active { &.active {
font-weight: bold; font-weight : bold;
color: #dddddd; color : #DDDDDD;
background-color: #333333; background-color : #333333;
button { button {
height: 100%; height : 100%;
font-weight: 800; font-weight : 800;
color: white; color : white;
& + .sortDir { & + .sortDir { padding-left : 5px; }
padding-left: 5px;
}
} }
} }
} }
button { button {
padding: 0; padding : 0;
font-size: 11px; font-size : 11px;
font-weight: normal; font-weight : normal;
color: #cccccc; color : #CCCCCC;
text-transform: uppercase; text-transform : uppercase;
background-color: transparent; background-color : transparent;
} }
} }
.filter-option { .filter-option {
display: grid; display : grid;
place-items: center; place-items : center;
font-size: 11px; font-size : 11px;
background-color: transparent !important; background-color : transparent !important;
i { i { padding-right : 5px; }
padding-right: 5px;
}
} }
.tags-container { .tags-container {
display: flex; display : flex;
flex-wrap: wrap; flex-wrap : wrap;
row-gap: 5px; row-gap : 5px;
column-gap: 15px; column-gap : 15px;
align-items: center; align-items : center;
justify-content: center; justify-content : center;
height: 30px; height : 30px;
span { span {
padding: 3px; padding : 3px;
font-family: 'Open Sans', sans-serif; font-family : 'Open Sans', sans-serif;
font-size: 11px; font-size : 11px;
font-weight: bold; font-weight : bold;
color: #dfdfdf; color : #DFDFDF;
cursor: pointer; cursor : pointer;
border: 1px solid; border : 1px solid;
border-radius: 3px; border-radius : 3px;
&::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;
} }
&::after { &::after {
margin-left: 3px; margin-left : 3px;
font-family: 'Font Awesome 6 Free'; font-family : 'Font Awesome 6 Free';
font-size: 12px; font-size : 12px;
content: '\f00d'; content : '\f00d';
} }
&.type { &.type {
background-color: #008000; background-color : #008000;
border-color: #00a000; border-color : #00A000;
&::before { &::before { content : '\f0ad'; }
content: '\f0ad';
}
} }
&.group { &.group {
background-color: #505050; background-color : #505050;
border-color: #000000; border-color : #000000;
&::before { &::before { content : '\f500'; }
content: '\f500';
}
} }
&.meta { &.meta {
background-color: #000080; background-color : #000080;
border-color: #0000a0; border-color : #0000A0;
&::before { &::before { content : '\f05a'; }
content: '\f05a';
}
} }
&.system { &.system {
background-color: #800000; background-color : #800000;
border-color: #a00000; border-color : #A00000;
&::before { &::before { content : '\f518'; }
content: '\f518';
}
} }
} }
} }
.layout-container { .layout-container {
z-index: 1; z-index : 1;
display: flex; display : flex;
flex-wrap: wrap; flex-wrap : wrap;
row-gap: 5px; row-gap : 5px;
column-gap: 15px; column-gap : 15px;
align-items: center; align-items : center;
justify-content: center; justify-content : center;
text-align: center; text-align : center;
input[type='radio'] { input[type='radio'] { display : none; }
display: none;
}
i { i { transition : color 0.2s; }
transition: color 0.2s;
}
input:checked + i { input:checked + i { color : @blue; }
color: @blue;
}
} }
} }
} }