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

Tweak responsive modes of search form

Browse source
This commit is contained in:
Alex Cabal 2020-12-09 14:11:38 -06:00
parent 96281c13f9
commit 261e0621dd
2 changed files with 52 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

4
templates/SearchForm.php
View file

@ -2,8 +2,8 @@
$allSelected = sizeof($tags) == 0 || in_array('all', $tags); $allSelected = sizeof($tags) == 0 || in_array('all', $tags);
?> ?>
<form action="/ebooks" method="get"> <form action="/ebooks" method="get">
<label class="tags">Subjects <span>(select many with <? if(strpos($_SERVER['HTTP_USER_AGENT'], 'Mac') === false){ ?>ctrl<? }else{ ?>⌘<? } ?>)</span> <label class="tags">Subjects
<select multiple="multiple" name="tags[]"> <select multiple="multiple" name="tags[]" size="1">
<option value="all">All</option> <option value="all">All</option>
<? foreach(Library::GetTags() as $tag){ <? foreach(Library::GetTags() as $tag){
$lcTag = mb_strtolower($tag); ?> $lcTag = mb_strtolower($tag); ?>

217
www/css/core.css
View file

@ -1417,7 +1417,7 @@ form[action="/ebooks"] select[multiple] option[value="all"]{
form[action="/ebooks"]{ form[action="/ebooks"]{
display: grid; display: grid;
grid-gap: 1rem; grid-gap: 1rem;
grid-template-columns: 25% auto auto auto 1fr; grid-template-columns: 10rem auto auto auto 1fr;
margin: 0 1rem; margin: 0 1rem;
margin-bottom: 4rem; margin-bottom: 4rem;
max-width: calc(100% - 2rem); max-width: calc(100% - 2rem);
@ -1429,11 +1429,6 @@ form[action="/ebooks"] label.tags{
white-space: nowrap; white-space: nowrap;
} }
form[action="/ebooks"] label.tags span{
font-style: italic;
opacity: .5;
}
form[action="/ebooks"] label.tags select{ form[action="/ebooks"] label.tags select{
width: 100%; width: 100%;
height: calc(100% - 1.4rem); height: calc(100% - 1.4rem);
@ -1499,7 +1494,6 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
height: calc(1rem + 1.4rem + 1rem + 2px) !important; height: calc(1rem + 1.4rem + 1rem + 2px) !important;
} }
label.tags > span,
select[multiple] option[value="all"]{ select[multiple] option[value="all"]{
/* Hide the "all" button, because touchscreen devices /* Hide the "all" button, because touchscreen devices
have clearer ways to deselect options */ have clearer ways to deselect options */
@ -1514,7 +1508,6 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
grid-row: 1; grid-row: 1;
} }
form[action="/ebooks"] label.search{ form[action="/ebooks"] label.search{
grid-column: 2 / span 3; grid-column: 2 / span 3;
} }
@ -1540,97 +1533,43 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
} }
} }
@media(max-width: 1300px){
form[action="/ebooks"]{
/* We create 5 columns so that the last one can be 1fr wide, pushing
the rest into their smallest necessary size */
grid-template-columns: 13rem auto auto 1fr;
}
form[action="/ebooks"] label.tags{
grid-row: 1 / span 3;
}
form[action="/ebooks"] label.search{
grid-column: 2 / span 3;
}
form[action="/ebooks"] label.view{
grid-row: 2;
grid-column: 3;
}
form[action="/ebooks"] label.per-page{
grid-row: 3;
grid-column: 2;
}
form[action="/ebooks"] button{
grid-row: 3;
grid-column: 3 / span 2;
margin-top: 0;
align-self: end;
}
}
@media(max-width: 1100px){ @media(max-width: 1100px){
article.ebook header{
width: calc(100% + 4rem);
max-width: none;
margin-left: -2rem;
border-radius: 0;
border-left: none;
border-right: none;
border-radius: 0;
}
main.front-page > section > section > div{
flex-direction: column-reverse;
align-items: center;
}
main.front-page > section > section figure{
margin: 0;
text-align: center;
}
main.front-page > section > section > div > div,
main.front-page > section > section > div > p{
margin-top: 2rem;
}
}
@media (hover: none) and (pointer: coarse) and (max-width: 1100px){ /* target ipads and smartphones without a mouse */
form[action="/ebooks"]{ form[action="/ebooks"]{
grid-template-columns: auto auto auto 1fr; grid-template-columns: auto auto auto 1fr;
} }
form[action="/ebooks"] label.tags{ form[action="/ebooks"] label.tags{
grid-row: 1; grid-row: 1;
grid-column: 1;
}
form[action="/ebooks"] label.tags select{
height: calc(1rem + 1.4rem + 1rem + 2px); /* Size equal to a select boxes */
} }
form[action="/ebooks"] label.search{ form[action="/ebooks"] label.search{
grid-row: 1;
grid-column: 2 / span 3; grid-column: 2 / span 3;
} }
form[action="/ebooks"] label.sort{ form[action="/ebooks"] label.sort{
grid-column: 1;
grid-row: 2; grid-row: 2;
grid-column: 1;
} }
form[action="/ebooks"] label.view{ form[action="/ebooks"] label.view{
grid-column: 2;
grid-row: 2; grid-row: 2;
grid-column: 2;
} }
form[action="/ebooks"] label.per-page{ form[action="/ebooks"] label.per-page{
grid-column: 3;
grid-row: 2; grid-row: 2;
grid-column: 3;
} }
form[action="/ebooks"] button{ form[action="/ebooks"] button{
grid-column: 4;
grid-row: 2; grid-row: 2;
grid-column: 4;
} }
} }
@ -1671,40 +1610,6 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
margin-left: 2rem; margin-left: 2rem;
padding-top: 0; padding-top: 0;
} }
form[action="/ebooks"]{
grid-template-columns: auto 1fr;
}
form[action="/ebooks"] label.tags{
grid-row: 1;
grid-column: 1 / span 2;
}
form[action="/ebooks"] label.tags select{
height: calc((1rem + 1.4rem + 1rem + 2px) * 2); /* Size equal to two regular select boxes */
}
form[action="/ebooks"] label.search{
grid-row: 2;
grid-column: 1 / span 2;
}
form[action="/ebooks"] label.sort{
grid-row: 3;
grid-column: 1;
}
form[action="/ebooks"] label.view{
grid-row: 3;
grid-column: 2;
}
form[action="/ebooks"] button,
form[action="/ebooks"] label.per-page{
grid-row: 4;
grid-column: 1 / span 2;
}
} }
@media(max-width: 900px){ @media(max-width: 900px){
@ -1713,6 +1618,13 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
} }
} }
@media(max-width: 870px){
form[action="/ebooks"] button{
grid-row: 3;
grid-column: 1 / span 4;
}
}
@media(max-width: 860px){ @media(max-width: 860px){
article nav a[rel]{ article nav a[rel]{
font-size: 0; font-size: 0;
@ -1725,39 +1637,39 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
} }
} }
@media (hover: none) and (pointer: coarse) and (max-width: 768px){ /* target ipads and smartphones without a mouse */ @media(max-width: 730px){
form[action="/ebooks"]{ form[action="/ebooks"]{
grid-template-columns: auto auto 1fr; grid-template-columns: auto auto 1fr 1fr;
}
form[action="/ebooks"] label.search{
grid-column: 2 / span 2;
grid-row: 1;
} }
form[action="/ebooks"] label.tags{ form[action="/ebooks"] label.tags{
grid-column: 1;
grid-row: 1; grid-row: 1;
grid-column: 1 / span 2;
}
form[action="/ebooks"] label.search{
grid-row: 1;
grid-column: 3 / span 2;
} }
form[action="/ebooks"] label.sort{ form[action="/ebooks"] label.sort{
grid-column: 1 / span 2;
grid-row: 2; grid-row: 2;
grid-column: 1 / span 3;
} }
form[action="/ebooks"] label.view{ form[action="/ebooks"] label.view{
grid-column: 3; grid-row: 3;
grid-row: 2; grid-column: 1;
} }
form[action="/ebooks"] label.per-page{ form[action="/ebooks"] label.per-page{
grid-column: 1;
grid-row: 3; grid-row: 3;
grid-column: 2;
} }
form[action="/ebooks"] button{ form[action="/ebooks"] button{
grid-row: 3; grid-row: 3;
grid-column: 2 / span 2; grid-column: 4;
} }
} }
@ -1767,42 +1679,6 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
} }
} }
@media (hover: none) and (pointer: coarse) and (max-width: 700px){ /* target ipads and smartphones without a mouse */
form[action="/ebooks"]{
grid-template-columns: auto 1fr;
}
form[action="/ebooks"] label.search{
grid-column: 1 / span 2;
grid-row: 1;
}
form[action="/ebooks"] label.tags{
grid-column: 1 / span 2;
grid-row: 2;
}
form[action="/ebooks"] label.sort{
grid-column: 1 / span 2;
grid-row: 3;
}
form[action="/ebooks"] label.view{
grid-column: 1;
grid-row: 4;
}
form[action="/ebooks"] label.per-page{
grid-column: 2;
grid-row: 4;
}
form[action="/ebooks"] button{
grid-row: 5;
grid-column: 1 / span 2;
}
}
@media(max-width: 680px){ @media(max-width: 680px){
body > header{ body > header{
flex-direction: column; flex-direction: column;
@ -1837,9 +1713,26 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
main.ebooks nav ol li.highlighted::after{ main.ebooks nav ol li.highlighted::after{
display: none; display: none;
} }
}
@media(max-width: 550px){
form[action="/ebooks"]{
grid-template-columns: auto auto 1fr;
}
form[action="/ebooks"] label.tags{
grid-row: 1;
grid-column: 1 / span 3;
}
form[action="/ebooks"] label.search{
grid-row: 2;
grid-column: 1 / span 3;
}
form[action="/ebooks"] label.sort{ form[action="/ebooks"] label.sort{
grid-column: 1 / span 2; grid-row: 3;
grid-column: 1 / span 3;
} }
form[action="/ebooks"] label.view{ form[action="/ebooks"] label.view{
@ -1854,7 +1747,7 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
form[action="/ebooks"] button{ form[action="/ebooks"] button{
grid-row: 5; grid-row: 5;
grid-column: 1 / span 2; grid-column: 1 / span 3;
} }
} }
@ -1956,16 +1849,6 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
} }
} }
@media(max-width: 400px){
form[action="/ebooks"] button{
grid-row: 5;
}
form[action="/ebooks"] label.tags span{
display: none;
}
}
@media(max-width: 380px){ @media(max-width: 380px){
body > header{ body > header{
padding: 1rem 0; padding: 1rem 0;