diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 4a93d84..06ee8a0 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -15,6 +15,7 @@
*= require_self
*/
+/* Strive for simplicity. Style elements only, if possible. */
:root {
--color-focus-gray: #f3f3f3;
--color-border-gray: #dddddd;
@@ -48,27 +49,11 @@
}
-/* TODO: collapse gaps around empty rows (`topside`) once possible
- * with grid-collapse property and remove alternative grid-template
- * https://github.com/w3c/csswg-drafts/issues/5813 */
-body {
- display: grid;
- gap: 0.8em;
- grid-template-areas:
- "header header header"
- "nav nav nav"
- "leftside topside rightside"
- "leftside main rightside";
- grid-template-columns: 1fr minmax(max-content, 2fr) 1fr;
- font-family: system-ui;
- margin: 0.4em;
-}
-body:not(:has(.topside)) {
- grid-template-areas:
- "header header header"
- "nav nav nav"
- "leftside main rightside";
-}
+/* Color coding of input controls' background:
+ * blue - target for interaction with pointer
+ * gray - target for interaction with keyboard
+ * red - destructive, non-undoable action
+ */
button,
details,
input,
@@ -82,11 +67,6 @@ input,
select {
text-align: inherit;
}
-
-
-/* blue - target for interaction with pointer */
-/* gray - target for interaction with keyboard */
-/* TODO: remove non-font-size rems from buttons/inputs below */
a,
button,
input[type=submit] {
@@ -109,7 +89,7 @@ input[type=submit]:not([hidden]),
button,
input[type=submit] {
font-size: 0.8rem;
- padding: 0.4em;
+ padding: 0.6em 0.5em;
width: fit-content;
}
input:not([type=submit]):not([type=checkbox]),
@@ -120,74 +100,25 @@ textarea {
}
.button,
button,
-details,
input,
select,
+summary,
textarea {
border: solid 1px var(--color-gray);
border-radius: 0.25em;
}
-fieldset,
+input[type=checkbox],
+svg,
textarea {
margin: 0
}
-.button > svg,
-.tab > svg,
-button > svg {
- height: 1.8em;
- width: 1.8em;
-}
-.button > svg:not(:last-child),
-.tab > svg:not(:last-child),
-button > svg:not(:last-child) {
- padding-right: 0.4em;
-}
-fieldset {
- padding: 0.4em;
-}
-fieldset:not(:has(input, select, textarea)) {
- display: none;
-}
-legend {
- color: var(--color-gray);
- display: flex;
- gap: 0.4em;
- width: 100%;
-}
-legend span {
- align-content: center;
- flex-grow: 1;
-}
-
-/* TODO: move normal non-button links (:hover/:focus) styling here (i.e.
- * page-wide, top-level) and remove from table.items - as the style should be
- * same everywhere */
-.button:focus-visible,
-button:focus-visible,
-input[type=submit]:focus-visible {
- background-color: var(--color-focus-gray);
-}
-.button:hover,
-button:hover,
-input[type=submit]:hover {
- background-color: var(--color-blue);
- border-color: var(--color-blue);
- color: white;
- fill: white;
-}
-.dangerous:hover {
- background-color: var(--color-red);
- border-color: var(--color-red);
-}
-
input[type=checkbox] {
accent-color: var(--color-blue);
appearance: none;
-webkit-appearance: none;
display: flex;
- height: 1.1rem;
- margin: 0;
- width: 1.1rem;
+ height: 1.1em;
+ width: 1.1em;
}
input[type=checkbox]:checked {
appearance: checkbox;
@@ -205,45 +136,96 @@ input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
-details:hover,
+.button > svg,
+.tab > svg,
+button > svg {
+ height: 1.4em;
+ width: 1.4em;
+}
+.button > svg:not(:last-child),
+.tab > svg:not(:last-child),
+button > svg:not(:last-child) {
+ margin-right: 0.2em;
+}
+/* TODO: move normal non-button links (:hover/:focus) styling here (i.e.
+ * page-wide, top-level) and remove from table.items - as the style should be
+ * same everywhere */
+.button:focus-visible,
+button:focus-visible,
+input[type=submit]:focus-visible {
+ background-color: var(--color-focus-gray);
+}
+input:focus-visible,
+select:focus-visible,
+select:focus-within,
+/* TODO: how to achieve summary:focus-within for ::details-content? */
+summary:focus-visible,
+textarea:focus-visible {
+ accent-color: var(--color-dark-blue);
+ background-color: var(--color-focus-gray);
+}
+.button:hover,
+button:hover,
+input[type=submit]:hover {
+ background-color: var(--color-blue);
+ border-color: var(--color-blue);
+ color: white;
+ fill: white;
+}
+.dangerous:hover {
+ background-color: var(--color-red);
+ border-color: var(--color-red);
+}
input:hover,
select:hover,
+summary:hover,
textarea:hover {
border-color: var(--color-blue);
outline: solid 1px var(--color-blue);
}
+select:hover,
+summary:hover {
+ cursor: pointer;
+}
input:invalid,
select:invalid,
textarea:invalid {
border-color: var(--color-red);
outline: solid 1px var(--color-red);
}
-details:hover,
-select:hover {
- cursor: pointer;
-}
-details:focus-visible,
-input:focus-visible,
-select:focus-within,
-select:focus-visible,
-textarea:focus-visible {
- accent-color: var(--color-dark-blue);
- background-color: var(--color-focus-gray);
-}
-fieldset,
input[type=text]:read-only,
textarea:read-only {
border: none;
- padding-left: 0;
- padding-right: 0;
+ padding-inline: 0;
}
+/* NOTE: collapse gaps around empty rows (`topside`) once possible
+ * with grid-collapse property and remove alternative grid-template
+ * https://github.com/w3c/csswg-drafts/issues/5813 */
+body {
+ display: grid;
+ gap: 0.8em;
+ grid-template-areas:
+ "header header header"
+ "nav nav nav"
+ "leftside topside rightside"
+ "leftside main rightside";
+ grid-template-columns: 1fr minmax(max-content, 2fr) 1fr;
+ font-family: system-ui;
+ margin: 0.4em;
+}
+body:not(:has(.topside)) {
+ grid-template-areas:
+ "header header header"
+ "nav nav nav"
+ "leftside main rightside";
+}
+
header {
grid-area: header;
}
-
.navigation {
display: flex;
grid-area: nav;
@@ -256,7 +238,7 @@ header {
flex: 1;
font-size: 1rem;
justify-content: center;
- padding-block: 0.3em;
+ padding-block: 0.4em;
}
.navigation > .tab:hover,
.navigation > .tab:focus-visible {
@@ -268,7 +250,6 @@ header {
fill: var(--color-blue);
}
-
.topside {
grid-area: topside;
}
@@ -282,7 +263,6 @@ header {
grid-area: rightside;
}
-
.buttongrid {
display: grid;
gap: 0.4em;
@@ -355,7 +335,7 @@ header {
}
-/* TODO: Update styling, including rem removal. */
+/* TODO: Update form styling: simplify selectors, deduplicate, remove non-font rem. */
form table {
border-spacing: 0.8rem;
}
@@ -385,16 +365,15 @@ form td.error::after {
form em {
color: var(--color-text-gray);
font-size: 0.75rem;
- font-weight: normal;
}
form input[type=submit] {
- float: none;
font-size: 1rem;
margin: 1.5rem auto 0 auto;
padding: 0.75rem;
}
+/* TODO: remove .items class and make 'form table' work properly */
table.items {
border-spacing: 0;
border: solid 1px var(--color-border-gray);
@@ -402,6 +381,9 @@ table.items {
font-size: 0.85rem;
text-align: left;
}
+table:not(:has(tr)) {
+ display: none;
+}
table.items thead {
font-size: 0.8rem;
}
@@ -478,7 +460,7 @@ table.items tr.form td {
}
/* TODO: replace :hover:focus-visible combos with proper LOVE stye order */
-/* TODO: Update styling, including rem removal. */
+/* TODO: Update table styling: simplify selectors, deduplicate, remove non-font rem. */
table.items td.link a:hover,
table.items td.link a:focus-visible,
table.items td.link a:hover:focus-visible {
@@ -502,8 +484,12 @@ table.items td:not(:first-child),
fill: var(--color-table-gray);
}
table.items svg {
- height: 1.2rem;
+ height: 1rem;
vertical-align: middle;
+ width: 1rem;
+}
+table.items svg:last-child {
+ height: 1.2rem;
width: 1.2rem;
}
table.items td.svg {
@@ -516,7 +502,8 @@ table.items .button,
table.items button,
table.items input[type=submit] {
font-weight: normal;
- padding: 0.3em;
+ height: 100%;
+ padding: 0.4em;
}
table.items input:not([type=submit]):not([type=checkbox]),
table.items select,
@@ -542,7 +529,6 @@ table.items select:focus-within,
table.items select:focus-visible {
color: black;
}
-
form a[name=cancel] {
border-color: var(--color-border-gray);
color: var(--color-nav-gray);
@@ -560,6 +546,7 @@ form table.items td:first-child {
color: inherit;
}
+
.centered {
margin: 0 auto;
}
@@ -592,7 +579,8 @@ form table.items td:first-child {
}
[disabled] {
/* label:has(input[disabled]) {
- * TODO: disabled checkbox blue square focus removal; disabled label styling
+ * TODO: disabled checkbox blue square focus removal; disabled label styling;
+ * focused label styling (currently only checkbox has focus)
* */
border-color: var(--color-border-gray) !important;
color: var(--color-border-gray) !important;
@@ -630,8 +618,10 @@ summary:has(.button) {
padding-inline-end: 0;
}
summary .button {
- border: 1px var(--color-border-gray);
- border-radius: 0;
+ border: solid 1px var(--color-border-gray);
+ border-radius: inherit;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
border-style: none none none solid;
height: 100%;
}
@@ -644,15 +634,13 @@ details[open] summary::before {
summary::marker {
padding-left: 0.25em;
}
-/* TODO: use ::details-content ? */
+/* NOTE: use details[open]::details-content once widely available */
details[open] ul {
background: white;
border: solid 1px var(--color-border-gray);
border-radius: 0.25em;
- box-sizing: content-box;
box-shadow: 1px 1px 3px var(--color-border-gray);
- margin: 0;
- margin-left: -0.9px;
+ margin: -1px 0 0 0;
padding-left: 0;
position: absolute;
width: 100%;
diff --git a/app/javascript/application.js b/app/javascript/application.js
index fd53123..c461da0 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -114,6 +114,7 @@ function formProcessKey(event) {
window.formProcessKey = formProcessKey
function detailsProcessKey(event) {
+ // TODO: up/down arrows to move focus to prev/next line
switch (event.key) {
case "Escape":
if (event.currentTarget.hasAttribute("open")) {
diff --git a/app/views/measurements/_form.html.erb b/app/views/measurements/_form.html.erb
index 6bc81d6..7976247 100644
--- a/app/views/measurements/_form.html.erb
+++ b/app/views/measurements/_form.html.erb
@@ -1,12 +1,11 @@
<%= tabular_form_with model: Measurement.new, id: :measurement_form,
class: 'topside vflex', html: {onkeydown: 'formProcessKey(event)'} do |form| %>
-
+
+ <%# TODO: right-click selection %>