From cb0cb32860e89c47ae4ba78496cb8a7c174c202b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Thu, 13 Jun 2024 01:04:39 +0200 Subject: [PATCH] minor style changes & lint less file --- client/homebrew/pages/vaultPage/vaultPage.jsx | 36 +- .../homebrew/pages/vaultPage/vaultPage.less | 419 ++++++++---------- 2 files changed, 209 insertions(+), 246 deletions(-) diff --git a/client/homebrew/pages/vaultPage/vaultPage.jsx b/client/homebrew/pages/vaultPage/vaultPage.jsx index 8ea7ff0b2..19d65e8f3 100644 --- a/client/homebrew/pages/vaultPage/vaultPage.jsx +++ b/client/homebrew/pages/vaultPage/vaultPage.jsx @@ -87,7 +87,7 @@ const VaultPage = (props) => { } }; - const loadTotal = async ({title, v3, legacy}) => { + const loadTotal = async ({ title, v3, legacy }) => { setTotalBrews(null); setError(null); if (title) { @@ -265,18 +265,17 @@ const VaultPage = (props) => { return (
- {page > 1 && ( - - )} +
    {startPage > 1 && ( loadPage(1, false)} > 1 ... @@ -285,21 +284,20 @@ const VaultPage = (props) => { {pagesAroundCurrent} {endPage < totalPages && ( loadPage(totalPages, false)} > ... {totalPages} )}
- {page < totalPages && ( - - )} +
); }; diff --git a/client/homebrew/pages/vaultPage/vaultPage.less b/client/homebrew/pages/vaultPage/vaultPage.less index 9f6b8e3df..0af26e092 100644 --- a/client/homebrew/pages/vaultPage/vaultPage.less +++ b/client/homebrew/pages/vaultPage/vaultPage.less @@ -1,280 +1,245 @@ body { - height: 100vh; + height : 100vh; - .content { - height: 100%; - } + .content { height : 100%; } - small { - font-size: 10pt; - color: #555; + small { + font-size : 10pt; + color : #555555; - a { - color: #333; - } - } + a { color : #333333; } + } - code { - background: lightgrey; - border-radius: 5px; - padding-inline: 5px - } + code { + padding-inline : 5px; + background : lightgrey; + border-radius : 5px; + } - *:not(input) { - user-select: none; - } + *:not(input) { user-select : none; } } .vaultPage { - overflow-y: hidden; - height: 100%; - background-color: #2C3E50; + height : 100%; + overflow-y : hidden; + background-color : #2C3E50; - h1, - h2, - h3 { - font-family: 'Open Sans'; - color: white; - font-weight: 900; - } + h1, + h2, + h3 { + font-family : 'Open Sans'; + font-weight : 900; + color : white; + } - .content { - display: grid; - grid-template-columns: 500px 2fr; - background: #2C3E50; + .content { + display : grid; + grid-template-columns : 500px 2fr; + background : #2C3E50; - .dataGroup { - width: 100%; - height: 100%; - background: white; + .dataGroup { + width : 100%; + height : 100%; + background : white; - &.form .brewLookup { - position: relative; - padding: 50px; + &.form .brewLookup { + position : relative; + padding : 50px; - .formTitle { - color: black; - font-size: 30px; - border-bottom: 2px solid; - margin: 20px 0; - text-align: center; - } + .formTitle { + margin : 20px 0; + font-size : 30px; + color : black; + text-align : center; + border-bottom : 2px solid; + } - .formContents { - display: flex; - flex-direction: column; - } + .formContents { + display : flex; + flex-direction : column; + } - label { - margin: 10px 0; - } + label { margin : 10px 0; } - input { - margin: 0 10px; - } + input { margin : 0 10px; } - #searchButton { - position: absolute; - right: 10px; - bottom: 20px; + #searchButton { + position : absolute; + right : 10px; + bottom : 20px; - i { - margin-left: 10px; - } - } - } + i { margin-left : 10px; } + } + } - &.resultsContainer { - display: flex; - flex-direction: column; - border-left: 2px solid; - height: 100%; - font-family: "BookInsanityRemake"; - font-size: .34cm; - overflow-y: auto; + &.resultsContainer { + display : flex; + flex-direction : column; + height : 100%; + overflow-y : auto; + font-family : 'BookInsanityRemake'; + font-size : 0.34cm; + border-left : 2px solid; - .foundBrews { - position: relative; - background-color: #2C3E50; - width: 100%; - max-height: 100%; - height: 100%; - padding: 50px 50px 70px 50px; - overflow-y: scroll; + .foundBrews { + position : relative; + width : 100%; + height : 100%; + max-height : 100%; + padding : 50px 50px 70px 50px; + overflow-y : scroll; + background-color : #2C3E50; - h3 { - font-size: 25px; - } + h3 { font-size : 25px; } - &.noBrews { - display: grid; - place-items: center; - color: white; - } + &.noBrews { + display : grid; + place-items : center; + color : white; + } - &.searching { - display: grid; - place-items: center; - color: white; + &.searching { + display : grid; + place-items : center; + color : white; - h3 { - position: relative; - } + h3 { position : relative; } - h3.searchAnim::after { - content: ""; - width: max-content; - height: 1em; - position: absolute; - right: 0; - top: 50%; - translate: 100% -50%; - animation: trailingDots 2s ease infinite; - } - } + h3.searchAnim::after { + position : absolute; + top : 50%; + right : 0; + width : max-content; + height : 1em; + content : ''; + translate : 100% -50%; + animation : trailingDots 2s ease infinite; + } + } - .totalBrews { - position: fixed; - bottom: 0; - right: 17px; - font-size: 11px; - font-weight: 800; - color: white; - background-color: #333; - padding: 8px 10px; - z-index: 1000; - font-family: 'Open Sans'; + .totalBrews { + position : fixed; + right : 17px; + bottom : 0; + z-index : 1000; + padding : 8px 10px; + font-family : 'Open Sans'; + font-size : 11px; + font-weight : 800; + color : white; + background-color : #333333; - .searchAnim { - position: relative; - display: inline-block; - width: 3ch; - height: 1em; - } + .searchAnim { + position : relative; + display : inline-block; + width : 3ch; + height : 1em; + } - .searchAnim::after { - content: ""; - width: max-content; - height: 1em; - position: absolute; - right: 0; - top: 50%; - translate: -50% -50%; - animation: trailingDots 2s ease infinite; - } - } + .searchAnim::after { + position : absolute; + top : 50%; + right : 0; + width : max-content; + height : 1em; + content : ''; + translate : -50% -50%; + animation : trailingDots 2s ease infinite; + } + } - .brewItem { - background-image: url('/assets/parchmentBackground.jpg'); - width: 48%; - margin-right: 40px; - color: black; + .brewItem { + width : 48%; + margin-right : 40px; + color : black; + background-image : url('/assets/parchmentBackground.jpg'); - &:nth-child(even of .brewItem) { - margin-right: 0; - } + &:nth-child(even of .brewItem) { margin-right : 0; } - h2 { - font-size: 0.75cm; - line-height: 0.988em; - font-family: "MrEavesRemake"; - font-weight: 800; - color: var(--HB_Color_HeaderText); - } + h2 { + font-family : 'MrEavesRemake'; + font-size : 0.75cm; + font-weight : 800; + line-height : 0.988em; + color : var(--HB_Color_HeaderText); + } - .info { - font-family: ScalySansRemake; - font-size: 1.2em; + .info { + font-family : "ScalySansRemake"; + font-size : 1.2em; - >span { - margin-right: 12px; - line-height: 1.5em; - } - } - } + >span { + margin-right : 12px; + line-height : 1.5em; + } + } + } - .paginationControls { - position: absolute; - left: 50%; - translate: -50%; - width: auto; - display: grid; - place-items: center; - grid-template-areas: "previousPage currentPage nextPage"; - grid-template-columns: 50px 1fr 50px; + .paginationControls { + position : absolute; + left : 50%; + display : grid; + grid-template-areas : 'previousPage currentPage nextPage'; + grid-template-columns : 50px 1fr 50px; + place-items : center; + width : auto; + translate : -50%; - .pages { - grid-area: currentPage; - height: 100%; - width: 100%; - display: flex; - justify-content: space-evenly; - text-align: center; - padding: 5px 8px; + .pages { + display : flex; + grid-area : currentPage; + justify-content : space-evenly; + width : 100%; + height : 100%; + padding : 5px 8px; + text-align : center; - .pageNumber { - color: white; - font-family: Open Sans; - font-weight: 900; - text-underline-position: under; - margin-inline: 10px; - cursor: pointer; + .pageNumber { + margin-inline : 10px; + font-family : "Open Sans"; + font-weight : 900; + color : white; + text-underline-position : under; + cursor : pointer; - &.currentPage { - color: gold; - text-decoration: underline; - pointer-events: none; - } + &.currentPage { + color : gold; + text-decoration : underline; + pointer-events : none; + } - &.firstPage { - margin-right: -5px; - } + &.firstPage { margin-right : -5px; } - &.lastPage { - margin-left: -5px; - } - } - } + &.lastPage { margin-left : -5px; } + } + } - button { - width: max-content; - border-radius: 5px; + button { + width : max-content; - &.previousPage { - grid-area: previousPage; - } + &.previousPage { grid-area : previousPage; } - &.nextPage { - grid-area: nextPage; - } - } + &.nextPage { grid-area : nextPage; } + } - } + } - hr { - visibility: hidden; - } - } - } - } - } + hr { visibility : hidden; } + } + } + } + } } @keyframes trailingDots { - 0%, - 32% { - content: '.'; - } + 0%, + 32% { content : '.'; } - 33%, - 65% { - content: '..'; - } + 33%, + 65% { content : '..'; } - 66%, - 100% { - content: '...'; - } + 66%, + 100% { content : '...'; } } \ No newline at end of file