diff --git a/changelog.md b/changelog.md index e09c7e5d6..2a8ce15f4 100644 --- a/changelog.md +++ b/changelog.md @@ -114,6 +114,9 @@ Fixes issue [#1729](https://github.com/naturalcrit/homebrewery/issues/1729) ##### 5e-Cleric * [x] Style fixes for covers art and logos on A4 size pages * [x] Fix crash when trying to open brews that don't exist +* [x] Tweaks and style update styling on {{openSans **VAULT** :fas_dungeon:}} page. + +Fixes issue [#4079](https://github.com/naturalcrit/homebrewery/issues/4079) ##### Calculuschild * [x] `꞉꞉꞉꞉` now produces `
` instead of a `
` diff --git a/client/homebrew/pages/vaultPage/vaultPage.jsx b/client/homebrew/pages/vaultPage/vaultPage.jsx index 21a8e8363..f979aa4f7 100644 --- a/client/homebrew/pages/vaultPage/vaultPage.jsx +++ b/client/homebrew/pages/vaultPage/vaultPage.jsx @@ -99,14 +99,14 @@ const VaultPage = (props)=>{ setSearching(true); setError(null); - const title = titleRef.current.value || ''; - const author = authorRef.current.value || ''; - const count = countRef.current.value || 10; - const v3 = v3Ref.current.checked != false; - const legacy = legacyRef.current.checked != false; + const title = titleRef.current.value || ''; + const author = authorRef.current.value || ''; + const count = countRef.current.value || 10; + const v3 = v3Ref.current.checked != false; + const legacy = legacyRef.current.checked != false; const sortOption = sort || 'title'; - const dirOption = dir || 'asc'; - const pageProp = page || 1; + const dirOption = dir || 'asc'; + const pageProp = page || 1; setSort(sortOption); setdir(dirOption); @@ -247,7 +247,7 @@ const VaultPage = (props)=>{
  • Some common words like "a", "after", "through", "itself", "here", etc., - are ignored in searches. The full list can be found   + are ignored in searches. The full list can be found  here @@ -286,9 +286,9 @@ const VaultPage = (props)=>{ }; const renderPaginationControls = ()=>{ - if(!totalBrews) return null; + if(!totalBrews || totalBrews < 10) return null; - const countInt = parseInt(props.query.count || 20); + const countInt = parseInt(brewCollection.length || 20); const totalPages = Math.ceil(totalBrews / countInt); let startPage, endPage; @@ -355,7 +355,7 @@ const VaultPage = (props)=>{ }; const renderFoundBrews = ()=>{ - if(searching) { + if(searching && !brewCollection) { return (

    Searching

    @@ -395,6 +395,7 @@ const VaultPage = (props)=>{ {`Brews found: `} {totalBrews} + {brewCollection.length > 10 && renderPaginationControls()} {brewCollection.map((brew, index)=>{ return ( { {renderNavItems()} -
    - -
    {renderForm()}
    -
    - {renderSortBar()} - {renderFoundBrews()} -
    -     +
    + +
    {renderForm()}
    +
    + {renderSortBar()} + {renderFoundBrews()} +
    +
    ); diff --git a/client/homebrew/pages/vaultPage/vaultPage.less b/client/homebrew/pages/vaultPage/vaultPage.less index a69bcb33b..8a5f3a714 100644 --- a/client/homebrew/pages/vaultPage/vaultPage.less +++ b/client/homebrew/pages/vaultPage/vaultPage.less @@ -5,7 +5,7 @@ *:not(input) { user-select : none; } - .content .dataGroup { + :where(.content .dataGroup) { width : 100%; height : 100%; background : white; @@ -169,9 +169,10 @@ width : 100%; height : 100%; max-height : 100%; - padding : 50px 50px 70px 50px; + padding : 70px 50px; overflow-y : scroll; background-color : #2C3E50; + container-type : inline-size; h3 { font-size : 25px; } @@ -236,6 +237,7 @@ margin-right : 40px; color : black; isolation : isolate; + transition : width 0.5s; &::after { position : absolute; @@ -269,8 +271,8 @@ .links { z-index : 2; } hr { - margin : 0px; visibility : hidden; + margin : 0px; } .thumbnail { z-index : -1; } @@ -278,30 +280,37 @@ .paginationControls { position : absolute; + top : 35px; left : 50%; display : grid; grid-template-areas : 'previousPage currentPage nextPage'; grid-template-columns : 50px 1fr 50px; + gap : 20px; place-items : center; width : auto; + font-size : 15px; translate : -50%; + &:last-child { top : unset; } + .pages { display : flex; grid-area : currentPage; + gap : 1em; justify-content : space-evenly; width : 100%; height : 100%; - padding : 5px 8px; text-align : center; .pageNumber { - margin-inline : 1vw; + place-content : center; + width : fit-content; + min-width : 2em; font-family : 'Open Sans'; font-weight : 900; color : white; - text-underline-position : under; text-wrap : nowrap; + text-underline-position : under; cursor : pointer; &.currentPage { @@ -329,7 +338,6 @@ } } } - } @keyframes trailingDots { @@ -344,8 +352,7 @@ 100% { content : ' ...'; } } -// media query for when the page is smaller than 1079 px in width -@media screen and (max-width : 1079px) { +@container (width < 670px) { .vaultPage { .dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; } diff --git a/server/vault.api.js b/server/vault.api.js index 6a7b9fb91..3a6c6e989 100644 --- a/server/vault.api.js +++ b/server/vault.api.js @@ -1,6 +1,6 @@ import express from 'express'; import asyncHandler from 'express-async-handler'; -import {model as HomebrewModel } from './homebrew.model.js'; +import { model as HomebrewModel } from './homebrew.model.js'; const router = express.Router(); @@ -29,7 +29,7 @@ const rendererConditions = (legacy, v3)=>{ return {}; // If all renderers selected, renderer field not needed in query for speed }; -const sortConditions = (sort, dir) => { +const sortConditions = (sort, dir)=>{ return { [sort]: dir === 'asc' ? 1 : -1 }; };