From a91b899a69e07ee302e1be9cb3ea9f04f140b034 Mon Sep 17 00:00:00 2001
From: Alex Cabal <alex@alexcabal.com>
Date: Thu, 18 Jul 2024 12:12:35 -0500
Subject: [PATCH] Tweak appearance of artwork form and add URL validation for
 SE URL

---
 templates/ArtworkForm.php |  2 +-
 www/css/artwork.css       |  4 ++++
 www/css/core.css          | 17 ++++-------------
 www/css/dark.css          |  3 ++-
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/templates/ArtworkForm.php b/templates/ArtworkForm.php
index 8af3f02d..b7722741 100644
--- a/templates/ArtworkForm.php
+++ b/templates/ArtworkForm.php
@@ -201,7 +201,7 @@ $now = new DateTimeImmutable('now', new DateTimeZone('America/Juneau')); // Late
 		<label>
 			<span>In use by</span>
 			<span>The full S.E. ebook URL. If not in use, leave this blank.</span>
-			<input type="url" autocomplete="off" name="artwork-ebook-url" value="<?= Formatter::EscapeHtml($artwork->EbookUrl) ?>"/>
+			<input type="url" autocomplete="off" name="artwork-ebook-url" placeholder="https://standardebooks.org/ebooks/" pattern="^https:\/\/standardebooks\.org\/ebooks/[^\/]+(\/[^\/]+)+$" value="<?= Formatter::EscapeHtml($artwork->EbookUrl) ?>"/>
 		</label>
 	<? } ?>
 </fieldset>
diff --git a/www/css/artwork.css b/www/css/artwork.css
index b5422e4f..bcaa4fb5 100644
--- a/www/css/artwork.css
+++ b/www/css/artwork.css
@@ -343,6 +343,10 @@ main section.narrow h1 ~ picture{
 	font-size: .8rem;
 }
 
+.artworks h2 + h3{
+	margin-top: 1rem;
+}
+
 @media(max-width: 500px){
 	.artwork-metadata td{
 		display: block;
diff --git a/www/css/core.css b/www/css/core.css
index 4f54dee9..1ecb7399 100644
--- a/www/css/core.css
+++ b/www/css/core.css
@@ -1765,7 +1765,8 @@ input[type="number"],
 input[type="url"],
 input[type="email"],
 input[type="password"],
-input[type="search"]{
+input[type="search"],
+input[type="file"]{
 	-webkit-appearance: none;
 	appearance: none;
 	box-sizing: border-box;
@@ -2008,18 +2009,8 @@ input[type="number"]:user-invalid,
 input[type="url"]:user-invalid,
 input[type="email"]:user-invalid,
 input[type="password"]:user-invalid,
-input[type="search"]:user-invalid{
-	border-color: #ff0000;
-	box-shadow: 1px 1px 0 #ff0000, -1px -1px 0 #ff0000;
-}
-
-input[type="text"]:-moz-ui-invalid,
-input[type="month"]:-moz-ui-invalid,
-input[type="number"]:-moz-ui-invalid,
-input[type="url"]:-moz-ui-invalid,
-input[type="email"]:-moz-ui-invalid,
-input[type="password"]:-moz-ui-invalid,
-input[type="search"]:-moz-ui-invalid{
+input[type="search"]:user-invalid,
+input[type="file"]:user-invalid{
 	border-color: #ff0000;
 	box-shadow: 1px 1px 0 #ff0000, -1px -1px 0 #ff0000;
 }
diff --git a/www/css/dark.css b/www/css/dark.css
index 0dc5e8ae..3a9138c9 100644
--- a/www/css/dark.css
+++ b/www/css/dark.css
@@ -63,7 +63,8 @@ input[type="month"],
 input[type="number"],
 input[type="url"],
 input[type="email"],
-input[type="search"]{
+input[type="search"],
+input[type="file"]{
 	box-shadow: 1px 1px 0 rgba(0, 0, 0, .5) inset;
 	background: rgba(0, 0, 0, .1);
 }