f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-07 07:42:39 +00:00
Code Wiki Activity

minor style changes & lint less file

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-06-13 01:04:39 +02:00
parent 1e080b30fd
commit cb0cb32860
2 changed files with 209 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
client/homebrew/pages/vaultPage/vaultPage.jsx
View File

@@ -87,7 +87,7 @@ const VaultPage = (props) => {
} }
}; };
const loadTotal = async ({title, v3, legacy}) => { const loadTotal = async ({ title, v3, legacy }) => {
setTotalBrews(null); setTotalBrews(null);
setError(null); setError(null);
if (title) { if (title) {
@@ -265,18 +265,17 @@ const VaultPage = (props) => {
return ( return (
<div className="paginationControls"> <div className="paginationControls">
{page > 1 && ( <button
<button className="previousPage"
className="previousPage" onClick={() => loadPage(page - 1, false)}
onClick={() => loadPage(page - 1, false)} disabled={page === startPage}
> >
&lt;&lt; <i className="fa-solid fa-chevron-left"></i>
</button> </button>
)}
<ol className="pages"> <ol className="pages">
{startPage > 1 && ( {startPage > 1 && (
<a <a
className="firstPage" className="pageNumber firstPage"
onClick={() => loadPage(1, false)} onClick={() => loadPage(1, false)}
> >
1 ... 1 ...
@@ -285,21 +284,20 @@ const VaultPage = (props) => {
{pagesAroundCurrent} {pagesAroundCurrent}
{endPage < totalPages && ( {endPage < totalPages && (
<a <a
className="lastPage" className="pageNumber lastPage"
onClick={() => loadPage(totalPages, false)} onClick={() => loadPage(totalPages, false)}
> >
... {totalPages} ... {totalPages}
</a> </a>
)} )}
</ol> </ol>
{page < totalPages && ( <button
<button className="nextPage"
className="nextPage" onClick={() => loadPage(page + 1, false)}
onClick={() => loadPage(page + 1, false)} disabled={page === totalPages}
> >
&gt;&gt; <i className="fa-solid fa-chevron-right"></i>
</button> </button>
)}
</div> </div>
); );
}; };

419
client/homebrew/pages/vaultPage/vaultPage.less
View File

@@ -1,280 +1,245 @@
body { body {
height: 100vh; height : 100vh;
.content { .content { height : 100%; }
height: 100%;
}
small { small {
font-size: 10pt; font-size : 10pt;
color: #555; color : #555555;
a { a { color : #333333; }
color: #333; }
}
}
code { code {
background: lightgrey; padding-inline : 5px;
border-radius: 5px; background : lightgrey;
padding-inline: 5px border-radius : 5px;
} }
*:not(input) { *:not(input) { user-select : none; }
user-select: none;
}
} }
.vaultPage { .vaultPage {
overflow-y: hidden; height : 100%;
height: 100%; overflow-y : hidden;
background-color: #2C3E50; background-color : #2C3E50;
h1, h1,
h2, h2,
h3 { h3 {
font-family: 'Open Sans'; font-family : 'Open Sans';
color: white; font-weight : 900;
font-weight: 900; color : white;
} }
.content { .content {
display: grid; display : grid;
grid-template-columns: 500px 2fr; grid-template-columns : 500px 2fr;
background: #2C3E50; background : #2C3E50;
.dataGroup { .dataGroup {
width: 100%; width : 100%;
height: 100%; height : 100%;
background: white; background : white;
&.form .brewLookup { &.form .brewLookup {
position: relative; position : relative;
padding: 50px; padding : 50px;
.formTitle { .formTitle {
color: black; margin : 20px 0;
font-size: 30px; font-size : 30px;
border-bottom: 2px solid; color : black;
margin: 20px 0; text-align : center;
text-align: center; border-bottom : 2px solid;
} }
.formContents { .formContents {
display: flex; display : flex;
flex-direction: column; flex-direction : column;
} }
label { label { margin : 10px 0; }
margin: 10px 0;
}
input { input { margin : 0 10px; }
margin: 0 10px;
}
#searchButton { #searchButton {
position: absolute; position : absolute;
right: 10px; right : 10px;
bottom: 20px; bottom : 20px;
i { i { margin-left : 10px; }
margin-left: 10px; }
} }
}
}
&.resultsContainer { &.resultsContainer {
display: flex; display : flex;
flex-direction: column; flex-direction : column;
border-left: 2px solid; height : 100%;
height: 100%; overflow-y : auto;
font-family: "BookInsanityRemake"; font-family : 'BookInsanityRemake';
font-size: .34cm; font-size : 0.34cm;
overflow-y: auto; border-left : 2px solid;
.foundBrews { .foundBrews {
position: relative; position : relative;
background-color: #2C3E50; width : 100%;
width: 100%; height : 100%;
max-height: 100%; max-height : 100%;
height: 100%; padding : 50px 50px 70px 50px;
padding: 50px 50px 70px 50px; overflow-y : scroll;
overflow-y: scroll; background-color : #2C3E50;
h3 { h3 { font-size : 25px; }
font-size: 25px;
}
&.noBrews { &.noBrews {
display: grid; display : grid;
place-items: center; place-items : center;
color: white; color : white;
} }
&.searching { &.searching {
display: grid; display : grid;
place-items: center; place-items : center;
color: white; color : white;
h3 { h3 { position : relative; }
position: relative;
}
h3.searchAnim::after { h3.searchAnim::after {
content: ""; position : absolute;
width: max-content; top : 50%;
height: 1em; right : 0;
position: absolute; width : max-content;
right: 0; height : 1em;
top: 50%; content : '';
translate: 100% -50%; translate : 100% -50%;
animation: trailingDots 2s ease infinite; animation : trailingDots 2s ease infinite;
} }
} }
.totalBrews { .totalBrews {
position: fixed; position : fixed;
bottom: 0; right : 17px;
right: 17px; bottom : 0;
font-size: 11px; z-index : 1000;
font-weight: 800; padding : 8px 10px;
color: white; font-family : 'Open Sans';
background-color: #333; font-size : 11px;
padding: 8px 10px; font-weight : 800;
z-index: 1000; color : white;
font-family: 'Open Sans'; background-color : #333333;
.searchAnim { .searchAnim {
position: relative; position : relative;
display: inline-block; display : inline-block;
width: 3ch; width : 3ch;
height: 1em; height : 1em;
} }
.searchAnim::after { .searchAnim::after {
content: ""; position : absolute;
width: max-content; top : 50%;
height: 1em; right : 0;
position: absolute; width : max-content;
right: 0; height : 1em;
top: 50%; content : '';
translate: -50% -50%; translate : -50% -50%;
animation: trailingDots 2s ease infinite; animation : trailingDots 2s ease infinite;
} }
} }
.brewItem { .brewItem {
background-image: url('/assets/parchmentBackground.jpg'); width : 48%;
width: 48%; margin-right : 40px;
margin-right: 40px; color : black;
color: black; background-image : url('/assets/parchmentBackground.jpg');
&:nth-child(even of .brewItem) { &:nth-child(even of .brewItem) { margin-right : 0; }
margin-right: 0;
}
h2 { h2 {
font-size: 0.75cm; font-family : 'MrEavesRemake';
line-height: 0.988em; font-size : 0.75cm;
font-family: "MrEavesRemake"; font-weight : 800;
font-weight: 800; line-height : 0.988em;
color: var(--HB_Color_HeaderText); color : var(--HB_Color_HeaderText);
} }
.info { .info {
font-family: ScalySansRemake; font-family : "ScalySansRemake";
font-size: 1.2em; font-size : 1.2em;
>span { >span {
margin-right: 12px; margin-right : 12px;
line-height: 1.5em; line-height : 1.5em;
} }
} }
} }
.paginationControls { .paginationControls {
position: absolute; position : absolute;
left: 50%; left : 50%;
translate: -50%; display : grid;
width: auto; grid-template-areas : 'previousPage currentPage nextPage';
display: grid; grid-template-columns : 50px 1fr 50px;
place-items: center; place-items : center;
grid-template-areas: "previousPage currentPage nextPage"; width : auto;
grid-template-columns: 50px 1fr 50px; translate : -50%;
.pages { .pages {
grid-area: currentPage; display : flex;
height: 100%; grid-area : currentPage;
width: 100%; justify-content : space-evenly;
display: flex; width : 100%;
justify-content: space-evenly; height : 100%;
text-align: center; padding : 5px 8px;
padding: 5px 8px; text-align : center;
.pageNumber { .pageNumber {
color: white; margin-inline : 10px;
font-family: Open Sans; font-family : "Open Sans";
font-weight: 900; font-weight : 900;
text-underline-position: under; color : white;
margin-inline: 10px; text-underline-position : under;
cursor: pointer; cursor : pointer;
&.currentPage { &.currentPage {
color: gold; color : gold;
text-decoration: underline; text-decoration : underline;
pointer-events: none; pointer-events : none;
} }
&.firstPage { &.firstPage { margin-right : -5px; }
margin-right: -5px;
}
&.lastPage { &.lastPage { margin-left : -5px; }
margin-left: -5px; }
} }
}
}
button { button {
width: max-content; width : max-content;
border-radius: 5px;
&.previousPage { &.previousPage { grid-area : previousPage; }
grid-area: previousPage;
}
&.nextPage { &.nextPage { grid-area : nextPage; }
grid-area: nextPage; }
}
}
} }
hr { hr { visibility : hidden; }
visibility: hidden; }
} }
} }
} }
}
}
} }
@keyframes trailingDots { @keyframes trailingDots {
0%, 0%,
32% { 32% { content : '.'; }
content: '.';
}
33%, 33%,
65% { 65% { content : '..'; }
content: '..';
}
66%, 66%,
100% { 100% { content : '...'; }
content: '...';
}
} }