standardebooks/web
1
0
Fork 0
mirror of https://github.com/standardebooks/web.git synced 2025-07-07 15:20:32 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add grid layouts for smaller screens to /artwork filter form

Browse source
This commit is contained in:
Job Curtis 2024-01-11 23:29:38 +00:00 • committed by Alex Cabal
parent 6d3d8dc9f9
commit 9c27d80dd9
2 changed files with 39 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
www/artworks/index.php
View file

@ -90,7 +90,7 @@ if($perPage !== COVER_ARTWORK_PER_PAGE){
<label class="search">Keywords
<input type="search" name="query" value="<?= Formatter::ToPlainText($query) ?>"/>
</label>
<label>
<label class="sort">
<span>Sort</span>
<span>
<select name="sort">

41
www/css/artwork.css
View file

@ -75,14 +75,26 @@ form[action^="/artworks/"]{
}
.artworks form[action="/artworks"]{
align-items: end;
display: grid;
grid-gap: 1rem;
grid-template-columns: auto auto auto auto 1fr;
grid-template-columns: auto auto auto 1fr;
margin-top: 2rem;
max-width: calc(100% - 2rem);
}
.artworks form[action="/artworks"] button{
justify-self: end;
margin-top: 1.4rem;
}
.artworks form[action="/artworks"] label.search{
grid-column: span 3;
}
.artworks form[action="/artworks"] label.sort{
grid-column: span 2;
}
form[action="/artworks"] > fieldset{
display: grid;
gap: 1rem;
@ -288,10 +300,33 @@ form div.footer{
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
.artworks form[action="/artworks"]{
grid-template-columns: auto 1fr auto;
}
.artworks form[action="/artworks"] label.search,
.artworks form[action="/artworks"] label.sort{
grid-column: span 2;
}
.artworks form[action="/artworks"] button{
grid-column: span 3;
}
}
@media(max-width: 480px){
main > section > ol.artwork-list{
grid-template-columns: repeat(1, 1fr);
grid-template-columns: auto;
}
.artworks form[action="/artworks"]{
grid-template-columns: auto;
}
.artworks form[action="/artworks"] label.sort,
.artworks form[action="/artworks"] label.search,
.artworks form[action="/artworks"] button{
grid-column: auto;
}
}