f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-12 15:22:45 +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

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

@@ -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>
); );
}; };

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

@@ -1,41 +1,35 @@
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 {
padding-inline : 5px;
background : lightgrey; background : lightgrey;
border-radius : 5px; border-radius : 5px;
padding-inline: 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 {
@@ -53,11 +47,11 @@ body {
padding : 50px; padding : 50px;
.formTitle { .formTitle {
color: black;
font-size: 30px;
border-bottom: 2px solid;
margin : 20px 0; margin : 20px 0;
font-size : 30px;
color : black;
text-align : center; text-align : center;
border-bottom : 2px solid;
} }
.formContents { .formContents {
@@ -65,47 +59,39 @@ body {
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%;
font-family: "BookInsanityRemake";
font-size: .34cm;
overflow-y : auto; overflow-y : auto;
font-family : 'BookInsanityRemake';
font-size : 0.34cm;
border-left : 2px solid;
.foundBrews { .foundBrews {
position : relative; position : relative;
background-color: #2C3E50;
width : 100%; width : 100%;
max-height: 100%;
height : 100%; height : 100%;
max-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;
@@ -118,17 +104,15 @@ body {
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;
top : 50%;
right : 0;
width : max-content; width : max-content;
height : 1em; height : 1em;
position: absolute; content : '';
right: 0;
top: 50%;
translate : 100% -50%; translate : 100% -50%;
animation : trailingDots 2s ease infinite; animation : trailingDots 2s ease infinite;
} }
@@ -136,15 +120,15 @@ body {
.totalBrews { .totalBrews {
position : fixed; position : fixed;
bottom: 0;
right : 17px; right : 17px;
bottom : 0;
z-index : 1000;
padding : 8px 10px;
font-family : 'Open Sans';
font-size : 11px; font-size : 11px;
font-weight : 800; font-weight : 800;
color : white; color : white;
background-color: #333; background-color : #333333;
padding: 8px 10px;
z-index: 1000;
font-family: 'Open Sans';
.searchAnim { .searchAnim {
position : relative; position : relative;
@@ -154,37 +138,35 @@ body {
} }
.searchAnim::after { .searchAnim::after {
content: ""; position : absolute;
top : 50%;
right : 0;
width : max-content; width : max-content;
height : 1em; height : 1em;
position: absolute; content : '';
right: 0;
top: 50%;
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-family : 'MrEavesRemake';
font-size : 0.75cm; font-size : 0.75cm;
line-height: 0.988em;
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 {
@@ -197,28 +179,28 @@ body {
.paginationControls { .paginationControls {
position : absolute; position : absolute;
left : 50%; left : 50%;
translate: -50%;
width: auto;
display : grid; display : grid;
place-items: center; grid-template-areas : 'previousPage currentPage nextPage';
grid-template-areas: "previousPage currentPage nextPage";
grid-template-columns : 50px 1fr 50px; grid-template-columns : 50px 1fr 50px;
place-items : center;
width : auto;
translate : -50%;
.pages { .pages {
grid-area: currentPage;
height: 100%;
width: 100%;
display : flex; display : flex;
grid-area : currentPage;
justify-content : space-evenly; justify-content : space-evenly;
text-align: center; width : 100%;
height : 100%;
padding : 5px 8px; padding : 5px 8px;
text-align : center;
.pageNumber { .pageNumber {
color: white;
font-family: Open Sans;
font-weight: 900;
text-underline-position: under;
margin-inline : 10px; margin-inline : 10px;
font-family : "Open Sans";
font-weight : 900;
color : white;
text-underline-position : under;
cursor : pointer; cursor : pointer;
&.currentPage { &.currentPage {
@@ -227,34 +209,23 @@ body {
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;
}
} }
} }
} }
@@ -264,17 +235,11 @@ body {
@keyframes trailingDots { @keyframes trailingDots {
0%, 0%,
32% { 32% { content : '.'; }
content: '.';
}
33%, 33%,
65% { 65% { content : '..'; }
content: '..';
}
66%, 66%,
100% { 100% { content : '...'; }
content: '...';
}
} }