Optimize styles; clean up <fieldset>

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
+/* Color coding of input controls' background:
- * with grid-collapse property and remove alternative grid-template
+ *  blue - target for interaction with pointer
- * https://github.com/w3c/csswg-drafts/issues/5813 */
+ *  gray - target for interaction with keyboard
-body {
+ *  red - destructive, non-undoable action
-  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";
-}
 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 (<a>: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;
+  height: 1.1em;
-  margin: 0;
+  width: 1.1em;
-  width: 1.1rem;
 }
 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 (<a>: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-inline: 0;
-  padding-right: 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: solid 1px var(--color-border-gray);
-  border-radius: 0;
+  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: -1px 0 0 0;
-  margin-left: -0.9px;
   padding-left: 0;
   position: absolute;
   width: 100%;

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")) {

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| %>
-  <fieldset>
+  <table class="items centered">
-    <table class="items centered">
+    <tbody id="readouts"></tbody>
-      <tbody id="readouts"></tbody>
+  </table>
-    </table>
-  </fieldset>
 
   <div class="hflex">
+    <%# TODO: right-click selection %>
     <details id="quantity_select" class="hexpand" open
              onkeydown="detailsProcessKey(event)">
       <summary autofocus>