Clean up and improve items-table styling

Closes #9
Improve Measurement form layout and styling
2026-04-03 20:44:10 +02:00 · 2026-03-22 01:06:38 +01:00 · 2026-03-19 20:30:16 +01:00 · 2026-03-06 01:42:32 +01:00 · 2026-03-06 01:33:23 +01:00 · 2026-03-04 17:13:11 +01:00
39 changed files with 581 additions and 489 deletions
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -0,0 +1,34 @@
+DESIGN
+======
+
+Below is a list of design decisions. The justification is to be consulted
+whenever a change is considered, to avoid regressions.
+
+### Data type for DB storage of numeric values (`decimal` vs `float`)
+
+* among database engines supported (by Rails), SQLite offers storage of
+  `decimal` data type with the lowest precision, equal to the precision of
+  `REAL` type (double precision float value, IEEE 754), but in a floating point
+  format,
+    * decimal types in other database engines offer greater precision, but store
+      data in a fixed point format,
+* biology-related values differ by several orders of magnitude; storing them in
+  fixed point format would only make sense if required precision would be
+  greater than that offered by floating point format,
+    * even then, fixed point would mean either bigger memory requirements or
+      worse precision for numbers close to scale limit,
+        * for a fixed point format to use the same 8 bytes of storage as IEEE
+          754, precision would need to be limited to 18 digits (4 bytes/9 digits)
+          and scale approximately half of that - 9,
+    * double precision floating point guarantees 15 digits of precision, which
+      is more than enough for all expected use cases,
+        * single precision floating point only guarntees 6 digits of precision,
+          which is estimated to be too low for some use cases (e.g. storing
+          latitude/longitude with a resolution grater than 100m)
+* double precision floating point (IEEE 754) is a standard that ensures
+  compatibility with all database engines,
+    * the same data format is used internally by Ruby as a `Float`; it
+      guarantees no conversions between storage and computation,
+    * as a standard with hardware implementations ensures both: computing
+      efficiency and hardware/3rd party library compatibility as opposed to Ruby
+      custom `BigDecimal` type
--- a/app/assets/images/pictograms/alert-outline.svg
+++ b/app/assets/images/pictograms/alert-outline.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
--- a/app/assets/images/pictograms/check-circle-outline.svg
+++ b/app/assets/images/pictograms/check-circle-outline.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -18,10 +18,12 @@
 /* Strive for simplicity:
 * * style elements/tags only - if possible,
 * * replace element/tag name with class name - if element has to be styled
- * differently depending on context (e.g. form)
+ * differently depending on context (e.g. <form>, <table>, <a> as link/button),
+ * * styles with multiple selectors should have all selectors with same
+ * specificity, to allow proper rule specificity vs order management.
 *
- * NOTE: Style in a modular way, similar to how CSS @scope would be used,
- * to make transition easier once @scope is widely available */
+ * NOTE: style in a modular way, similar to how CSS @scope would be used,
+ * to make transition easier once @scope is widely available. */
 :root {
  --color-focus-gray: #f3f3f3;
  --color-border-gray: #dddddd;
@@ -53,17 +55,36 @@
 :focus-visible {
  outline: none;
 }
+/* NOTE: move to higher priority layer instead of using !important?; add CSS
+ * @layer requirements in README */
+[disabled] {
+  border-color: var(--color-border-gray) !important;
+  color: var(--color-border-gray) !important;
+  /* NOTE: cannot set cursor when `pointer-events: none`; can be fixed by setting
+   * `cursor` on wrapping element.
+  cursor: not-allowed; */
+  fill: var(--color-border-gray) !important;
+  pointer-events: none !important;
+}
+/* Styles set `display` without distinguishing between [hidden] elements, making
+ * them visible. */
+[hidden] {
+  display: none !important;
+}


 /* Color coding of input controls' background:
- *  blue - target for interaction with pointer
- *  gray - target for interaction with keyboard
- *  red - destructive, non-undoable action
+ *  blue - target for interaction with pointer,
+ *  gray - target for interaction with keyboard,
+ *  red - destructive, non-undoable action.
 */
+/* TODO: merge selectors using :is() */
+a,
 button,
 details,
 input,
 select,
+summary,
 textarea {
  background-color: inherit;
  font: inherit;
@@ -73,50 +94,24 @@ input,
 select {
  text-align: inherit;
 }
-a,
-button,
-input[type=submit] {
-  cursor: pointer;
-  text-decoration: none;
-  white-space: nowrap;
-}
-/* [hidden] submit controls cannot have `display` set as it makes them visible */
-.button,
-button:not([hidden]),
-input[type=submit]:not([hidden]),
-.tab {
-  align-items: center;
-  color: var(--color-gray);
-  display: flex;
-  fill: var(--color-gray);
-  font-weight: bold;
-}
-.button,
-button,
-input[type=submit] {
-  font-size: 0.8rem;
-  padding: 0.6em 0.5em;
-  width: fit-content;
-}
-input:not([type=submit]):not([type=checkbox]),
-select,
-summary,
-textarea {
-  padding: 0.2em 0.4em;
-}
-.button,
-button,
 input,
 select,
 summary,
 textarea {
-  border: solid 1px var(--color-gray);
+  border: 1px solid var(--color-gray);
  border-radius: 0.25em;
+  padding: 0.2em 0.4em;
+}
+svg {
+  height: 1.4em;
+  margin: 0 0.2em 0 0;
+  width: 1.4em;
+}
+svg:last-child {
+  margin-right: 0;
 }
-input[type=checkbox],
-svg,
 textarea {
-  margin: 0
+  margin: 0;
 }
 input[type=checkbox] {
  accent-color: var(--color-blue);
@@ -124,16 +119,20 @@ input[type=checkbox] {
  -webkit-appearance: none;
  display: flex;
  height: 1.1em;
+  margin: 0;
+  padding: 0;
  width: 1.1em;
 }
 input[type=checkbox]:checked {
  appearance: checkbox;
  -webkit-appearance: checkbox;
 }
-/* Hide spin buttons in input number fields */
+/* Hide spin buttons of <input type=number>. */
+/* TODO: add spin buttons inside <input type=number>: before (-) and after (+) input. */
 input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
+  text-align: end;
 }
 input::-webkit-inner-spin-button {
  -webkit-appearance: none;
@@ -142,37 +141,113 @@ input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
 }
-.button > svg,
-.tab > svg,
-button > svg {
-  height: 1.4em;
-  width: 1.4em;
+/* Text color of table form controls:
+ *  - black for row/table forms,
+ *  - inherited for internal (column specific) buttons/forms. */
+table input,
+table select,
+table summary,
+table textarea {
+  border-color: var(--color-border-gray);
 }
-.button > svg:not(:last-child),
-.tab > svg:not(:last-child),
-button > svg:not(:last-child) {
-  margin-right: 0.2em;
+table input,
+table select,
+table textarea {
+  padding-block: 0.375em;
 }
-/* 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);
+table form input,
+table form select,
+table form summary,
+table form textarea {
+  color: inherit;
+}
+table svg:not(:only-child) {
+  height: 1.25em;
+  width: 1.25em;
 }
 input:focus-visible,
 select:focus-visible,
 select:focus-within,
-/* TODO: how to achieve summary:focus-within for ::details-content? */
+/* 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);
+  color: black;
 }
-.button:hover,
-button:hover,
-input[type=submit]:hover {
+input:hover,
+select:hover,
+summary:hover,
+textarea:hover {
+  border-color: var(--color-blue);
+  outline: 1px solid var(--color-blue);
+}
+select:hover,
+summary:hover {
+  color: black;
+  cursor: pointer;
+}
+/* TODO: style <details>/<summary> focus to match <select> as much as possible.
+summary:focus-visible::before,
+summary:hover::before {
+  background-color: black;
+}
+ */
+input:invalid,
+select:invalid,
+textarea:invalid {
+  border-color: var(--color-red);
+  outline-color: var(--color-red);
+}
+
+/* `.button`: button-styled <a>, <button>, <input type=submit>.
+ * `.link`: any other <a>.
+ * `.tab`: tab-styled <a>.
+ */
+.button,
+.link,
+.tab {
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.button,
+.tab {
+  align-items: center;
+  color: var(--color-gray);
+  display: flex;
+  fill: var(--color-gray);
+  font-weight: bold;
+}
+.button {
+  border: 1px solid var(--color-gray);
+  border-radius: 0.25em;
+  font-size: 0.8rem;
+  padding: 0.6em 0.5em;
+  width: fit-content;
+}
+.link {
+  color: inherit;
+  text-decoration: underline 1px var(--color-border-gray);
+  text-underline-offset: 0.25em;
+}
+.auxiliary {
+  border-color: var(--color-nav-gray);
+  color: var(--color-nav-gray);
+  fill: var(--color-nav-gray);
+}
+table .button {
+  border-color: var(--color-border-gray);
+  font-weight: normal;
+  height: 100%;
+  padding: 0.4em;
+}
+.button:focus-visible,
+.tab:focus-visible,
+.tab:hover {
+  background-color: var(--color-focus-gray);
+}
+.button:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: white;
@@ -182,32 +257,17 @@ input[type=submit]: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);
+.link:focus-visible {
+  text-decoration-color: var(--color-gray);
 }
-select:hover,
-summary:hover {
-  cursor: pointer;
-}
-input:invalid,
-select:invalid,
-textarea:invalid {
-  border-color: var(--color-red);
-  outline: solid 1px var(--color-red);
-}
-input[type=text]:read-only,
-textarea:read-only {
-  border: none;
-  padding-inline: 0;
+.link:hover {
+  color: var(--color-blue);
+  text-decoration-color: var(--color-blue);
 }


-/* NOTE: collapse gaps around empty rows (`topside`) once possible
- * with grid-collapse property and remove alternative grid-template
+/* NOTE: collapse gaps around empty rows (`topside`) once possible with
+ * `grid-collapse` property and remove alternative `grid-template-areas`.
 * https://github.com/w3c/csswg-drafts/issues/5813 */
 body {
  display: grid;
@@ -215,16 +275,16 @@ body {
  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-area)) {
+body:has(> .topside-area) {
  grid-template-areas:
    "header    header  header"
    "nav       nav     nav"
+    "leftside  topside rightside"
    "leftside  main    rightside";
 }

@@ -240,18 +300,14 @@ header {
  margin-inline-start: 4%;
 }
 .navigation > .tab {
-  border-bottom: solid 2px var(--color-nav-gray);
+  border-bottom: 2px solid var(--color-nav-gray);
  flex: 1;
  font-size: 1rem;
  justify-content: center;
  padding-block: 0.4em;
 }
-.navigation > .tab:hover,
-.navigation > .tab:focus-visible {
-  background-color: var(--color-focus-gray);
-}
 .navigation > .tab.active {
-  border-bottom: solid 4px var(--color-blue);
+  border-bottom: 4px solid var(--color-blue);
  color: var(--color-blue);
  fill: var(--color-blue);
 }
@@ -283,7 +339,7 @@ header {

 #flashes {
  display: grid;
-  gap: 0.2em;
+  row-gap: 0.4em;
  grid-template-columns: 1fr auto auto auto 1fr;
  left: 0;
  pointer-events: none;
@@ -299,48 +355,42 @@ header {
  display: grid;
  grid-column: 2/5;
  grid-template-columns: subgrid;
+  line-height: 2.2em;
  pointer-events: auto;
 }
-.flash.alert:before {
-  content: url('pictograms/alert-outline.svg');
+.flash::before {
+  filter: invert(1);
  height: 1.4em;
  margin: 0 0.5em;
  width: 1.4em;
 }
+.flash.alert::before {
+  content: url('pictograms/alert-outline.svg');
+}
 .flash.alert {
  border-color: var(--color-red);
  background-color: var(--color-red);
 }
-.flash.notice:before {
+.flash.notice::before {
  content: url('pictograms/check-circle-outline.svg');
-  height: 1.4em;
-  margin: 0 0.5em;
-  width: 1.4em;
 }
 .flash.notice {
  border-color: var(--color-blue);
  background-color: var(--color-blue);
 }
-.flash > div {
-  grid-column: 2;
-}
-/* NOTE: currently flash button inherits some unnecessary styles from generic
- * button. */
-.flash > button {
-  border: none;
-  color: inherit;
+.flash svg {
  cursor: pointer;
-  font-size: 1.4em;
-  font-weight: bold;
-  grid-column: 3;
+  fill: white;
+  height: 2.2em;
  opacity: 0.6;
-  padding: 0.2em 0.4em;
+  padding: 0.4em 0.5em;
+  width: 2.4em;
 }
-.flash > button:hover {
+.flash svg:hover {
  opacity: 1;
 }

-/* TODO: Hover over invalid should work like in measurements (thin vs thick border) */
+
 .labeled-form {
  align-items: center;
  display: grid;
@@ -357,7 +407,7 @@ header {
 .labeled-form label.required {
  font-weight: bold;
 }
-/* Don't style `label.error + input` if case already covered by input:invalid */
+/* Don't style `label.error + input` if case already covered by `input:invalid`. */
 .labeled-form label.error {
  color: var(--color-red);
 }
@@ -371,203 +421,126 @@ header {
 }
 .labeled-form input[type=submit] {
  font-size: 1rem;
-  margin: 1.5em auto 0 auto;
+  margin: 1em auto 0 auto;
  padding: 0.75em;
 }
+.labeled-form .auxiliary {
+  grid-column: 3;
+  /* If more buttons are needed, `grid-row` can be replaced with
+   * `reading-flow: grid-columns` to ensure proper [tabindex] order. */
+  grid-row: 1;
+  height: 100%;
+  padding-block: 0;
+}
+
+.tabular-form table {
+  border: none;
+  border-spacing: 0;
+}
+.tabular-form table td {
+  border: none;
+  padding-inline-start: 0.4em;
+  vertical-align: middle;
+}
+.tabular-form table td:first-child {
+  padding-inline-start: 0;
+}
+.tabular-form table td:last-child {
+  padding-inline-end: 0;
+}
+.tabular-form table :is(form, input, select, textarea):only-child {
+  margin-inline-start: 0;
+}


-/* TODO: remove .items class (?) and make 'form table' work properly */
-table.items {
+.items-table {
  border-spacing: 0;
-  border: solid 1px var(--color-border-gray);
+  border: 1px solid var(--color-border-gray);
  border-radius: 0.25em;
  font-size: 0.85rem;
  text-align: left;
 }
-table:not(:has(tr)) {
-  display: none;
-}
-table.items thead {
+.items-table thead {
  font-size: 0.8rem;
 }
-table.items thead,
-table.items tbody tr:hover {
+.items-table thead,
+.items-table tbody tr:hover {
  background-color: var(--color-focus-gray);
 }
-table.items th {
-  padding-block: 0.75em;
+.items-table th {
+  padding: 0.75em 0 0.75em 1em;
  text-align: center;
 }
-table.items th,
-table.items td {
-  padding-inline: 1em 0;
-}
-/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
-table.items td.link {
-  padding: 0;
-  position: relative;
-}
-table.items td.link a {
-  color: inherit;
-  font: inherit;
-}
-table.items td.link a::after {
-  content: '';
-  inset: 0;
-  position: absolute;
-}
-table.items td:first-child {
-  padding-inline-start: calc(1em + var(--depth) * 0.8em);
-}
-table.items td:has(input, select, textarea) {
-  padding-inline-start: calc(0.6em - 0.9px);
-}
-table.items td:first-child:has(input, select, textarea) {
-  padding-inline-start: calc(0.6em + var(--depth) * 0.8em - 0.9px);
-}
-table.items th:last-child {
+.items-table th:last-child {
  padding-inline-end: 0.4em;
 }
-table.items td:last-child {
+.items-table td {
+  border-top: 1px solid var(--color-border-gray);
+  height: 2.4em;
+  padding: 0.1em 0 0.1em calc(1em + var(--depth) * 0.8em);
+}
+.items-table td:last-child {
  padding-inline-end: 0.1em;
 }
-table.items td {
-  border-top: solid 1px var(--color-border-gray);
-  height: 2.4em;
-  padding-block: 0.1em;
+.items-table :is(form, input, select, textarea):only-child {
+  margin-inline-start: calc(-0.4em - 0.9px);
 }
-table.items .actions {
-  display: flex;
+/* For <a> to fill table cell completely, we use an `::after` pseudoelement. */
+/* TODO: expand to whole row? will require adjusting z-index on inputs/buttons */
+.items-table td:has(> .link) {
+  position: relative;
+}
+.items-table .link::after {
+  content: '';
+  inset: -1px 0 0 0;
+  position: absolute;
+}
+.items-table .flex {
  gap: 0.4em;
  justify-content: end;
 }
-table.items .actions.centered {
-  justify-content: center;
-}
-table.items tr.dropzone {
+.items-table .dropzone {
  position: relative;
 }
-table.items tr.dropzone::after {
+.items-table .dropzone::after {
  content: '';
  inset: 1px 0 0 0;
  position: absolute;
-  outline: dashed 2px var(--color-blue);
+  outline: 2px dashed var(--color-blue);
  outline-offset: -1px;
  z-index: var(--z-index-table-row-outline);
 }
-table.items td.handle {
-  cursor: move;
+.items-table .handle {
+  cursor: grab;
 }
-table.items tr.form td {
+.items-table .form td {
  vertical-align: top;
 }
-
-/* TODO: replace :hover:focus-visible combos with proper LOVE stye order */
-/* 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 {
-  text-decoration: underline;
-  text-decoration-thickness: 0.05rem;
-  text-underline-offset: 0.2rem;
-}
-table.items td.link a:hover {
-  color: var(--color-blue);
-}
-table.items td.link a:focus-visible {
-  text-decoration-color: var(--color-gray);
-}
-table.items td.link a:hover:focus-visible {
-  color: var(--color-dark-blue);
-}
-
-table.items td:not(:first-child),
+.items-table td:not(:first-child),
 .grayed {
  color: var(--color-table-gray);
-  fill: var(--color-table-gray);
+  fill: var(--color-gray);
 }
-table.items svg {
-  height: 1rem;
-  vertical-align: middle;
-  width: 1rem;
-}
-table.items svg:last-child {
-  height: 1.2rem;
-  width: 1.2rem;
-}
-table.items td.svg {
+.items-table td:has(> svg:only-child) {
  text-align: center;
 }
-table.items td.number {
-  text-align: right;
-}
-table.items .button,
-table.items button,
-table.items input[type=submit] {
-  font-weight: normal;
-  height: 100%;
-  padding: 0.4em;
-}
-table.items input:not([type=submit]):not([type=checkbox]),
-table.items select,
-table.items textarea {
-  padding-block: 0.375em;
-}
-/* TODO: find a way (layers?) to style inputs differently while making sure
- * hover works properly without using :not(:hover) selectors here. */
-table.items .button:not(:hover),
-table.items button:not(:hover),
-table.items input:not(:hover),
-table.items select:not(:hover),
-table.items textarea:not(:hover) {
-  border-color: var(--color-border-gray);
-}
-table.items .button:not(:hover),
-table.items button:not(:hover),
-table.items input[type=submit]:not(:hover),
-table.items select:not(:hover) {
-  color: var(--color-table-gray);
-}
-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);
-  fill: var(--color-nav-gray);
-}
-form table.items {
-  border: none;
-}
-form table.items td {
-  border: none;
-  text-align: left;
-  vertical-align: middle;
-}
-form table.items td:first-child {
-  color: inherit;
-}


-.centered {
+.center {
  margin: 0 auto;
 }
-.extendedright {
-  margin-right: auto;
-}
 .hexpand {
  width: 100%;
 }
-.hflex {
+.flex {
  display: flex;
  gap: 0.8em;
 }
-.hflex.reverse {
+.flex.reverse {
  flex-direction: row-reverse;
 }
-.hflex.centered {
-  justify-content: center;
+.flex.vertical {
+  flex-direction: column;
 }
 .hint {
  color: var(--color-table-gray);
@@ -575,21 +548,18 @@ form table.items td:first-child {
  font-size: 0.9rem;
  text-align: center;
 }
-.vflex {
-  display: flex;
-  gap: 0.8em;
-  flex-direction: column;
+.hmin50 {
+  min-width: 50%;
 }
-[disabled] {
-/* label:has(input[disabled]) {
- * 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;
-  cursor: not-allowed;
-  fill: var(--color-border-gray) !important;
-  pointer-events: none;
+.italic {
+  color: var(--color-gray);
+  font-style: italic;
+}
+.ralign {
+  text-align: right;
+}
+.rextend {
+  margin-right: auto;
 }


@@ -601,12 +571,12 @@ summary {
  align-items: center;
  color: var(--color-gray);
  display: flex;
-  gap: 0.2em;
+  gap: 0.4em;
  height: 100%;
  white-space: nowrap;
 }
 summary::before {
-  background-color: #000;
+  background-color: currentColor;
  content: "";
  height: 1em;
  mask-image: url('pictograms/chevron-down.svg');
@@ -618,7 +588,7 @@ summary:has(.button) {
  padding-inline-end: 0;
 }
 summary .button {
-  border: solid 1px var(--color-border-gray);
+  border: 1px solid var(--color-border-gray);
  border-radius: inherit;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
@@ -629,15 +599,15 @@ summary span {
  width: 100%;
 }
 details[open] summary::before {
-  transform: rotate(180deg);
+  transform: scaleY(-1);
 }
 summary::marker {
  padding-left: 0.25em;
 }
-/* NOTE: use details[open]::details-content once widely available */
+/* NOTE: use `details[open]::details-content` once widely available. */
 details[open] ul {
-  background: white;
-  border: solid 1px var(--color-border-gray);
+  background-color: white;
+  border: 1px solid var(--color-border-gray);
  border-radius: 0.25em;
  box-shadow: 1px 1px 3px var(--color-border-gray);
  margin: -1px 0 0 0;
@@ -659,3 +629,15 @@ li input[type=checkbox] {
 li::marker {
  content: '';
 }
+/*
+ * TODO:
+ * * disable <label> containing disabled checkbox: `label:has(input[disabled])`,
+ * * disabled label styling,
+ * * focused label styling (currently only checkbox has focus),
+ * * disabled checkbox blue square focus removal.
+ * */
+
+#measurement_form {
+  min-width: 66%;
+  width: max-content;
+}
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -25,6 +25,18 @@ class ApplicationController < ActionController::Base
  #   Turbo will reload 2nd time with HTML format and flashes will be lost.
  rescue_from *ActionDispatch::ExceptionWrapper.rescue_responses.keys, with: :rescue_turbo

+  # Required by #respond_with (gem `responders`) used by Devise controllers.
+  respond_to :html, :turbo_stream
+
+  def after_sign_in_path_for(resource)
+    # TODO: allow setting path per-user or save last path in session and restore
+    units_path
+  end
+
+  def after_sign_out_path_for(resource)
+    new_user_session_path
+  end
+
  protected

  def current_user_disguised?
--- a/app/controllers/user/profiles_controller.rb
+++ b/app/controllers/user/profiles_controller.rb
@@ -1,6 +1,4 @@
-class RegistrationsController < Devise::RegistrationsController
-  before_action :authenticate_user!, only: [:edit, :update, :destroy]
-
+class User::ProfilesController < Devise::RegistrationsController
  def destroy
    # TODO: Disallow/disable deletion for last admin account; update :edit view
    super
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -37,7 +37,7 @@ class UsersController < ApplicationController
  end

  # NOTE: limited actions availabe to :admin by design. Users are meant to
-  # manage their accounts by themselves through registrations. :admin
+  # manage their accounts by themselves through profiles. :admin
  # is allowed to sign-in (disguise) as user and make changes from there.

  protected
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -12,6 +12,12 @@ module ApplicationHelper
      labeled_field_for(method, options) { super }
    end

+    def submit(value = nil, options = {})
+      value, options = nil, value if value.is_a?(Hash)
+      options[:class] = @template.class_names('button', options[:class])
+      super
+    end
+
    private

    def labeled_field_for(method, options)
@@ -72,13 +78,8 @@ module ApplicationHelper
  end

  def labeled_form_for(record, options = {}, &block)
-    extra_options = {builder: LabeledFormBuilder,
-                     data: {turbo: false},
-                     html: {class: 'labeled-form'}}
-    options = options.deep_merge(extra_options) do |key, left, right|
-      key == :class ? class_names(left, right) : right
-    end
-    form_for(record, **options, &block)
+    extra_options = {builder: LabeledFormBuilder, html: {class: 'labeled-form'}}
+    form_for(record, **merge_attributes(options, extra_options), &block)
  end

  class TabularFormBuilder < ActionView::Helpers::FormBuilder
@@ -101,20 +102,28 @@ module ApplicationHelper

    def number_field(method, options = {})
      attr_type = object.type_for_attribute(method)
-      if attr_type.type == :decimal
+      case attr_type.type
+      when :decimal
        options[:value] = object.public_send(method)&.to_scientific
        options[:step] ||= BigDecimal(10).power(-attr_type.scale)
        options[:max] ||= BigDecimal(10).power(attr_type.precision - attr_type.scale) -
          options[:step]
        options[:min] = options[:min] == :step ? options[:step] : options[:min]
        options[:min] ||= -options[:max]
+        options[:size] ||= attr_type.precision / 2
+      when :float
+        options[:size] ||= 6
      end
      super
    end

    def button(value = nil, options = {}, &block)
-      # button does not use #objectify_options
-      options.merge!(@options.slice(:form))
+      # #button does not use #objectify_options/@default_options
+      value, options = nil, value if value.is_a?(Hash)
+      options = options.merge(
+        @default_options.slice(:form),
+        class: @template.class_names('button', options[:class])
+      )
      super
    end

@@ -135,20 +144,22 @@ module ApplicationHelper
    # [autofocus].  Otherwise IDs are not unique when multiple forms are open
    # and the first input gets focus.
    record_object, options = nil, record_object if record_object.is_a?(Hash)
-    options.merge!(builder: TabularFormBuilder, skip_default_ids: true)
+    extra_options = {builder: TabularFormBuilder, skip_default_ids: true}
+    options = merge_attributes(options, extra_options)
    # TODO: set error message with setCustomValidity instead of rendering to flash?
    render_errors(record_object || record_name)
    fields_for(record_name, record_object, **options, &block)
  end

  def tabular_form_with(**options, &block)
-    options = options.deep_merge(builder: TabularFormBuilder,
-                                 html: {autocomplete: 'off'})
-    form_with(**options, &block)
+    extra_options = {builder: TabularFormBuilder, class: 'tabular-form',
+                     html: {autocomplete: 'off'}}
+    form_with(**merge_attributes(options, extra_options), &block)
  end

  def svg_tag(source, label = nil, options = {})
-    svg_tag = tag.svg(options) do
+    label, options = nil, label if label.is_a? Hash
+    svg_tag = tag.svg(**options) do
      tag.use(href: "#{image_path(source + ".svg")}#icon")
    end
    label.blank? ? svg_tag : svg_tag + tag.span(label)
@@ -159,6 +170,7 @@ module ApplicationHelper
      ['measurements', 'scale-bathroom', :restricted],
      ['quantities', 'axis-arrow', :restricted, 'right'],
      ['units', 'weight-gram', :restricted],
+      # TODO: display users tab only if >1 user present; sole_user?/sole_admin?
      ['users', 'account-multiple-outline', :admin],
    ]

@@ -206,6 +218,7 @@ module ApplicationHelper

  def render_errors(records)
    # Conversion of flash to Array only required because of Devise
+    # TODO: override Devise message setting to Array()?
    flash[:alert] = Array(flash[:alert])
    Array(records).each { |record| flash[:alert] += record.errors.full_messages }
  end
@@ -215,8 +228,8 @@ module ApplicationHelper
      # Conversion of flash to Array only required because of Devise
      Array(messages).map do |message|
        tag.div class: "flash #{entry}" do
-          tag.div(sanitize(message)) + tag.button(sanitize("&times;"), tabindex: -1,
-                                                  onclick: "this.parentElement.remove();")
+          tag.span(sanitize(message)) +
+            svg_tag('pictograms/close-outline', {onclick: "this.parentElement.remove()"})
        end
      end
    end.join.html_safe
@@ -252,4 +265,11 @@ module ApplicationHelper

    [name, html_options]
  end
+
+  # Like Hash#deep_merge, but aware of HTML attributes.
+  def merge_attributes(left, right)
+    left.deep_merge(right) do |key, lvalue, rvalue|
+      key == :class ? class_names(lvalue, rvalue) : rvalue
+    end
+  end
 end
--- a/app/helpers/quantities_helper.rb
+++ b/app/helpers/quantities_helper.rb
@@ -1,9 +1,9 @@
 module QuantitiesHelper
-  def quantities_check_boxes
+  def quantities_check_boxes(quantities)
    # Closing <details> on focusout event depends on relatedTarget for internal
    # actions being non-null. To ensure this, all top-layer elements of
    # ::details-content must accept focus, e.g. <label> needs tabindex="-1" */
-    collection_check_boxes(nil, :quantity, @quantities, :id, :to_s_with_depth,
+    collection_check_boxes(nil, :quantity, quantities, :id, :to_s_with_depth,
                           include_hidden: false) do |b|
      content_tag :li, b.label(tabindex: -1) { b.check_box + b.text }
    end
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -37,6 +37,18 @@ window.detailsObserver = new MutationObserver((mutations) => {
  mutations[0].target.dispatchEvent(new Event('change', {bubbles: true}))
 });

+function formValidate(event) {
+  var id = event.submitter.getAttribute("data-validate")
+  if (!id) return;
+
+  var input = document.getElementById(id)
+  if (!input.checkValidity()) {
+    input.reportValidity()
+    event.preventDefault()
+  }
+}
+window.formValidate = formValidate
+

 /* Turbo stream actions */
 Turbo.StreamElement.prototype.disableElement = function(element) {
--- a/app/views/default/units/_unit.html.erb
+++ b/app/views/default/units/_unit.html.erb
@@ -5,7 +5,7 @@
  </td>

  <% if current_user.at_least(:active) %>
-    <td class="actions">
+    <td class="flex">
      <% unless unit.portable.nil? %>
        <% if unit.default? %>
          <%= image_button_to_if unit.portable?, t('.import'), 'download-outline',
--- a/app/views/default/units/index.html.erb
+++ b/app/views/default/units/index.html.erb
@@ -8,7 +8,7 @@
    class: 'tools-area' %>
 </div>

-<table class="main-area items">
+<table class="main-area items-table">
  <thead>
    <tr>
      <th><%= Unit.human_attribute_name(:symbol) %></th>
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -23,10 +23,10 @@
  </head>

  <body>
-    <header class="hflex">
+    <header class="flex">
      <%= image_link_to t(".source_code"), "code-braces", source_code_url %>
      <%= image_link_to t(".issue_tracker"), "bug-outline", issue_tracker_url,
-            class: "extendedright" %>
+        class: "rextend" %>
      <% if user_signed_in? %>
        <%= image_link_to_unless_current(current_user, "account-wrench-outline",
          edit_user_registration_path) %>
--- a/app/views/measurements/_form.html.erb
+++ b/app/views/measurements/_form.html.erb
@@ -1,12 +1,22 @@
 <%= tabular_form_with model: Measurement.new, id: :measurement_form,
-  class: 'topside-area vflex', html: {onkeydown: 'formProcessKey(event)'} do |form| %>
-  <table class="items centered">
-    <tbody id="readouts"></tbody>
+  class: 'topside-area flex vertical center',
+  html: {onkeydown: 'formProcessKey(event)'} do |form| %>
+
+  <table class="items-table center">
+    <tbody id="readouts">
+      <%= tabular_fields_for @measurement do |form| %>
+        <tr class="italic">
+          <td class="hexpand hmin50"><%= t '.taken_at_html' %></td>
+          <td colspan="3" class="ralign">
+            <%= form.datetime_field :taken_at, required: true %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
  </table>

-  <div class="hflex">
-    <%# TODO: right-click selection %>
-    <details id="quantity_select" class="hexpand" open
+  <%# TODO: right-click selection; unnecessary with hierarchical tags? %>
+  <details id="quantity_select" class="center hexpand" open
           onkeydown="detailsProcessKey(event)">
    <summary autofocus>
      <!-- TODO: Set content with CSS when span empty to avoid duplication -->
@@ -17,14 +27,13 @@
        formaction: new_readout_path, formmethod: :get, formnovalidate: true,
        data: {turbo_stream: true} %>
    </summary>
-      <ul><%= quantities_check_boxes %></ul>
+    <ul><%= quantities_check_boxes(@quantities) %></ul>
  </details>
-    <%= form.button id: :create_measurement_button, disabled: true -%>
-  </div>

-  <div class="hflex reverse">
+  <div class="flex reverse">
+    <%= form.button id: :create_measurement_button, disabled: true -%>
    <%= image_link_to t(:cancel), "close-outline", measurements_path, name: :cancel,
-      class: 'dangerous', onclick: render_turbo_stream('form_close') %>
+      class: 'auxiliary dangerous', onclick: render_turbo_stream('form_close') %>
  </div>
 <% end %>

--- a/app/views/quantities/_form.html.erb
+++ b/app/views/quantities/_form.html.erb
@@ -9,7 +9,7 @@
      <%= form.text_area :description, cols: 30, rows: 1, escape: false %>
    </td>

-    <td class="actions">
+    <td class="flex">
      <%= form.button %>
      <%= image_link_to t(:cancel), "close-outline", quantities_path, class: 'dangerous',
        name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
--- a/app/views/quantities/_quantity.html.erb
+++ b/app/views/quantities/_quantity.html.erb
@@ -5,14 +5,14 @@
           data: {drag_path: reparent_quantity_path(quantity), drop_id: dom_id(quantity),
                  drop_id_param: "quantity[parent_id]"} do %>

-  <td class="link" style="--depth:<%= quantity.depth %>">
-    <%= link_to quantity, edit_quantity_path(quantity), onclick: 'this.blur();',
-      data: {turbo_stream: true} %>
+  <td style="--depth:<%= quantity.depth %>">
+    <%= link_to quantity, edit_quantity_path(quantity), class: 'link',
+      onclick: 'this.blur();', data: {turbo_stream: true} %>
  </td>
  <td><%= quantity.description %></td>

  <% if current_user.at_least(:active) %>
-    <td class="actions">
+    <td class="flex">
      <%= image_link_to t('.new_subquantity'), 'plus-outline', new_quantity_path(quantity),
        id: dom_id(quantity, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>

--- a/app/views/quantities/index.html.erb
+++ b/app/views/quantities/index.html.erb
@@ -8,13 +8,14 @@
    class: 'tools-area' %>
 </div>

+<%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
 <%= tag.div class: 'main-area', id: :quantity_form %>

-<table class="main-area items">
+<table class="main-area items-table">
  <thead>
    <tr>
      <th><%= Quantity.human_attribute_name(:name) %></th>
-      <th><%= Quantity.human_attribute_name(:description) %></th>
+      <th class="hexpand"><%= Quantity.human_attribute_name(:description) %></th>
      <% if current_user.at_least(:active) %>
        <th><%= t :actions %></th>
        <th></th>
--- a/app/views/readouts/_form.html.erb
+++ b/app/views/readouts/_form.html.erb
@@ -1,25 +1,24 @@
 <%# TODO: add readout reordering by dragging %>
 <%= tabular_fields_for 'readouts[]', readout do |form| %>
  <%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
-    <td class="actions">
+    <td>
+      <%# TODO: add grayed readout index (in separate column?) %>
+      <%= readout.quantity.relative_pathname(@superquantity) %>
+      <%= form.hidden_field :quantity_id %>
+    </td>
+    <td>
+      <%= form.number_field :value, required: true, autofocus: readout_counter == 0 %>
+    </td>
+    <td>
+      <%= form.collection_select :unit_id, @user_units, :id,
+        ->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) },
+        {prompt: '', disabled: '', selected: ''}, required: true %>
+    </td>
+    <td class="flex">
      <%# TODO: change to _link_ after giving up displaying relative paths %>
      <%= image_button_tag '', 'delete-outline', class: 'dangerous', name: nil,
        formaction: discard_readouts_path(readout.quantity),
        formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
    </td>
-    <td>
-      <%= readout.quantity.relative_pathname(@superquantity) %>
-    </td>
-    <td>
-      <%= form.number_field :value, required: true,
-        size: readout.type_for_attribute(:value).precision / 2,
-        autofocus: readout_counter == 0 %>
-    </td>
-    <td>
-      <%= form.hidden_field :quantity_id %>
-      <%= form.collection_select :unit_id, @user_units, :id,
-        ->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) },
-        {prompt: t('.select_unit'), disabled: '', selected: ''}, required: true %>
-    </td>
  <% end %>
 <% end %>
--- a/app/views/units/_form.html.erb
+++ b/app/views/units/_form.html.erb
@@ -8,11 +8,11 @@
    <td>
      <%= form.text_area :description, cols: 30, rows: 1, escape: false %>
    </td>
-    <td class="number">
+    <td>
      <%= form.number_field :multiplier, required: true, size: 10, min: :step if @unit.base_id? %>
    </td>

-    <td class="actions">
+    <td class="flex">
      <%= form.button %>
      <%= image_link_to t(:cancel), "close-outline", units_path, class: 'dangerous',
        name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
--- a/app/views/units/_unit.html.erb
+++ b/app/views/units/_unit.html.erb
@@ -6,14 +6,15 @@
                  drop_id: dom_id(unit.base || unit),
                  drop_id_param: "unit[base_id]"} do %>

-  <td class="link" style="--depth:<%= unit.base_id? ? 1 : 0 %>">
-    <%= link_to unit, edit_unit_path(unit), onclick: 'this.blur();', data: {turbo_stream: true} %>
+  <td style="--depth:<%= unit.base_id? ? 1 : 0 %>">
+    <%= link_to unit, edit_unit_path(unit), class: 'link', onclick: 'this.blur();',
+      data: {turbo_stream: true} %>
  </td>
  <td><%= unit.description %></td>
-  <td class="number"><%= unit.multiplier.to_html %></td>
+  <td class="ralign"><%= unit.multiplier.to_html %></td>

  <% if current_user.at_least(:active) %>
-    <td class="actions">
+    <td class="flex">
      <% unless unit.base_id? %>
        <%= image_link_to t('.new_subunit'), 'plus-outline', new_unit_path(unit),
          id: dom_id(unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
--- a/app/views/units/index.html.erb
+++ b/app/views/units/index.html.erb
@@ -7,13 +7,14 @@
    class: 'tools-area' %>
 </div>

+<%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
 <%= tag.div id: :unit_form %>

-<table class="main-area items">
+<table class="main-area items-table">
  <thead>
    <tr>
      <th><%= Unit.human_attribute_name(:symbol) %></th>
-      <th><%= Unit.human_attribute_name(:description) %></th>
+      <th class="hexpand"><%= Unit.human_attribute_name(:description) %></th>
      <th><%= Unit.human_attribute_name(:multiplier) %></th>
      <% if current_user.at_least(:active) %>
        <th><%= t :actions %></th>
--- a/app/views/users/confirmations/create.turbo_stream.erb
+++ b/app/views/users/confirmations/create.turbo_stream.erb
@@ -0,0 +1 @@
+<% flash.discard %>
--- a/app/views/users/confirmations/new.html.erb
+++ b/app/views/users/confirmations/new.html.erb
@@ -1,9 +0,0 @@
-<%= labeled_form_for resource, url: user_confirmation_path,
-  html: {class: 'main-area'} do |f| %>
-
-  <%= f.email_field :email, required: true, size: 30, autofocus: true,
-    autocomplete: 'email', value:
-    resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email %>
-
-  <%= f.submit t(:resend_confirmation) %>
-<% end %>
--- a/app/views/users/index.html.erb
+++ b/app/views/users/index.html.erb
@@ -1,4 +1,4 @@
-<table class="main-area items" id="users">
+<table class="main-area items-table" id="users">
  <thead>
    <tr>
      <th><%= User.human_attribute_name(:email) %></th>
@@ -11,7 +11,7 @@
  <tbody>
    <% @users.each do |user| %>
      <tr>
-        <td class="link"><%= link_to user, user_path(user) %></td>
+        <td><%= link_to user, user_path(user), class: 'link' %></td>
        <td>
          <% if user == current_user %>
            <%= user.status %>
@@ -22,11 +22,11 @@
            <% end %>
          <% end %>
        </td>
-        <td class="svg">
+        <td>
          <%= svg_tag 'pictograms/checkbox-marked-outline' if user.confirmed_at.present? %>
        </td>
        <td><%= l user.created_at, format: :without_tz %></td>
-        <td class="actions">
+        <td class="flex">
          <% if allow_disguise?(user) %>
            <%= image_link_to t('.disguise'), 'incognito', disguise_user_path(user) %>
          <% end %>
--- a/app/views/users/passwords/create.turbo_stream.erb
+++ b/app/views/users/passwords/create.turbo_stream.erb
@@ -0,0 +1,2 @@
+<%# For some reason flash messages are duplicated in bot flash and flash.now %>
+<% flash.discard %>
--- a/app/views/users/passwords/edit.html.erb
+++ b/app/views/users/passwords/edit.html.erb
@@ -1,5 +1,5 @@
 <%= labeled_form_for resource, url: user_password_path,
-  html: {method: :put, class: 'main-area'} do |f| %>
+  html: {method: :put, class: 'main-area', data: {turbo: false}} do |f| %>

  <%= f.hidden_field :reset_password_token %>

--- a/app/views/users/passwords/new.html.erb
+++ b/app/views/users/passwords/new.html.erb
@@ -1,8 +0,0 @@
-<%= labeled_form_for resource, url: user_password_path,
-  html: {class: 'main-area'} do |f| %>
-
-  <%= f.email_field :email, required: true, size: 30, autofocus: true,
-    autocomplete: 'email' %>
-
-  <%= f.submit t(:recover_password) %>
-<% end %>
--- a/app/views/users/registrations/edit.html.erb
+++ b/app/views/users/registrations/edit.html.erb
--- a/app/views/users/profiles/new.html.erb
+++ b/app/views/users/profiles/new.html.erb
@@ -0,0 +1,16 @@
+<%= labeled_form_for resource, url: user_registration_path,
+  html: {class: 'main-area', onsubmit: 'formValidate(event)'} do |f| %>
+
+  <%= f.email_field :email, required: true, size: 30, autofocus: true,
+    autocomplete: 'email' %>
+  <%= f.password_field :password, required: true, size: 30,
+    minlength: @minimum_password_length, autocomplete: 'new-password' %>
+  <%= f.password_field :password_confirmation, required: true, size: 30,
+    minlength: @minimum_password_length, autocomplete: 'off' %>
+
+  <%= f.submit t(:register), data: {turbo: false} %>
+
+  <%= image_button_tag t(:resend_confirmation), 'email-sync-outline',
+    class: 'auxiliary', formaction: user_confirmation_path, formnovalidate: true,
+    data: {validate: f.field_id(:email)} %>
+<% end %>
--- a/app/views/users/registrations/new.html.erb
+++ b/app/views/users/registrations/new.html.erb
@@ -1,16 +0,0 @@
-<div class="main-area">
-  <%= labeled_form_for resource, url: user_registration_path do |f| %>
-    <%= f.email_field :email, required: true, size: 30, autofocus: true,
-      autocomplete: 'email' %>
-    <%= f.password_field :password, required: true, size: 30,
-      minlength: @minimum_password_length, autocomplete: 'new-password' %>
-    <%= f.password_field :password_confirmation, required: true, size: 30,
-      minlength: @minimum_password_length, autocomplete: 'off' %>
-
-    <%= f.submit t(:register) %>
-  <% end %>
-
-  <%= content_tag :p, t(:or), style: 'text-align: center;' %>
-  <%= image_link_to t(:resend_confirmation), 'email-sync-outline',
-    new_user_confirmation_path, class: 'centered' %>
-</div>
--- a/app/views/users/sessions/new.html.erb
+++ b/app/views/users/sessions/new.html.erb
@@ -1,18 +1,19 @@
-<div class="main-area">
-  <%= labeled_form_for resource, url: user_session_path do |f| %>
+<%= labeled_form_for resource, url: user_session_path,
+  html: {class: 'main-area', onsubmit: 'formValidate(event)'} do |f| %>
+
  <%= f.email_field :email, required: true, size: 30, autofocus: true,
    autocomplete: 'email' %>
  <%= f.password_field :password, required: true, size: 30,
-      minlength: @minimum_password_length, autocomplete: 'current-password' %>
+    autocomplete: 'current-password' %>

  <% if devise_mapping.rememberable? %>
    <%= f.check_box :remember_me %>
  <% end %>

-    <%= f.submit t(:sign_in) %>
-  <% end %>
+  <%# /sign_in as HTML; /password as TURBO_STREAM %>
+  <%= f.submit t(:sign_in), data: {turbo: false} %>

-  <%= content_tag :p, t(:or), style: 'text-align: center;' %>
-  <%= image_link_to t(:recover_password), 'lock-reset', new_user_password_path,
-    class: 'centered' %>
-</div>
+  <%= image_button_tag t(:recover_password), 'lock-reset', class: 'auxiliary',
+    formaction: user_password_path, formnovalidate: true,
+    data: {validate: f.field_id(:email)} %>
+<% end %>
--- a/app/views/users/unlocks/new.html.erb
+++ b/app/views/users/unlocks/new.html.erb
@@ -8,7 +8,7 @@
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

-  <div class="actions">
+  <div class="flex">
    <%= f.submit "Resend unlock instructions" %>
  </div>
 <% end %>
--- a/config/initializers/devise.rb
+++ b/config/initializers/devise.rb
@@ -91,7 +91,7 @@ Devise.setup do |config|
  # It will change confirmation, password recovery and other workflows
  # to behave the same regardless if the e-mail provided was right or wrong.
  # Does not affect registerable.
-  # config.paranoid = true
+  config.paranoid = true

  # By default Devise will store the user in session. You can skip storage for
  # particular strategies by setting this option.
--- a/config/locales/devise.en.yml
+++ b/config/locales/devise.en.yml
@@ -4,15 +4,15 @@ en:
  devise:
    confirmations:
      confirmed: "Your email address has been successfully confirmed."
-      send_instructions: "You will receive an email with instructions for how to confirm your email address in a few minutes."
-      send_paranoid_instructions: "If your email address exists in our database, you will receive an email with instructions for how to confirm your email address in a few minutes."
+      send_paranoid_instructions: >
+        If your email address is in our database, a message with instructions on how
+        to confirm your email address has been sent to you.
    failure:
      already_authenticated: "You are already signed in."
      inactive: "Your account is not activated yet."
-      invalid: "Invalid %{authentication_keys} or password."
+      invalid: "Invalid <b>%{authentication_keys}</b> or <b>password</b>."
      locked: "Your account is locked."
      last_attempt: "You have one more attempt before your account is locked."
-      not_found_in_database: "Invalid %{authentication_keys} or password."
      timeout: "Your session expired. Please sign in again to continue."
      unauthenticated: "You need to sign in or sign up before continuing."
      unconfirmed: "You have to confirm your email address before continuing."
@@ -32,8 +32,9 @@ en:
      success: "Successfully authenticated from %{kind} account."
    passwords:
      no_token: "You can't access this page without coming from a password reset email. If you do come from a password reset email, please make sure you used the full URL provided."
-      send_instructions: "You will receive an email with instructions on how to reset your password in a few minutes."
-      send_paranoid_instructions: "If your email address exists in our database, you will receive a password recovery link at your email address in a few minutes."
+      send_paranoid_instructions: >
+        If your email address is in our database, the password recovery link has been
+        sent to you.
      updated: "Your password has been changed successfully. You are now signed in."
      updated_not_active: "Your password has been changed successfully."
    registrations:
@@ -50,7 +51,6 @@ en:
      signed_out: "Signed out successfully."
      already_signed_out: "Signed out successfully."
    unlocks:
-      send_instructions: "You will receive an email with instructions for how to unlock your account in a few minutes."
      send_paranoid_instructions: "If your account exists, you will receive an email with instructions for how to unlock it in a few minutes."
      unlocked: "Your account has been unlocked successfully. Please sign in to continue."
  errors:
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -85,12 +85,10 @@ en:
    navigation: Measurements
    no_items: There are no measurements taken. You can Add some now.
    form:
-      select_quantity: select the measured quantities...
+      select_quantity: select quantities...
+      taken_at_html: Measurement taken at&emsp;
    index:
      new_measurement: Add measurement
-  readouts:
-    form:
-      select_unit: ...
  quantities:
    navigation: Quantities
    no_items: There are no configured quantities. You can Add some or Import from defaults.
@@ -150,7 +148,7 @@ en:
      edit:
        password_html: 'New password:%{password_length_hint_html}'
        update_password: Update password
-    registrations:
+    profiles:
      new:
        password_html: 'Password:%{password_length_hint_html}'
        password_confirmation: 'Retype password:'
@@ -169,7 +167,6 @@ en:
  cancel: Cancel
  delete: Delete
  :no: 'no'
-  or: or
  register: Register
  sign_in: Sign in
  recover_password: Recover password
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -24,8 +24,9 @@ Rails.application.routes.draw do
  # https://github.com/heartcombo/devise/issues/5786
  connection = ActiveRecord::Base.connection
  if connection.schema_version && connection.table_exists?(:users)
+    # NOTE: change helper prefix from *_registration to *_profile once possible
    devise_for :users, path: '', path_names: {registration: 'profile'},
-      controllers: {registrations: :registrations}
+      controllers: {registrations: 'user/profiles'}
  end

  resources :users, only: [:index, :show, :update] do
@@ -34,10 +35,8 @@ Rails.application.routes.draw do
  end

  unauthenticated do
-    as :user do
    root to: redirect('/sign_in')
  end
-  end
  root to: redirect('/units'), as: :user_root

  direct(:source_code) { 'https://gitea.michalczyk.pro/fixin.me/fixin.me' }
--- a/db/migrate/20250121230456_create_readouts.rb
+++ b/db/migrate/20250121230456_create_readouts.rb
@@ -1,10 +1,14 @@
 class CreateReadouts < ActiveRecord::Migration[7.2]
  def change
    create_table :readouts do |t|
-      t.references :user, null: false, foreign_key: true
+      # Reference :user through :quantity (:measurement may be NULL).
+      t.references :measurement, foreign_key: true
      t.references :quantity, null: false, foreign_key: true
+      # :category + :value + :unit as a separate table? (NumericValue, TextValue)
+      t.integer :category, null: false, default: 0
+      t.float :value, null: false, limit: Float::MANT_DIG
      t.references :unit, foreign_key: true
-      t.decimal :value, null: false, precision: 30, scale: 15
+      # Move to Measurement?
      #t.references :collector, foreign_key: true
      #t.references :device, foreign_key: true

--- a/test/application_system_test_case.rb
+++ b/test/application_system_test_case.rb
@@ -1,6 +1,7 @@
 require "test_helper"

 class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
+  include ActionView::Helpers::SanitizeHelper
  include ActionView::Helpers::UrlHelper

  # NOTE: geckodriver installed with Firefox, ignore incompatibility warning
@@ -32,7 +33,8 @@ class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
  # Allow skipping interpolations when translating for testing purposes
  INTERPOLATION_PATTERNS = Regexp.union(I18n.config.interpolation_patterns)
  def translate(key, **options)
-    options.empty? ? super.split(INTERPOLATION_PATTERNS, 2).first : super
+    translation = options.empty? ? super.split(INTERPOLATION_PATTERNS, 2).first : super
+    sanitize(translation, tags: [])
  end
  alias :t :translate

--- a/test/system/users_test.rb
+++ b/test/system/users_test.rb
@@ -5,8 +5,8 @@ class UsersTest < ApplicationSystemTestCase
    @admin = users(:admin)
  end

-  test "sign in" do
-    visit new_user_session_path
+  test 'sign in' do
+    visit root_url
    assert find_link(href: new_user_session_path)[:disabled]

    sign_in
@@ -14,16 +14,23 @@ class UsersTest < ApplicationSystemTestCase
    assert_text t('devise.sessions.signed_in')
  end

-  test 'sign in fails with invalid password' do
-    sign_in password: random_password
+  test 'sign in fails with invalid credentials' do
+    label = User.human_attribute_name(:email)
+    # Both: valid and invalid emails should give the same (paranoid) error message.
+    email = [users.sample.email, random_email].sample
+
+    visit root_url
+    fill_in label, with: email
+    fill_in User.human_attribute_name(:password), with: random_password
+    click_on t(:sign_in)
+
    assert_current_path new_user_session_path
-    assert_text t('devise.failure.not_found_in_database',
-                  authentication_keys: User.human_attribute_name(:email))
+    assert_text t('devise.failure.invalid', authentication_keys: label.downcase_first)
    assert find_link(href: new_user_session_path)[:disabled]
-    assert_not_empty find_field(User.human_attribute_name(:email)).value
+    assert has_field?(label, with: email)
  end

-  test "sign out" do
+  test 'sign out' do
    sign_in
    visit root_url
    click_on t("layouts.application.sign_out")
@@ -31,79 +38,106 @@ class UsersTest < ApplicationSystemTestCase
    assert_text t("devise.sessions.signed_out")
  end

-  test "recover password" do
-    visit new_user_session_url
-    click_on t(:recover_password)
+  test 'recover password' do
+    label = User.human_attribute_name(:email)
+    email = users.select(&:confirmed?).sample.email
+
+    visit root_url
+    fill_in label, with: email
+    # Form validations should allow empty password.
+    assert has_field?(User.human_attribute_name(:password), with: nil)

-    fill_in User.human_attribute_name(:email),
-      with: users.select(&:confirmed?).sample.email
    assert_emails 1 do
      click_on t(:recover_password)
-      # Wait until redirected to make sure async request has been processed
      assert_current_path new_user_session_path
+      # Wait for flash message to make sure async request has been processed.
+      assert_text t("devise.passwords.send_paranoid_instructions")
    end
-    assert_text t("devise.passwords.send_instructions")
+    assert has_field?(label, with: email)

    with_last_email do |mail|
      visit Capybara.string(mail.body.to_s).find_link("Change my password")[:href]
+      assert_current_path edit_user_password_path, ignore_query: true
+      # Make sure flash message is not displayed twice.
+      assert_no_text t("devise.passwords.send_paranoid_instructions")
    end
    new_password = random_password
    fill_in t("users.passwords.edit.password_html"), with: new_password
    fill_in t("helpers.label.user.password_confirmation"), with: new_password
    assert_emails 1 do
      click_on t("users.passwords.edit.update_password")
-      # Wait until redirected to make sure async request has been processed
      assert_current_path units_path
-    end
      assert_text t("devise.passwords.updated")
    end
+  end

-  test "register" do
-    visit new_user_session_url
+  test 'recover password for nonexistent user' do
+    label = User.human_attribute_name(:email)
+    email = random_email
+
+    visit root_url
+    fill_in label, with: email
+
+    assert_no_emails do
+      click_on t(:recover_password)
+      assert_current_path new_user_session_path
+      assert_text t("devise.passwords.send_paranoid_instructions")
+    end
+  end
+
+  test 'register' do
+    visit root_url
    click_on t(:register)
+    assert find_link(href: new_user_registration_path)[:disabled]

    fill_in User.human_attribute_name(:email), with: random_email
    password = random_password
    fill_in User.human_attribute_name(:password), with: password
-    fill_in t("users.registrations.new.password_confirmation"), with: password
+    fill_in t("users.profiles.new.password_confirmation"), with: password
    assert_difference ->{ User.count }, 1 do
      assert_emails 1 do
        click_on t(:register)
-        # Wait until redirected to make sure async request has been processed
        assert_current_path new_user_session_path
-      end
-    end
        assert_text t("devise.registrations.signed_up_but_unconfirmed")
+      end
+    end

+    assert_changes ->{ User.last.confirmed? }, from: false, to: true do
      with_last_email do |mail|
        visit Capybara.string(mail.body.to_s).find_link("Confirm my account")[:href]
-    end
        assert_current_path new_user_session_path
        assert_text t("devise.confirmations.confirmed")
-    assert User.last.confirmed?
+      end
+    end
  end

-  test "resend confirmation" do
-    visit new_user_session_url
-    click_on t(:register)
-    click_on t(:resend_confirmation)
+  test 'resend confirmation' do
+    label = User.human_attribute_name(:email)
+    user = users.reject(&:confirmed?).sample
+
+    visit root_url
+    click_on t(:register)
+    fill_in label, with: user.email
+    assert has_field?(User.human_attribute_name(:password), with: nil)

-    fill_in User.human_attribute_name(:email),
-      with: users.reject(&:confirmed?).sample.email
    assert_emails 1 do
      click_on t(:resend_confirmation)
-      # Wait until redirected to make sure async request has been processed
-      assert_current_path new_user_session_path
+      assert_current_path new_user_registration_path
+      assert_text t("devise.confirmations.send_paranoid_instructions")
    end
-    assert_current_path new_user_session_path
-    assert_text t("devise.confirmations.send_instructions")
+    assert has_field?(label, with: user.email)

+    assert_changes ->{ user.reload.confirmed? }, from: false, to: true do
      with_last_email do |mail|
        visit Capybara.string(mail.body.to_s).find_link("Confirm my account")[:href]
+        assert_current_path new_user_session_path
+        assert_no_text t("devise.confirmations.send_paranoid_instructions")
+        assert_text t("devise.confirmations.confirmed")
+      end
    end
  end

-  test "show profile" do
+  test 'show profile' do
    sign_in user: users.select(&:admin?).select(&:confirmed?).sample
    click_on t("users.navigation")
    within all('tr').drop(1).sample do |tr|
@@ -113,7 +147,7 @@ class UsersTest < ApplicationSystemTestCase
    end
  end

-  test "disguise" do
+  test 'disguise' do
    user = users.select(&:admin?).select(&:confirmed?).sample
    sign_in user: user

@@ -129,7 +163,7 @@ class UsersTest < ApplicationSystemTestCase
    assert_link user.email
  end

-  test "disguise fails for admin when disallowed" do
+  test 'disguise fails for admin when disallowed' do
    user = users.select(&:admin?).select(&:confirmed?).sample
    sign_in user: user

@@ -142,13 +176,13 @@ class UsersTest < ApplicationSystemTestCase
    assert_title 'The change you wanted was rejected (422)'
  end

-  test "disguise forbidden for non admin" do
+  test 'disguise forbidden for non admin' do
    sign_in user: users.reject(&:admin?).select(&:confirmed?).sample
    visit disguise_user_path(User.all.sample)
    assert_title 'Access is forbidden to this page (403)'
  end

-  test "delete profile" do
+  test 'delete profile' do
    user = sign_in
    # TODO: remove condition after root_url changed to different path than
    # profile in routes.rb
@@ -156,23 +190,23 @@ class UsersTest < ApplicationSystemTestCase
      first(:link_or_button, user.email).click
    end
    assert_difference ->{ User.count }, -1 do
-      accept_confirm { click_on t("users.registrations.edit.delete") }
+      accept_confirm { click_on t("users.profiles.edit.delete") }
      assert_current_path new_user_session_path
    end
    assert_text t("devise.registrations.destroyed")
  end

-  test "index forbidden for non admin" do
+  test 'index forbidden for non admin' do
    sign_in user: users.reject(&:admin?).select(&:confirmed?).sample
    visit users_path
    assert_title "Access is forbidden to this page (403)"
  end

-  test "update profile" do
+  test 'update profile' do
    # TODO
  end

-  test "update status" do
+  test 'update status' do
    sign_in user: users.select(&:admin?).select(&:confirmed?).sample
    visit users_path

@@ -187,7 +221,7 @@ class UsersTest < ApplicationSystemTestCase
    assert_current_path users_path
  end

-  test "update status fails for admin when disallowed" do
+  test 'update status fails for admin when disallowed' do
    sign_in user: users.select(&:admin?).select(&:confirmed?).sample
    visit users_path

@@ -200,7 +234,7 @@ class UsersTest < ApplicationSystemTestCase
    assert_title 'The change you wanted was rejected (422)'
  end

-  test "update status forbidden for non admin" do
+  test 'update status forbidden for non admin' do
    sign_in user: users.reject(&:admin?).select(&:confirmed?).sample
    visit units_path
    inject_button_to find('body'), "update status", user_path(User.all.sample), method: :patch,
Author	SHA1	Message	Date
cryptogopher	65edb866d0	Clean up and improve items-table styling Closes #9	2026-04-03 20:44:10 +02:00
cryptogopher	33004f62bd	Improve Measurement form layout and styling	2026-03-22 01:06:38 +01:00
cryptogopher	687e6fcdff	Drop Readout.value decimal type in favor of float	2026-03-19 20:30:16 +01:00
cryptogopher	5ed066ad18	Unify border/outline parameters order	2026-03-06 01:42:32 +01:00
cryptogopher	dde4e52f1b	Fix form elements styling on hover	2026-03-06 01:33:23 +01:00
cryptogopher	a9091d76a8	Merge styles of <a>.button/<button>/<input type="submit"> into .button Remove flash button Fix some multi-selector specificity differences	2026-03-04 17:13:11 +01:00
cryptogopher	4175d31b9d	Update and format comments	2026-03-03 01:31:44 +01:00
cryptogopher	c659201904	Make [disabled] and [hidden] styles !important	2026-03-03 01:14:12 +01:00
cryptogopher	83b064ef3c	Merge recover password/resend confirmation forms into sign in/register Closes #65, #66	2026-03-01 20:04:42 +01:00