From 261e0621ddeb3eeba55fbd360b0c017f2b84dbbd Mon Sep 17 00:00:00 2001
From: Alex Cabal <alex@alexcabal.com>
Date: Wed, 9 Dec 2020 14:11:38 -0600
Subject: [PATCH] Tweak responsive modes of search form

---
 templates/SearchForm.php |   4 +-
 www/css/core.css         | 217 +++++++++------------------------------
 2 files changed, 52 insertions(+), 169 deletions(-)

diff --git a/templates/SearchForm.php b/templates/SearchForm.php
index ea945fec..b9046100 100644
--- a/templates/SearchForm.php
+++ b/templates/SearchForm.php
@@ -2,8 +2,8 @@
 $allSelected = sizeof($tags) == 0 || in_array('all', $tags);
 ?>
 <form action="/ebooks" method="get">
-	<label class="tags">Subjects <span>(select many with <? if(strpos($_SERVER['HTTP_USER_AGENT'], 'Mac') === false){ ?>ctrl<? }else{ ?>⌘<? } ?>)</span>
-		<select multiple="multiple" name="tags[]">
+	<label class="tags">Subjects
+		<select multiple="multiple" name="tags[]" size="1">
 			<option value="all">All</option>
 		<? foreach(Library::GetTags() as $tag){
 			$lcTag = mb_strtolower($tag); ?>
diff --git a/www/css/core.css b/www/css/core.css
index 614273c4..c5257842 100644
--- a/www/css/core.css
+++ b/www/css/core.css
@@ -1417,7 +1417,7 @@ form[action="/ebooks"] select[multiple] option[value="all"]{
 form[action="/ebooks"]{
 	display: grid;
 	grid-gap: 1rem;
-	grid-template-columns: 25% auto auto auto 1fr;
+	grid-template-columns: 10rem auto auto auto 1fr;
 	margin: 0 1rem;
 	margin-bottom: 4rem;
 	max-width: calc(100% - 2rem);
@@ -1429,11 +1429,6 @@ form[action="/ebooks"] label.tags{
 	white-space: nowrap;
 }
 
-form[action="/ebooks"] label.tags span{
-	font-style: italic;
-	opacity: .5;
-}
-
 form[action="/ebooks"] label.tags select{
 	width: 100%;
 	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;
 	}
 
-	label.tags > span,
 	select[multiple] option[value="all"]{
 		/* Hide the "all" button, because touchscreen devices
 		have clearer ways to deselect options */
@@ -1514,7 +1508,6 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
 		grid-row: 1;
 	}
 
-
 	form[action="/ebooks"] label.search{
 		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){
-	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"]{
 		grid-template-columns: auto auto auto 1fr;
 	}
 
 	form[action="/ebooks"] label.tags{
 		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{
+		grid-row: 1;
 		grid-column: 2 / span 3;
 	}
 
 	form[action="/ebooks"] label.sort{
-		grid-column: 1;
 		grid-row: 2;
+		grid-column: 1;
 	}
 
 	form[action="/ebooks"] label.view{
-		grid-column: 2;
 		grid-row: 2;
+		grid-column: 2;
 	}
 
 	form[action="/ebooks"] label.per-page{
-		grid-column: 3;
 		grid-row: 2;
+		grid-column: 3;
 	}
 
 	form[action="/ebooks"] button{
-		grid-column: 4;
 		grid-row: 2;
+		grid-column: 4;
 	}
 }
 
@@ -1671,40 +1610,6 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
 		margin-left: 2rem;
 		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){
@@ -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){
 	article nav a[rel]{
 		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"]{
-		grid-template-columns: auto auto 1fr;
-	}
-
-	form[action="/ebooks"] label.search{
-		grid-column: 2 / span 2;
-		grid-row: 1;
+		grid-template-columns: auto auto 1fr 1fr;
 	}
 
 	form[action="/ebooks"] label.tags{
-		grid-column: 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{
-		grid-column: 1 / span 2;
 		grid-row: 2;
+		grid-column: 1 / span 3;
 	}
 
 	form[action="/ebooks"] label.view{
-		grid-column: 3;
-		grid-row: 2;
+		grid-row: 3;
+		grid-column: 1;
 	}
 
 	form[action="/ebooks"] label.per-page{
-		grid-column: 1;
 		grid-row: 3;
+		grid-column: 2;
 	}
 
 	form[action="/ebooks"] button{
 		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){
 	body > header{
 		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{
 		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{
-		grid-column: 1 / span 2;
+		grid-row: 3;
+		grid-column: 1 / span 3;
 	}
 
 	form[action="/ebooks"] label.view{
@@ -1854,7 +1747,7 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
 
 	form[action="/ebooks"] button{
 		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){
 	body > header{
 		padding: 1rem 0;