From 9c27d80dd9e5f60ea478d64e295900a5df6eeeed Mon Sep 17 00:00:00 2001
From: Job Curtis <job.curtis@gmail.com>
Date: Thu, 11 Jan 2024 23:29:38 +0000
Subject: [PATCH] Add grid layouts for smaller screens to /artwork filter form

---
 www/artworks/index.php |  2 +-
 www/css/artwork.css    | 41 ++++++++++++++++++++++++++++++++++++++---
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/www/artworks/index.php b/www/artworks/index.php
index 6d3b9df4..9f781ddf 100644
--- a/www/artworks/index.php
+++ b/www/artworks/index.php
@@ -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">
diff --git a/www/css/artwork.css b/www/css/artwork.css
index b5c7c671..29df3f7b 100644
--- a/www/css/artwork.css
+++ b/www/css/artwork.css
@@ -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;
 	}
 }