mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-03-29 01:18:11 +00:00
Víctor Losada Hernández
432
client/homebrew/pages/vaultPage/vaultPage.jsx
Normal file
432
client/homebrew/pages/vaultPage/vaultPage.jsx
Normal file
@@ -0,0 +1,432 @@
|
||||
/*eslint max-lines: ["warn", {"max": 400, "skipBlankLines": true, "skipComments": true}]*/
|
||||
/*eslint max-params:["warn", { max: 10 }], */
|
||||
import './vaultPage.less';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
|
||||
import Nav from '../../navbar/nav.jsx';
|
||||
import Navbar from '../../navbar/navbar.jsx';
|
||||
import RecentNavItems from '../../navbar/recent.navitem.jsx';
|
||||
const { both: RecentNavItem } = RecentNavItems;
|
||||
import Account from '../../navbar/account.navitem.jsx';
|
||||
import NewBrew from '../../navbar/newbrew.navitem.jsx';
|
||||
import HelpNavItem from '../../navbar/help.navitem.jsx';
|
||||
import BrewItem from '../basePages/listPage/brewItem/brewItem.jsx';
|
||||
import SplitPane from '../../../components/splitPane/splitPane.jsx';
|
||||
import ErrorIndex from '../errorPage/errors/errorIndex.js';
|
||||
|
||||
import request from '../../utils/request-middleware.js';
|
||||
|
||||
const VaultPage = (props)=>{
|
||||
const [pageState, setPageState] = useState(parseInt(props.query.page) || 1);
|
||||
|
||||
const [sortState, setSort] = useState(props.query.sort || 'title');
|
||||
const [dirState, setdir] = useState(props.query.dir || 'asc');
|
||||
|
||||
//Response state
|
||||
const [brewCollection, setBrewCollection] = useState(null);
|
||||
const [totalBrews, setTotalBrews] = useState(null);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const titleRef = useRef(null);
|
||||
const authorRef = useRef(null);
|
||||
const countRef = useRef(null);
|
||||
const v3Ref = useRef(null);
|
||||
const legacyRef = useRef(null);
|
||||
const submitButtonRef = useRef(null);
|
||||
|
||||
useEffect(()=>{
|
||||
disableSubmitIfFormInvalid();
|
||||
loadPage(pageState, true, props.query.sort, props.query.dir);
|
||||
}, []);
|
||||
|
||||
const updateStateWithBrews = (brews, page)=>{
|
||||
setBrewCollection(brews || null);
|
||||
setPageState(parseInt(page) || 1);
|
||||
setSearching(false);
|
||||
};
|
||||
|
||||
const updateUrl = (titleValue, authorValue, countValue, v3Value, legacyValue, page, sort, dir)=>{
|
||||
const url = new URL(window.location.href);
|
||||
const urlParams = new URLSearchParams(url.search);
|
||||
|
||||
urlParams.set('title', titleValue);
|
||||
urlParams.set('author', authorValue);
|
||||
urlParams.set('count', countValue);
|
||||
urlParams.set('v3', v3Value);
|
||||
urlParams.set('legacy', legacyValue);
|
||||
urlParams.set('page', page);
|
||||
urlParams.set('sort', sort);
|
||||
urlParams.set('dir', dir);
|
||||
|
||||
url.search = urlParams.toString();
|
||||
window.history.replaceState(null, '', url.toString());
|
||||
};
|
||||
|
||||
const performSearch = async (title, author, count, v3, legacy, page, sort, dir)=>{
|
||||
updateUrl(title, author, count, v3, legacy, page, sort, dir);
|
||||
|
||||
const response = await request
|
||||
.get(`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}&sort=${sort}&dir=${dir}`)
|
||||
.catch((error)=>{
|
||||
console.log('error at loadPage: ', error);
|
||||
setError(error);
|
||||
updateStateWithBrews([], 1);
|
||||
});
|
||||
|
||||
if(response.ok)
|
||||
updateStateWithBrews(response.body.brews, page);
|
||||
};
|
||||
|
||||
const loadTotal = async (title, author, v3, legacy)=>{
|
||||
setTotalBrews(null);
|
||||
|
||||
const response = await request.get(`/api/vault/total?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}`)
|
||||
.catch((error)=>{
|
||||
console.log('error at loadTotal: ', error);
|
||||
setError(error);
|
||||
updateStateWithBrews([], 1);
|
||||
});
|
||||
|
||||
if(response.ok)
|
||||
setTotalBrews(response.body.totalBrews);
|
||||
};
|
||||
|
||||
const loadPage = async (page, updateTotal, sort, dir)=>{
|
||||
if(!validateForm()) return;
|
||||
|
||||
setSearching(true);
|
||||
setError(null);
|
||||
|
||||
const title = titleRef.current.value || '';
|
||||
const author = authorRef.current.value || '';
|
||||
const count = countRef.current.value || 20;
|
||||
const v3 = v3Ref.current.checked != false;
|
||||
const legacy = legacyRef.current.checked != false;
|
||||
const sortOption = sort || 'title';
|
||||
const dirOption = dir || 'asc';
|
||||
const pageProp = page || 1;
|
||||
|
||||
setSort(sortOption);
|
||||
setdir(dirOption);
|
||||
|
||||
performSearch(title, author, count, v3, legacy, pageProp, sortOption, dirOption);
|
||||
|
||||
if(updateTotal)
|
||||
loadTotal(title, author, v3, legacy);
|
||||
};
|
||||
|
||||
const renderNavItems = ()=>(
|
||||
<Navbar>
|
||||
<Nav.section>
|
||||
<Nav.item className='brewTitle'>
|
||||
Vault: Search for brews
|
||||
</Nav.item>
|
||||
</Nav.section>
|
||||
<Nav.section>
|
||||
<NewBrew />
|
||||
<HelpNavItem />
|
||||
<RecentNavItem />
|
||||
<Account />
|
||||
</Nav.section>
|
||||
</Navbar>
|
||||
);
|
||||
|
||||
const validateForm = ()=>{
|
||||
//form validity: title or author must be written, and at least one renderer set
|
||||
const isTitleValid = titleRef.current.validity.valid && titleRef.current.value;
|
||||
const isAuthorValid = authorRef.current.validity.valid && authorRef.current.value;
|
||||
const isCheckboxChecked = legacyRef.current.checked || v3Ref.current.checked;
|
||||
|
||||
const isFormValid = (isTitleValid || isAuthorValid) && isCheckboxChecked;
|
||||
|
||||
return isFormValid;
|
||||
};
|
||||
|
||||
const disableSubmitIfFormInvalid = ()=>{
|
||||
submitButtonRef.current.disabled = !validateForm();
|
||||
};
|
||||
|
||||
const renderForm = ()=>(
|
||||
<div className='brewLookup'>
|
||||
<h2 className='formTitle'>Brew Lookup</h2>
|
||||
<div className='formContents'>
|
||||
<label>
|
||||
Title of the brew
|
||||
<input
|
||||
ref={titleRef}
|
||||
type='text'
|
||||
name='title'
|
||||
defaultValue={props.query.title || ''}
|
||||
onKeyUp={disableSubmitIfFormInvalid}
|
||||
pattern='.{3,}'
|
||||
title='At least 3 characters'
|
||||
onKeyDown={(e)=>{
|
||||
if(e.key === 'Enter' && !submitButtonRef.current.disabled)
|
||||
loadPage(1, true);
|
||||
}}
|
||||
placeholder='v3 Reference Document'
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Author of the brew
|
||||
<input
|
||||
ref={authorRef}
|
||||
type='text'
|
||||
name='author'
|
||||
pattern='.{1,}'
|
||||
defaultValue={props.query.author || ''}
|
||||
onKeyUp={disableSubmitIfFormInvalid}
|
||||
onKeyDown={(e)=>{
|
||||
if(e.key === 'Enter' && !submitButtonRef.current.disabled)
|
||||
loadPage(1, true);
|
||||
}}
|
||||
placeholder='Username'
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Results per page
|
||||
<select ref={countRef} name='count' defaultValue={props.query.count || 20}>
|
||||
<option value='10'>10</option>
|
||||
<option value='20'>20</option>
|
||||
<option value='40'>40</option>
|
||||
<option value='60'>60</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input
|
||||
className='renderer'
|
||||
ref={v3Ref}
|
||||
type='checkbox'
|
||||
defaultChecked={props.query.v3 !== 'false'}
|
||||
onChange={disableSubmitIfFormInvalid}
|
||||
/>
|
||||
Search for v3 brews
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input
|
||||
className='renderer'
|
||||
ref={legacyRef}
|
||||
type='checkbox'
|
||||
defaultChecked={props.query.legacy !== 'false'}
|
||||
onChange={disableSubmitIfFormInvalid}
|
||||
/>
|
||||
Search for legacy brews
|
||||
</label>
|
||||
|
||||
<button
|
||||
id='searchButton'
|
||||
ref={submitButtonRef}
|
||||
onClick={()=>{
|
||||
loadPage(1, true);
|
||||
}}
|
||||
>
|
||||
Search
|
||||
<i
|
||||
className={searching ? 'fas fa-spin fa-spinner': 'fas fa-search'}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<legend>
|
||||
<h3>Tips and tricks</h3>
|
||||
<ul>
|
||||
<li>
|
||||
Only <b>published</b> brews are searchable via this tool
|
||||
</li>
|
||||
<li>
|
||||
Usernames are case-sensitive
|
||||
</li>
|
||||
<li>
|
||||
Use <code>"word"</code> to match an exact string,
|
||||
and <code>-</code> to exclude words (at least one word must not be negated)
|
||||
</li>
|
||||
<li>
|
||||
Some common words like "a", "after", "through", "itself", "here", etc.,
|
||||
are ignored in searches. The full list can be found
|
||||
<a href='https://github.com/mongodb/mongo/blob/0e3b3ca8480ddddf5d0105d11a94bd4698335312/src/mongo/db/fts/stop_words_english.txt'>
|
||||
here
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<small>New features will be coming, such as filters and search by tags.</small>
|
||||
</legend>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderSortOption = (optionTitle, optionValue)=>{
|
||||
const oppositeDir = dirState === 'asc' ? 'desc' : 'asc';
|
||||
|
||||
return (
|
||||
<div className={`sort-option ${sortState === optionValue ? `active` : ''}`}>
|
||||
<button onClick={()=>loadPage(1, false, optionValue, oppositeDir)}>
|
||||
{optionTitle}
|
||||
</button>
|
||||
{sortState === optionValue && (
|
||||
<i className={`sortDir fas ${dirState === 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderSortBar = ()=>{
|
||||
|
||||
return (
|
||||
<div className='sort-container'>
|
||||
{renderSortOption('Title', 'title', props.query.dir)}
|
||||
{renderSortOption('Created Date', 'createdAt', props.query.dir)}
|
||||
{renderSortOption('Updated Date', 'updatedAt', props.query.dir)}
|
||||
{renderSortOption('Views', 'views', props.query.dir)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderPaginationControls = ()=>{
|
||||
if(!totalBrews || totalBrews < 10) return null;
|
||||
|
||||
|
||||
const countInt = parseInt(countRef.current.value || 20);
|
||||
const totalPages = Math.ceil(totalBrews / countInt);
|
||||
|
||||
let startPage, endPage;
|
||||
if(pageState <= 6) {
|
||||
startPage = 1;
|
||||
endPage = Math.min(totalPages, 10);
|
||||
} else if(pageState + 4 >= totalPages) {
|
||||
startPage = Math.max(1, totalPages - 9);
|
||||
endPage = totalPages;
|
||||
} else {
|
||||
startPage = pageState - 5;
|
||||
endPage = pageState + 4;
|
||||
}
|
||||
|
||||
const pagesAroundCurrent = new Array(endPage - startPage + 1)
|
||||
.fill()
|
||||
.map((_, index)=>(
|
||||
<a
|
||||
key={startPage + index}
|
||||
className={`pageNumber ${pageState === startPage + index ? 'currentPage' : ''}`}
|
||||
onClick={()=>loadPage(startPage + index, false, sortState, dirState)}
|
||||
>
|
||||
{startPage + index}
|
||||
</a>
|
||||
));
|
||||
|
||||
return (
|
||||
<div className='paginationControls'>
|
||||
<button
|
||||
className='previousPage'
|
||||
onClick={()=>loadPage(pageState - 1, false, sortState, dirState)}
|
||||
disabled={pageState === startPage}
|
||||
>
|
||||
<i className='fa-solid fa-chevron-left'></i>
|
||||
</button>
|
||||
<ol className='pages'>
|
||||
{startPage > 1 && (
|
||||
<a
|
||||
className='pageNumber firstPage'
|
||||
onClick={()=>loadPage(1, false, sortState, dirState)}
|
||||
>
|
||||
1 ...
|
||||
</a>
|
||||
)}
|
||||
{pagesAroundCurrent}
|
||||
{endPage < totalPages && (
|
||||
<a
|
||||
className='pageNumber lastPage'
|
||||
onClick={()=>loadPage(totalPages, false, sortState, dirState)}
|
||||
>
|
||||
... {totalPages}
|
||||
</a>
|
||||
)}
|
||||
</ol>
|
||||
<button
|
||||
className='nextPage'
|
||||
onClick={()=>loadPage(pageState + 1, false, sortState, dirState)}
|
||||
disabled={pageState === totalPages}
|
||||
>
|
||||
<i className='fa-solid fa-chevron-right'></i>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderFoundBrews = ()=>{
|
||||
if(searching && !brewCollection) {
|
||||
return (
|
||||
<div className='foundBrews searching'>
|
||||
<h3 className='searchAnim'>Searching</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if(error) {
|
||||
const errorText = ErrorIndex()[error.HBErrorCode.toString()] || '';
|
||||
|
||||
return (
|
||||
<div className='foundBrews noBrews'>
|
||||
<h3>Error: {errorText}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if(!brewCollection) {
|
||||
return (
|
||||
<div className='foundBrews noBrews'>
|
||||
<h3>No search yet</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if(brewCollection.length === 0) {
|
||||
return (
|
||||
<div className='foundBrews noBrews'>
|
||||
<h3>No brews found</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='foundBrews'>
|
||||
<span className='totalBrews'>
|
||||
{`Brews found: `}
|
||||
<span>{totalBrews}</span>
|
||||
</span>
|
||||
{brewCollection.length > 10 && renderPaginationControls()}
|
||||
{brewCollection.map((brew, index)=>{
|
||||
return (
|
||||
<BrewItem
|
||||
brew={{ ...brew }}
|
||||
key={index}
|
||||
reportError={props.reportError}
|
||||
renderStorage={false}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{renderPaginationControls()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='sitePage vaultPage'>
|
||||
<link href='/themes/V3/Blank/style.css' rel='stylesheet' />
|
||||
<link href='/themes/V3/5ePHB/style.css' rel='stylesheet' />
|
||||
{renderNavItems()}
|
||||
<div className='content'>
|
||||
<SplitPane showDividerButtons={false}>
|
||||
<div className='form dataGroup'>{renderForm()}</div>
|
||||
<div className='resultsContainer dataGroup'>
|
||||
{renderSortBar()}
|
||||
{renderFoundBrews()}
|
||||
</div>
|
||||
</SplitPane>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VaultPage;
|
||||
368
client/homebrew/pages/vaultPage/vaultPage.less
Normal file
368
client/homebrew/pages/vaultPage/vaultPage.less
Normal file
@@ -0,0 +1,368 @@
|
||||
@import './shared/naturalcrit/styles/core.less';
|
||||
|
||||
.vaultPage {
|
||||
height : 100%;
|
||||
overflow-y : hidden;
|
||||
|
||||
*:not(input) { user-select : none; }
|
||||
|
||||
.form {
|
||||
background:white;
|
||||
}
|
||||
|
||||
:where(.content .dataGroup) {
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
|
||||
&.form .brewLookup {
|
||||
position : relative;
|
||||
padding : 50px clamp(20px, 4vw, 50px);
|
||||
|
||||
small {
|
||||
font-size : 10pt;
|
||||
color : #555555;
|
||||
|
||||
a { color : #333333; }
|
||||
}
|
||||
|
||||
code {
|
||||
padding-inline : 5px;
|
||||
font-family : monospace;
|
||||
background : lightgrey;
|
||||
border-radius : 5px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family : 'CodeBold';
|
||||
letter-spacing : 2px;
|
||||
}
|
||||
|
||||
legend {
|
||||
h3 {
|
||||
margin-block : 30px 20px;
|
||||
font-size : 20px;
|
||||
text-align : center;
|
||||
border-bottom : 2px solid;
|
||||
}
|
||||
ul {
|
||||
padding-inline : 30px 10px;
|
||||
li {
|
||||
margin-block : 5px;
|
||||
line-height : calc(1em + 5px);
|
||||
list-style : disc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
left : 0;
|
||||
display : block;
|
||||
padding : 10px;
|
||||
font-weight : 900;
|
||||
color : white;
|
||||
white-space : pre-wrap;
|
||||
content : 'Error:\A At least one renderer should be enabled to make a search';
|
||||
background : rgb(255, 60, 60);
|
||||
opacity : 0;
|
||||
transition : opacity 0.5s;
|
||||
}
|
||||
&:not(:has(input[type='checkbox']:checked))::after { opacity : 1; }
|
||||
|
||||
.formTitle {
|
||||
margin : 20px 0;
|
||||
font-size : 30px;
|
||||
color : black;
|
||||
text-align : center;
|
||||
border-bottom : 2px solid;
|
||||
}
|
||||
|
||||
.formContents {
|
||||
position : relative;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
|
||||
label {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
margin : 10px 0;
|
||||
}
|
||||
select { margin : 0 10px; }
|
||||
|
||||
input {
|
||||
margin : 0 10px;
|
||||
|
||||
&:invalid { background : rgb(255, 188, 181); }
|
||||
|
||||
|
||||
}
|
||||
|
||||
#searchButton {
|
||||
.colorButton(@green);
|
||||
position : absolute;
|
||||
right : 20px;
|
||||
bottom : 0;
|
||||
|
||||
i {
|
||||
margin-left : 10px;
|
||||
animation-duration : 1000s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.resultsContainer {
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
height : 100%;
|
||||
overflow-y : auto;
|
||||
font-size : 0.34cm;
|
||||
|
||||
h3 {
|
||||
font-family : 'Open Sans';
|
||||
font-weight : 900;
|
||||
color : white;
|
||||
}
|
||||
|
||||
.sort-container {
|
||||
display : flex;
|
||||
flex-wrap : wrap;
|
||||
column-gap : 15px;
|
||||
justify-content : center;
|
||||
height : 30px;
|
||||
color : white;
|
||||
background-color : #555555;
|
||||
border-top : 1px solid #666666;
|
||||
border-bottom : 1px solid #666666;
|
||||
|
||||
.sort-option {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
padding : 0 8px;
|
||||
|
||||
&:hover { background-color : #444444; }
|
||||
|
||||
&.active {
|
||||
background-color : #333333;
|
||||
|
||||
button {
|
||||
font-weight : 800;
|
||||
color : white;
|
||||
|
||||
& + .sortDir { padding-left : 5px; }
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding : 0;
|
||||
font-size : 11px;
|
||||
font-weight : normal;
|
||||
color : #CCCCCC;
|
||||
text-transform : uppercase;
|
||||
background-color : transparent;
|
||||
|
||||
&:hover { background : none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.foundBrews {
|
||||
position : relative;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
max-height : 100%;
|
||||
padding : 70px 50px;
|
||||
overflow-y : scroll;
|
||||
container-type : inline-size;
|
||||
|
||||
h3 { font-size : 25px; }
|
||||
|
||||
&.noBrews {
|
||||
display : grid;
|
||||
place-items : center;
|
||||
color : white;
|
||||
}
|
||||
|
||||
&.searching {
|
||||
display : grid;
|
||||
place-items : center;
|
||||
color : white;
|
||||
|
||||
h3 { position : relative; }
|
||||
|
||||
h3.searchAnim::after {
|
||||
position : absolute;
|
||||
top : 50%;
|
||||
right : 0;
|
||||
width : max-content;
|
||||
height : 1em;
|
||||
content : '';
|
||||
translate : calc(100% + 5px) -50%;
|
||||
animation : trailingDots 2s ease infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.totalBrews {
|
||||
position : fixed;
|
||||
right : 0;
|
||||
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::after {
|
||||
position : absolute;
|
||||
top : 50%;
|
||||
right : 0;
|
||||
width : max-content;
|
||||
height : 1em;
|
||||
content : '';
|
||||
translate : -50% -50%;
|
||||
animation : trailingDots 2s ease infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.brewItem {
|
||||
width : 47%;
|
||||
margin-right : 40px;
|
||||
color : black;
|
||||
isolation : isolate;
|
||||
transition : width 0.5s;
|
||||
|
||||
&::after {
|
||||
position : absolute;
|
||||
inset : 0;
|
||||
z-index : -2;
|
||||
display : block;
|
||||
content : '';
|
||||
background-image : url('/assets/parchmentBackground.jpg');
|
||||
}
|
||||
|
||||
&:nth-child(even of .brewItem) { margin-right : 0; }
|
||||
|
||||
h2 {
|
||||
font-family : 'MrEavesRemake';
|
||||
font-size : 0.75cm;
|
||||
font-weight : 800;
|
||||
line-height : 0.988em;
|
||||
color : var(--HB_Color_HeaderText);
|
||||
}
|
||||
.info {
|
||||
position : relative;
|
||||
z-index : 2;
|
||||
font-family : 'ScalySansRemake';
|
||||
font-size : 1.2em;
|
||||
|
||||
>span {
|
||||
margin-right : 12px;
|
||||
line-height : 1.5em;
|
||||
}
|
||||
}
|
||||
.links { z-index : 2; }
|
||||
|
||||
hr {
|
||||
visibility : hidden;
|
||||
margin : 0px;
|
||||
}
|
||||
|
||||
.thumbnail { z-index : -1; }
|
||||
}
|
||||
|
||||
.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%;
|
||||
text-align : center;
|
||||
|
||||
.pageNumber {
|
||||
place-content : center;
|
||||
width : fit-content;
|
||||
min-width : 2em;
|
||||
font-family : 'Open Sans';
|
||||
font-weight : 900;
|
||||
color : white;
|
||||
text-wrap : nowrap;
|
||||
text-underline-position : under;
|
||||
cursor : pointer;
|
||||
|
||||
&.currentPage {
|
||||
color : gold;
|
||||
text-decoration : underline;
|
||||
pointer-events : none;
|
||||
}
|
||||
|
||||
&.firstPage { margin-right : -5px; }
|
||||
|
||||
&.lastPage { margin-left : -5px; }
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
.colorButton(@green);
|
||||
width : max-content;
|
||||
|
||||
&.previousPage { grid-area : previousPage; }
|
||||
|
||||
&.nextPage { grid-area : nextPage; }
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes trailingDots {
|
||||
|
||||
0%,
|
||||
32% { content : ' .'; }
|
||||
|
||||
33%,
|
||||
65% { content : ' ..'; }
|
||||
|
||||
66%,
|
||||
100% { content : ' ...'; }
|
||||
}
|
||||
|
||||
@container (width < 670px) {
|
||||
.vaultPage {
|
||||
|
||||
.dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; }
|
||||
|
||||
.dataGroup.resultsContainer .foundBrews .brewItem {
|
||||
width : 100%;
|
||||
margin-inline : auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user