mirror of
https://github.com/standardebooks/web.git
synced 2025-07-12 17:42:29 -04:00
Add icons to form elements across site, and remove some CSS classes in favor of :has()
This commit is contained in:
Alex Cabal
parent
40932332cb
commit
00619080a8
12 changed files with 127 additions and 61 deletions
|
|
@ -14,7 +14,7 @@ $now = new DateTimeImmutable('now', new DateTimeZone('America/Juneau')); // Late
|
|||
?>
|
||||
<fieldset>
|
||||
<legend>Artist details</legend>
|
||||
<label>
|
||||
<label class="user">
|
||||
<span>Name</span>
|
||||
<span>For existing artists, leave the year of death blank.</span>
|
||||
<datalist id="artist-names">
|
||||
|
|
@ -34,7 +34,7 @@ $now = new DateTimeImmutable('now', new DateTimeZone('America/Juneau')); // Late
|
|||
value="<?= Formatter::EscapeHtml($artwork->Artist->Name) ?>"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<label class="year">
|
||||
<span>Year of death</span>
|
||||
<span>If circa or unknown, enter the latest possible year.</span>
|
||||
<? /* Not using <input type="number"> for now, see https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ */ ?>
|
||||
|
|
@ -50,13 +50,13 @@ $now = new DateTimeImmutable('now', new DateTimeZone('America/Juneau')); // Late
|
|||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Artwork details</legend>
|
||||
<label>
|
||||
<label class="picture">
|
||||
Name
|
||||
<input type="text" name="artwork-name" required="required" autocomplete="off"
|
||||
value="<?= Formatter::EscapeHtml($artwork->Name) ?>"/>
|
||||
</label>
|
||||
<fieldset>
|
||||
<label>
|
||||
<label class="year">
|
||||
Year of completion
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -75,7 +75,7 @@ $now = new DateTimeImmutable('now', new DateTimeZone('America/Juneau')); // Late
|
|||
/> Year is circa
|
||||
</label>
|
||||
</fieldset>
|
||||
<label>
|
||||
<label class="tags">
|
||||
<span>Tags</span>
|
||||
<span>A list of comma-separated tags.</span>
|
||||
<input
|
||||
|
|
@ -123,7 +123,7 @@ $now = new DateTimeImmutable('now', new DateTimeZone('America/Juneau')); // Late
|
|||
<span>This book was published in the U.S.</span>
|
||||
<span>Yes, if a U.S. city appears anywhere near the publication year or rights statement.</span>
|
||||
</label>
|
||||
<label>
|
||||
<label class="year">
|
||||
Year of publication
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -186,7 +186,7 @@ $now = new DateTimeImmutable('now', new DateTimeZone('America/Juneau')); // Late
|
|||
<fieldset>
|
||||
<legend>Editor options</legend>
|
||||
<? if($artwork->CanStatusBeChangedBy($GLOBALS['User'] ?? null)){ ?>
|
||||
<label class="select">
|
||||
<label>
|
||||
<span>Artwork approval status</span>
|
||||
<span>
|
||||
<select name="artwork-status">
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ $allSelected = sizeof($tags) == 0 || in_array('all', $tags);
|
|||
<? } ?>
|
||||
</select>
|
||||
</label>
|
||||
<label class="search">Keywords
|
||||
<label>Keywords
|
||||
<input type="search" name="query" value="<?= Formatter::EscapeHtml($query ?? '') ?>"/>
|
||||
</label>
|
||||
<label class="select sort">
|
||||
<label class="sort">
|
||||
<span>Sort</span>
|
||||
<span>
|
||||
<select name="sort">
|
||||
|
|
@ -24,7 +24,7 @@ $allSelected = sizeof($tags) == 0 || in_array('all', $tags);
|
|||
</select>
|
||||
</span>
|
||||
</label>
|
||||
<label class="select view">
|
||||
<label class="view">
|
||||
<span>View</span>
|
||||
<span>
|
||||
<select name="view">
|
||||
|
|
@ -33,7 +33,7 @@ $allSelected = sizeof($tags) == 0 || in_array('all', $tags);
|
|||
</select>
|
||||
</span>
|
||||
</label>
|
||||
<label class="select per-page">
|
||||
<label class="per-page">
|
||||
<span>Per page</span>
|
||||
<span>
|
||||
<select name="per-page">
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ catch(Exceptions\InvalidPermissionsException){
|
|||
<form method="post" action="<?= $artwork->Url ?>">
|
||||
<input type="hidden" name="_method" value="PATCH" />
|
||||
<? if($artwork->CanStatusBeChangedBy($GLOBALS['User'] ?? null)){ ?>
|
||||
<label class="select">
|
||||
<label>
|
||||
<span>Artwork approval status</span>
|
||||
<span>
|
||||
<select name="artwork-status">
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ catch(Exceptions\PageOutOfBoundsException){
|
|||
<h1>Browse U.S. Public Domain Artwork</h1>
|
||||
<p>You can help Standard Ebooks by <a href="/artworks/new">submitting new public domain artwork</a> to add to this catalog for use in future ebooks. For free access to the submission form, <a href="/about#editor-in-chief">contact the Editor-in-Chief</a>.</p>
|
||||
<form class="browse-artwork" action="/artworks" method="get" rel="search">
|
||||
<label class="select">
|
||||
<label>
|
||||
<span>Status</span>
|
||||
<span>
|
||||
<select name="status" size="1">
|
||||
|
|
@ -131,10 +131,10 @@ catch(Exceptions\PageOutOfBoundsException){
|
|||
</select>
|
||||
</span>
|
||||
</label>
|
||||
<label class="search">Keywords
|
||||
<label>Keywords
|
||||
<input type="search" name="query" value="<?= Formatter::EscapeHtml($query) ?>"/>
|
||||
</label>
|
||||
<label class="select sort">
|
||||
<label class="sort">
|
||||
<span>Sort</span>
|
||||
<span>
|
||||
<select name="sort">
|
||||
|
|
@ -144,7 +144,7 @@ catch(Exceptions\PageOutOfBoundsException){
|
|||
</select>
|
||||
</span>
|
||||
</label>
|
||||
<label class="select">
|
||||
<label>
|
||||
<span>Per page</span>
|
||||
<span>
|
||||
<select name="per-page">
|
||||
|
|
|
|||
|
|
@ -166,6 +166,11 @@ form[action^="/artworks/"]{
|
|||
margin-top: 1.4rem;
|
||||
}
|
||||
|
||||
|
||||
label.picture::before{
|
||||
bottom: 2.6rem; /* Fix alignment caused by "circa" checkbox */
|
||||
}
|
||||
|
||||
.artworks form.browse-artwork label.search{
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
|
@ -210,10 +215,10 @@ form.create-update-artwork fieldset label:has(input[type="checkbox"]){
|
|||
}
|
||||
|
||||
form.create-update-artwork #pd-proof > fieldset{
|
||||
border-left-color: var(--body-text);
|
||||
border-left-width: 3px;
|
||||
border-left-style: dotted;
|
||||
padding-left: .75rem;
|
||||
border-color: var(--body-text);
|
||||
border-width: 3px;
|
||||
border-style: double;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
form.create-update-artwork fieldset p{
|
||||
|
|
@ -401,6 +406,21 @@ main section.narrow h1 ~ picture{
|
|||
}
|
||||
}
|
||||
|
||||
@media(max-width: 560px){
|
||||
form.create-update-artwork > fieldset:nth-of-type(1),
|
||||
form.create-update-artwork > fieldset:nth-of-type(2),
|
||||
form.create-update-artwork fieldset fieldset:has(input[name="artwork-publication-year"]){
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
form.create-update-artwork fieldset label:has(input[type="url"]),
|
||||
form.create-update-artwork fieldset label:has(input[type="checkbox"]),
|
||||
form.create-update-artwork > fieldset label:has(input[name="artwork-tags"]),
|
||||
form.create-update-artwork > fieldset label:has(input[name="artwork-image"]){
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 480px){
|
||||
main > section > ol.artwork-list{
|
||||
grid-template-columns: auto;
|
||||
|
|
|
|||
109
www/css/core.css
109
www/css/core.css
|
|
@ -1745,8 +1745,8 @@ label.automation-test{
|
|||
display: none;
|
||||
}
|
||||
|
||||
label.email,
|
||||
label.search{
|
||||
label:has(input[type="email"]),
|
||||
label:has(input[type="search"]){
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -1776,9 +1776,14 @@ input[type="search"]{
|
|||
box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset;
|
||||
}
|
||||
|
||||
label.email input,
|
||||
label.search input,
|
||||
label:has(input[type="email"]) input,
|
||||
label:has(input[type="search"]) input,
|
||||
label:has(input[type="url"]) input,
|
||||
label.captcha input,
|
||||
label.year input,
|
||||
label.tags input,
|
||||
label.picture input,
|
||||
label.user input,
|
||||
label:has(input[type="password"]) input{
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
|
@ -1790,12 +1795,17 @@ select{
|
|||
display: block;
|
||||
}
|
||||
|
||||
label:not(:has(input[type="checkbox"])){
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
label span{
|
||||
display: block;
|
||||
}
|
||||
|
||||
label span + span{
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
label span + span code{
|
||||
|
|
@ -1834,15 +1844,15 @@ select[multiple]{
|
|||
padding: 1rem;
|
||||
}
|
||||
|
||||
label.select > span{
|
||||
label:has(select) > span{
|
||||
display: block;
|
||||
}
|
||||
|
||||
label.select > span + span{
|
||||
label:has(select) > span + span{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
label.select > span + span::after{
|
||||
label:has(select) > span + span::after{
|
||||
display: block;
|
||||
font-style: normal;
|
||||
position: absolute;
|
||||
|
|
@ -1859,25 +1869,35 @@ label.select > span + span::after{
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
label.search:focus-within::before,
|
||||
label.search:hover::before,
|
||||
label.select:hover > span + span::after{
|
||||
label:has(input[type="search"]):focus-within::before,
|
||||
label:has(input[type="search"]):hover::before,
|
||||
label:has(select):hover > span + span::after{
|
||||
color: var(--input-outline);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
label.select > span + span,
|
||||
label.email,
|
||||
label.search,
|
||||
label:has(select) > span + span,
|
||||
label:has(input[type="email"]),
|
||||
label:has(input[type="search"]),
|
||||
label:has(input[type="url"]),
|
||||
label.captcha,
|
||||
label.year,
|
||||
label.tags,
|
||||
label.picture,
|
||||
label.user,
|
||||
label:has(input[type="password"]){
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
label.email::before,
|
||||
label.search::before,
|
||||
label:has(input[type="email"])::before,
|
||||
label:has(input[type="search"])::before,
|
||||
label.captcha::before,
|
||||
label.year::before,
|
||||
label.tags::before,
|
||||
label.picture::before,
|
||||
label.user::before,
|
||||
label:has(input[type="url"])::before,
|
||||
label:has(input[type="password"])::before{
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -1886,7 +1906,6 @@ label:has(input[type="password"])::before{
|
|||
font-family: "Fork Awesome";
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
margin-right: 1rem;
|
||||
color: var(--sub-text);
|
||||
margin-top: -3px; /* Adjust for Crimson Pro line-height */
|
||||
text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
|
||||
|
|
@ -1895,7 +1914,11 @@ label:has(input[type="password"])::before{
|
|||
cursor: text;
|
||||
}
|
||||
|
||||
label.search::before{
|
||||
label:has(input[type="url"])::before{
|
||||
content: "\f0c1";
|
||||
}
|
||||
|
||||
label:has(input[type="search"])::before{
|
||||
content: "\f002";
|
||||
}
|
||||
|
||||
|
|
@ -1911,6 +1934,22 @@ label.captcha::before{
|
|||
content: "\f256";
|
||||
}
|
||||
|
||||
label.year::before{
|
||||
content: "\f073";
|
||||
}
|
||||
|
||||
label.tags:not(:has(select))::before{
|
||||
content: "\f02c";
|
||||
}
|
||||
|
||||
label.picture::before{
|
||||
content: "\f03e";
|
||||
}
|
||||
|
||||
label.user::before{
|
||||
content: "\f007";
|
||||
}
|
||||
|
||||
nav li.highlighted a,
|
||||
nav a[rel],
|
||||
a.button,
|
||||
|
|
@ -2015,7 +2054,7 @@ form[action="/ebooks"] label.tags select{
|
|||
height: calc(100% - 1.4rem);
|
||||
}
|
||||
|
||||
form[action="/ebooks"] label.search{
|
||||
form[action="/ebooks"] label:has(input[type="search"]){
|
||||
grid-column: 2 / span 4;
|
||||
}
|
||||
|
||||
|
|
@ -2401,8 +2440,8 @@ form[action="/newsletter/subscriptions"]{
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
form[action*="/polls/"] label.email,
|
||||
form[action="/newsletter/subscriptions"] label.email,
|
||||
form[action*="/polls/"] label:has(input[type="email"]),
|
||||
form[action="/newsletter/subscriptions"] label:has(input[type="email"]),
|
||||
form[action="/newsletter/subscriptions"] label.captcha{
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
|
@ -2442,6 +2481,14 @@ fieldset p{
|
|||
border-bottom: 1px dashed var(--input-border);
|
||||
}
|
||||
|
||||
fieldset p:has(+ ul){
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + span:has(+ span){
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
label.checkbox{
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -2978,7 +3025,7 @@ ul.feed p{
|
|||
grid-row: 1;
|
||||
}
|
||||
|
||||
form[action="/ebooks"] label.search{
|
||||
form[action="/ebooks"] label:has(input[type="search"]){
|
||||
grid-column: 2 / span 3;
|
||||
}
|
||||
|
||||
|
|
@ -3042,7 +3089,7 @@ ul.feed p{
|
|||
height: calc(1rem + 1.4rem + 1rem + 2px); /* Size equal to a select boxes */
|
||||
}
|
||||
|
||||
form[action="/ebooks"] label.search{
|
||||
form[action="/ebooks"] label:has(input[type="search"]){
|
||||
grid-row: 1;
|
||||
grid-column: 2 / span 3;
|
||||
}
|
||||
|
|
@ -3226,7 +3273,7 @@ ul.feed p{
|
|||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
||||
form[action="/ebooks"] label.search{
|
||||
form[action="/ebooks"] label:has(input[type="search"]){
|
||||
grid-row: 1;
|
||||
grid-column: 3 / span 2;
|
||||
}
|
||||
|
|
@ -3373,7 +3420,7 @@ ul.feed p{
|
|||
grid-column: 1 / span 3;
|
||||
}
|
||||
|
||||
form[action="/ebooks"] label.search{
|
||||
form[action="/ebooks"] label:has(input[type="search"]){
|
||||
grid-row: 2;
|
||||
grid-column: 1 / span 3;
|
||||
}
|
||||
|
|
@ -3582,7 +3629,7 @@ ul.feed p{
|
|||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
form[action="/ebooks"] label.search,
|
||||
form[action="/ebooks"] label:has(input[type="search"]),
|
||||
form[action="/ebooks"] label.tags,
|
||||
form[action="/ebooks"] label.sort,
|
||||
form[action="/ebooks"] label.view,
|
||||
|
|
@ -3676,12 +3723,12 @@ ul.feed p{
|
|||
article.ebook #more-ebooks img,
|
||||
article.ebook #more-ebooks a:active img,
|
||||
ol.ebooks-list > li a[tabindex]:active,
|
||||
label.select > span + span::after,
|
||||
label.search:focus-within::before,
|
||||
label.search:hover::before,
|
||||
label.select:hover > span + span::after,
|
||||
label.email::before,
|
||||
label.search::before,
|
||||
label:has(select) > span + span::after,
|
||||
label:has(input[type="search"]):focus-within::before,
|
||||
label:has(input[type="search"]):hover::before,
|
||||
label:has(select):hover > span + span::after,
|
||||
label:has(input[type="email"])::before,
|
||||
label:has(input[type="search"])::before,
|
||||
textarea:hover,
|
||||
nav li.highlighted a,
|
||||
nav a[rel],
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ article.ebook #more-ebooks img:hover{
|
|||
box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
label.select > span + span::after,
|
||||
label:has(select) > span + span::after,
|
||||
label.search::before{
|
||||
text-shadow: 1px 1px 0 #000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -145,12 +145,11 @@ select{
|
|||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
|
||||
label.select > span{
|
||||
label:has(select) > span{
|
||||
display: block;
|
||||
}
|
||||
|
||||
label.select > span + span{
|
||||
label:has(select) > span + span{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -175,11 +174,11 @@ ol.ebooks-list.list > li .thumbnail-container{
|
|||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
ol.ebooks-list.list ul.tags{
|
||||
ol.ebooks-list.list ul.genres{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ol.ebooks-list.list ul.tags li{
|
||||
ol.ebooks-list.list ul.genres li{
|
||||
float: left;
|
||||
margin-right: .5rem;
|
||||
margin-top: .5rem;
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -31,7 +31,7 @@ if($exception){
|
|||
<label class="automation-test"><? /* Test for spam bots filling out all fields */ ?>
|
||||
<input type="text" name="automationtest" value="" maxlength="80" />
|
||||
</label>
|
||||
<label class="email">Your email address
|
||||
<label>Your email address
|
||||
<input type="email" name="email" value="<? if($subscription->User !== null){ ?><?= Formatter::EscapeHtml($subscription->User->Email) ?><? } ?>" maxlength="80" required="required" />
|
||||
</label>
|
||||
<label class="captcha">
|
||||
|
|
|
|||
|
|
@ -43,13 +43,13 @@ if($exception){
|
|||
<input type="hidden" name="redirect" value="<?= Formatter::EscapeHtml($redirect) ?>" />
|
||||
<? if($passwordRequired){ ?>
|
||||
<input type="hidden" name="email" value="<?= Formatter::EscapeHtml($email) ?>" maxlength="80" required="required" />
|
||||
<label class="password">
|
||||
<label>
|
||||
<span>Your password</span>
|
||||
<span>Logging in as <?= Formatter::EscapeHtml($email) ?>.</span>
|
||||
<input type="password" name="password" value="" required="required" />
|
||||
</label>
|
||||
<? }else{ ?>
|
||||
<label class="email">Your email address
|
||||
<label>Your email address
|
||||
<input type="email" name="email" value="<?= Formatter::EscapeHtml($email) ?>" maxlength="80" required="required" />
|
||||
</label>
|
||||
<? } ?>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ $colorScheme = $_COOKIE['color-scheme'] ?? 'auto';
|
|||
<main>
|
||||
<h1>Website Settings</h1>
|
||||
<form action="/settings" method="post">
|
||||
<label class="select">
|
||||
<label>
|
||||
<span>Color scheme</span>
|
||||
<span>
|
||||
<select name="color-scheme">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue