Tweak appearance of artwork form and add URL validation for SE URL

This commit is contained in:
Alex Cabal 2024-07-18 12:12:35 -05:00
parent 017474a0a7
commit a91b899a69
4 changed files with 11 additions and 15 deletions

View file

@ -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>

View file

@ -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;

View file

@ -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;
}

View file

@ -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);
}