fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-09-19 20:02:10 +00:00
Code Issues Projects Releases Wiki Activity

Form improvements

Browse source 
- Make webmention submission form a fieldset
- Re-order CSS to avoid descending specificity
- Make search label mention Search My Site
This commit is contained in:
Rohan Kumar 2022-05-30 12:07:33 -07:00
parent 0ed68c5e9a
commit 927987093e
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 57 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
assets/css/main.css
View file

@ -179,41 +179,6 @@ nav ul li {
margin-right: .375em;
}
/* Make search box and submit button as wide as possible while keeping
* them next to each other. */
/* Use table-style layout (no, not actual tables. eww.). It's like a
* single-row flexbox that supports more browsers. Kanged this CSS from
* ww.gov.uk. Give the entire width of the row to the search box, but
* allow the minimum width for the submit button. */
form > div {
display: table;
width: 100%
}
/* A text box should not look like a button */
input:not([type="submit"]) {
display: table-cell;
width: 98%;
}
form > div > div {
display: table-cell;
vertical-align: top; /* IE and some botique browsers need this */
width: 1%;
}
input {
/* Browsers like Safari make the submit button pill-shaped which
* clashes with the input box. The only purely-cosmetic change on this
* site. */
appearance: none;
/* Don't shrink the size of the text in forms or make it system-ui. */
font-family: sans-serif;
font-size: inherit;
}
/* narrow screens: reduce margin for blockquotes a lot, using
* a border instead. Put it on the left and right to make it
* LTR/RTL-neutral, for machine translators that change text
@ -284,8 +249,11 @@ samp {
font-family: monospace, monospace;
}
/* Some browsers don't support the hidden attr */
span[hidden] {
/* Some browsers don't support the hidden attr.
* I use hidden spans in backlinks to provide ARIA labels.
* Some ancient browsers don't support input[type="hidden"] */
span[hidden],
input[type="hidden"] {
display: none;
}
@ -354,6 +322,42 @@ section[aria-labelledby="webmentions"] {
content-visibility: auto;
}
/* Make search box and submit button as wide as possible while keeping
* them next to each other. */
/* Use table-style layout (no, not actual tables. eww.). It's like a
* single-row flexbox that supports more browsers. Kanged this CSS from
* ww.gov.uk. Give the entire width of the row to the search box, but
* allow the minimum width for the submit button. */
form > div {
display: table;
width: 100%
}
input {
/* Browsers like Safari make the submit button pill-shaped which
* clashes with the input box. The only purely-cosmetic change on this
* site. */
appearance: none;
/* Don't shrink the size of the text in forms or make it system-ui. */
font-family: sans-serif;
font-size: inherit;
}
/* A text box should take all available width */
input:not([type="submit"]) {
display: table-cell;
width: 98%;
}
/* Pseudo-table-cell containing the submit button */
form > div > div {
display: table-cell;
vertical-align: top; /* IE and some botique browsers need this */
width: 1%;
}
/* Some browser focus indicators are inaccessible; override them with
* something more visible. See WCAG 2.x SC 2.4.12. I also tried to

2
layouts/partials/search.html
View file

@ -1,7 +1,7 @@
<form
itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction"
action="https://searchmysite.net/search/" method="get">
<label for="search">Search this site:</label>
<label for="search">Search this site (powered by <a rel="nofollow" href="https://searchmysite.net/">Search My Site</a>):</label>
<div><!--We need the extra divs to serve as pseudo-table-cells.-->
<input id="search" itemprop="query" type="search" value="domain:seirdy.one " name="q">
<div><input type="submit" value="search"></div>

27
layouts/partials/webmention-form.html
View file

@ -1,12 +1,15 @@
<form
itemprop="potentialAction" itemscope itemtype="https://schema.org/CommentAction"
action="https://seirdy.one/webmentions/receive" method="post">
<meta itemprop="actionStatus" content="PotentialActionStatus">
<label for="menchie">Publish a response on your own website and share the link here to send me a webmention! Include a link to this page's canonical location for it to be accepted.</label>
{{ $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" -}}
<input type="hidden" name="target" value="{{ .Site.Params.canonicalBaseURL }}{{ $canonicalRelPermalink }}">
<div><!--We need the extra divs to serve as pseudo-table-cells.-->
<input id="menchie" type="url" name="source">
<div><input type="submit" value="submit"></div>
</div>
</form>
<fieldset>
<legend>Publish a response on your own website and share the link here to send me a webmention! Include a link to this page's canonical location for it to be accepted.</legend>
<form
itemprop="potentialAction" itemscope itemtype="https://schema.org/CommentAction"
action="https://seirdy.one/webmentions/receive" method="post">
<meta itemprop="actionStatus" content="PotentialActionStatus">
{{ $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" -}}
<input type="hidden" name="target" value="{{ .Site.Params.canonicalBaseURL }}{{ $canonicalRelPermalink }}">
<label for="menchie">URL of page linking here</label>
<div><!--We need the extra divs to serve as pseudo-table-cells.-->
<input id="menchie" type="url" name="source">
<div><input type="submit" value="submit"></div>
</div>
</form>
</fieldset>