forked from fixin.me/fixin.me
Compare commits
1 Commits
fix/system
...
pr70-sole-
| Author | SHA1 | Date | |
|---|---|---|---|
| f626a814a8 |
34
DESIGN.md
34
DESIGN.md
@@ -1,34 +0,0 @@
|
||||
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
|
||||
@@ -1 +1 @@
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
Before Width: | Height: | Size: 152 B After Width: | Height: | Size: 167 B |
@@ -1 +1 @@
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
Before Width: | Height: | Size: 278 B After Width: | Height: | Size: 293 B |
@@ -18,14 +18,10 @@
|
||||
/* 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>; <a> as link/button),
|
||||
* * styles with multiple selectors should have all selectors with same
|
||||
* specificity, to allow proper rule specificity vs order management.
|
||||
* differently depending on context (e.g. form)
|
||||
*
|
||||
* NOTE: style in a modular way, similar to how CSS @scope would be used,
|
||||
* to make transition easier once @scope is widely available. */
|
||||
/* TODO: review styles with multiple selectors and try to convert them to the same
|
||||
* specificity. */
|
||||
* 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;
|
||||
@@ -57,28 +53,12 @@
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
/* NOTE: move to higher priority layer instead of using !important? */
|
||||
/* TODO: 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
|
||||
*/
|
||||
button,
|
||||
details,
|
||||
@@ -93,17 +73,56 @@ 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: 1px solid var(--color-gray);
|
||||
border: solid 1px var(--color-gray);
|
||||
border-radius: 0.25em;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
[name=cancel],
|
||||
.auxiliary {
|
||||
border-color: var(--color-border-gray);
|
||||
color: var(--color-nav-gray);
|
||||
fill: var(--color-nav-gray);
|
||||
}
|
||||
input[type=checkbox],
|
||||
svg,
|
||||
textarea {
|
||||
margin: 0;
|
||||
margin: 0
|
||||
}
|
||||
input[type=checkbox] {
|
||||
accent-color: var(--color-blue);
|
||||
@@ -111,20 +130,17 @@ 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 of <input type=number>. */
|
||||
/* TODO: add spin buttons inside <input type=number>: before (-) and after (+) input. */
|
||||
/* Hide spin buttons in input number fields */
|
||||
/* TODO: add spin buttons inside input[number]: before (-) and after (+) input */
|
||||
input[type=number] {
|
||||
appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
text-align: end;
|
||||
}
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
@@ -133,108 +149,37 @@ input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
/* 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);
|
||||
}
|
||||
table input,
|
||||
table select,
|
||||
table textarea {
|
||||
padding-block: 0.375em;
|
||||
}
|
||||
table form input,
|
||||
table form select,
|
||||
table form summary,
|
||||
table form textarea {
|
||||
color: inherit;
|
||||
}
|
||||
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);
|
||||
color: black;
|
||||
}
|
||||
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;
|
||||
}
|
||||
[name=cancel],
|
||||
.auxiliary {
|
||||
border-color: var(--color-border-gray);
|
||||
color: var(--color-nav-gray);
|
||||
fill: var(--color-nav-gray);
|
||||
}
|
||||
.button > svg,
|
||||
.tab > svg {
|
||||
.tab > svg,
|
||||
button > svg {
|
||||
height: 1.4em;
|
||||
width: 1.4em;
|
||||
}
|
||||
.button > svg:not(:last-child),
|
||||
.tab > 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,
|
||||
.tab:focus-visible,
|
||||
.tab:hover {
|
||||
button:focus-visible,
|
||||
input[type=submit]:focus-visible {
|
||||
background-color: var(--color-focus-gray);
|
||||
}
|
||||
.button:hover {
|
||||
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;
|
||||
@@ -244,17 +189,23 @@ textarea:invalid {
|
||||
background-color: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
}
|
||||
table .button {
|
||||
border-color: var(--color-border-gray);
|
||||
color: var(--color-table-gray);
|
||||
font-weight: normal;
|
||||
height: 100%;
|
||||
padding: 0.4em;
|
||||
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);
|
||||
}
|
||||
/* 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. */
|
||||
/* TODO: apply link class to non-button/-tab links. Add light underscore for links? */
|
||||
input[type=text]:read-only,
|
||||
textarea:read-only {
|
||||
border: none;
|
||||
@@ -262,8 +213,8 @@ textarea:read-only {
|
||||
}
|
||||
|
||||
|
||||
/* NOTE: collapse gaps around empty rows (`topside`) once possible with
|
||||
* `grid-collapse` property and remove alternative `grid-template-areas`.
|
||||
/* 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;
|
||||
@@ -296,14 +247,18 @@ header {
|
||||
margin-inline-start: 4%;
|
||||
}
|
||||
.navigation > .tab {
|
||||
border-bottom: 2px solid var(--color-nav-gray);
|
||||
border-bottom: solid 2px 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: 4px solid var(--color-blue);
|
||||
border-bottom: solid 4px var(--color-blue);
|
||||
color: var(--color-blue);
|
||||
fill: var(--color-blue);
|
||||
}
|
||||
@@ -335,7 +290,7 @@ header {
|
||||
|
||||
#flashes {
|
||||
display: grid;
|
||||
row-gap: 0.4em;
|
||||
gap: 0.2em;
|
||||
grid-template-columns: 1fr auto auto auto 1fr;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
@@ -351,17 +306,13 @@ header {
|
||||
display: grid;
|
||||
grid-column: 2/5;
|
||||
grid-template-columns: subgrid;
|
||||
line-height: 2.2em;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.flash:before {
|
||||
filter: invert();
|
||||
height: 1.4em;
|
||||
margin: 0 0.5em;
|
||||
width: 1.4em;
|
||||
}
|
||||
.flash.alert:before {
|
||||
content: url('pictograms/alert-outline.svg');
|
||||
height: 1.4em;
|
||||
margin: 0 0.5em;
|
||||
width: 1.4em;
|
||||
}
|
||||
.flash.alert {
|
||||
border-color: var(--color-red);
|
||||
@@ -369,24 +320,35 @@ header {
|
||||
}
|
||||
.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 svg {
|
||||
cursor: pointer;
|
||||
fill: white;
|
||||
height: 2.2em;
|
||||
opacity: 0.6;
|
||||
padding: 0.4em 0.5em;
|
||||
width: 2.4em;
|
||||
.flash > div {
|
||||
grid-column: 2;
|
||||
}
|
||||
.flash svg:hover {
|
||||
/* NOTE: currently flash button inherits some unnecessary styles from generic
|
||||
* button. */
|
||||
.flash > button {
|
||||
border: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
grid-column: 3;
|
||||
opacity: 0.6;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
.flash > button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* TODO: Hover over invalid should work like in measurements (thin vs thick border) */
|
||||
.labeled-form {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
@@ -403,7 +365,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);
|
||||
}
|
||||
@@ -423,146 +385,180 @@ header {
|
||||
.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. */
|
||||
* `reading-flow: grid-columns` to ensure proper tabindex order */
|
||||
grid-row: 1;
|
||||
height: 100%;
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.tabular-form table {
|
||||
border: none;
|
||||
}
|
||||
.tabular-form table td {
|
||||
border: none;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tabular-form table td:first-child {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
.items-table {
|
||||
/* TODO: remove .items class (?) and make 'form table' work properly */
|
||||
table.items {
|
||||
border-spacing: 0;
|
||||
border: 1px solid var(--color-border-gray);
|
||||
border: solid 1px var(--color-border-gray);
|
||||
border-radius: 0.25em;
|
||||
font-size: 0.85rem;
|
||||
text-align: left;
|
||||
}
|
||||
.items-table thead {
|
||||
table:not(:has(tr)) {
|
||||
display: none;
|
||||
}
|
||||
table.items thead {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.items-table thead,
|
||||
.items-table tbody tr:hover {
|
||||
table.items thead,
|
||||
table.items tbody tr:hover {
|
||||
background-color: var(--color-focus-gray);
|
||||
}
|
||||
.items-table th {
|
||||
table.items th {
|
||||
padding-block: 0.75em;
|
||||
text-align: center;
|
||||
}
|
||||
.items-table th,
|
||||
.items-table td {
|
||||
table.items th,
|
||||
table.items td {
|
||||
padding-inline: 1em 0;
|
||||
}
|
||||
/* For <a> to fill <td> completely, we use an `::after` pseudoelement. */
|
||||
.items-table td.link {
|
||||
/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
|
||||
table.items td.link {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
.items-table td.link a {
|
||||
table.items td.link a {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
.items-table td.link a::after {
|
||||
table.items td.link a::after {
|
||||
content: '';
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.items-table td:first-child {
|
||||
table.items td:first-child {
|
||||
padding-inline-start: calc(1em + var(--depth) * 0.8em);
|
||||
}
|
||||
.items-table td:has(input, select, textarea) {
|
||||
table.items td:has(input, select, textarea) {
|
||||
padding-inline-start: calc(0.6em - 0.9px);
|
||||
}
|
||||
.items-table td:first-child:has(input, select, textarea) {
|
||||
table.items td:first-child:has(input, select, textarea) {
|
||||
padding-inline-start: calc(0.6em + var(--depth) * 0.8em - 0.9px);
|
||||
}
|
||||
.items-table th:last-child {
|
||||
table.items th:last-child {
|
||||
padding-inline-end: 0.4em;
|
||||
}
|
||||
.items-table td:last-child {
|
||||
table.items td:last-child {
|
||||
padding-inline-end: 0.1em;
|
||||
}
|
||||
.items-table td {
|
||||
border-top: 1px solid var(--color-border-gray);
|
||||
table.items td {
|
||||
border-top: solid 1px var(--color-border-gray);
|
||||
height: 2.4em;
|
||||
padding-block: 0.1em;
|
||||
}
|
||||
.items-table .actions {
|
||||
table.items .actions {
|
||||
display: flex;
|
||||
gap: 0.4em;
|
||||
justify-content: end;
|
||||
}
|
||||
.items-table .actions.centered {
|
||||
table.items .actions.centered {
|
||||
justify-content: center;
|
||||
}
|
||||
.items-table tr.dropzone {
|
||||
table.items tr.dropzone {
|
||||
position: relative;
|
||||
}
|
||||
.items-table tr.dropzone::after {
|
||||
table.items tr.dropzone::after {
|
||||
content: '';
|
||||
inset: 1px 0 0 0;
|
||||
position: absolute;
|
||||
outline: 2px dashed var(--color-blue);
|
||||
outline: dashed 2px var(--color-blue);
|
||||
outline-offset: -1px;
|
||||
z-index: var(--z-index-table-row-outline);
|
||||
}
|
||||
.items-table td.handle {
|
||||
table.items td.handle {
|
||||
cursor: move;
|
||||
}
|
||||
.items-table tr.form td {
|
||||
table.items tr.form td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* TODO: replace `:hover:focus-visible` combos with proper LOVE style order. */
|
||||
/* TODO: update table styling: simplify selectors, deduplicate, remove non-font rem. */
|
||||
.items-table td.link a:hover,
|
||||
.items-table td.link a:focus-visible,
|
||||
.items-table td.link a:hover:focus-visible {
|
||||
/* 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;
|
||||
}
|
||||
.items-table td.link a:hover {
|
||||
table.items td.link a:hover {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
.items-table td.link a:focus-visible {
|
||||
table.items td.link a:focus-visible {
|
||||
text-decoration-color: var(--color-gray);
|
||||
}
|
||||
.items-table td.link a:hover:focus-visible {
|
||||
table.items td.link a:hover:focus-visible {
|
||||
color: var(--color-dark-blue);
|
||||
}
|
||||
|
||||
.items-table td:not(:first-child),
|
||||
table.items td:not(:first-child),
|
||||
.grayed {
|
||||
color: var(--color-table-gray);
|
||||
fill: var(--color-table-gray);
|
||||
}
|
||||
.items-table svg {
|
||||
table.items svg {
|
||||
height: 1rem;
|
||||
vertical-align: middle;
|
||||
width: 1rem;
|
||||
}
|
||||
.items-table svg:last-child {
|
||||
table.items svg:last-child {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
}
|
||||
.items-table td.svg {
|
||||
table.items td.svg {
|
||||
text-align: center;
|
||||
}
|
||||
.items-table td.number {
|
||||
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 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 {
|
||||
@@ -590,18 +586,22 @@ header {
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
.hmin50 {
|
||||
min-width: 50%;
|
||||
}
|
||||
.italic {
|
||||
color: var(--color-gray);
|
||||
font-style: italic;
|
||||
}
|
||||
.vflex {
|
||||
display: flex;
|
||||
gap: 0.8em;
|
||||
flex-direction: column;
|
||||
}
|
||||
[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;
|
||||
}
|
||||
|
||||
|
||||
details {
|
||||
@@ -612,12 +612,12 @@ summary {
|
||||
align-items: center;
|
||||
color: var(--color-gray);
|
||||
display: flex;
|
||||
gap: 0.4em;
|
||||
gap: 0.2em;
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
summary::before {
|
||||
background-color: currentColor;
|
||||
background-color: #000;
|
||||
content: "";
|
||||
height: 1em;
|
||||
mask-image: url('pictograms/chevron-down.svg');
|
||||
@@ -629,7 +629,7 @@ summary:has(.button) {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
summary .button {
|
||||
border: 1px solid var(--color-border-gray);
|
||||
border: solid 1px var(--color-border-gray);
|
||||
border-radius: inherit;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
@@ -640,15 +640,15 @@ summary span {
|
||||
width: 100%;
|
||||
}
|
||||
details[open] summary::before {
|
||||
transform: scaleY(-1);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
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: 1px solid var(--color-border-gray);
|
||||
border: solid 1px var(--color-border-gray);
|
||||
border-radius: 0.25em;
|
||||
box-shadow: 1px 1px 3px var(--color-border-gray);
|
||||
margin: -1px 0 0 0;
|
||||
@@ -670,15 +670,3 @@ li input[type=checkbox] {
|
||||
li::marker {
|
||||
content: '';
|
||||
}
|
||||
|
||||
#measurement_form {
|
||||
min-width: 66%;
|
||||
width: max-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.
|
||||
* */
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
class User::ProfilesController < Devise::RegistrationsController
|
||||
def destroy
|
||||
# TODO: Disallow/disable deletion for last admin account; update :edit view
|
||||
if current_user.sole_admin?
|
||||
redirect_back fallback_location: edit_user_registration_path,
|
||||
alert: t(".sole_admin")
|
||||
return
|
||||
end
|
||||
super
|
||||
end
|
||||
|
||||
|
||||
@@ -12,12 +12,6 @@ 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)
|
||||
@@ -102,28 +96,20 @@ module ApplicationHelper
|
||||
|
||||
def number_field(method, options = {})
|
||||
attr_type = object.type_for_attribute(method)
|
||||
case attr_type.type
|
||||
when :decimal
|
||||
if attr_type.type == :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/@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])
|
||||
)
|
||||
# button does not use #objectify_options
|
||||
options.merge!(@options.slice(:form))
|
||||
super
|
||||
end
|
||||
|
||||
@@ -152,14 +138,12 @@ module ApplicationHelper
|
||||
end
|
||||
|
||||
def tabular_form_with(**options, &block)
|
||||
extra_options = {builder: TabularFormBuilder, class: 'tabular-form',
|
||||
html: {autocomplete: 'off'}}
|
||||
extra_options = {builder: TabularFormBuilder, html: {autocomplete: 'off'}}
|
||||
form_with(**merge_attributes(options, extra_options), &block)
|
||||
end
|
||||
|
||||
def svg_tag(source, label = nil, options = {})
|
||||
label, options = nil, label if label.is_a? Hash
|
||||
svg_tag = tag.svg(**options) do
|
||||
svg_tag = tag.svg(options) do
|
||||
tag.use(href: "#{image_path(source + ".svg")}#icon")
|
||||
end
|
||||
label.blank? ? svg_tag : svg_tag + tag.span(label)
|
||||
@@ -228,8 +212,9 @@ module ApplicationHelper
|
||||
# Conversion of flash to Array only required because of Devise
|
||||
Array(messages).map do |message|
|
||||
tag.div class: "flash #{entry}" do
|
||||
tag.span(sanitize(message)) +
|
||||
svg_tag('pictograms/close-outline', {onclick: "this.parentElement.remove()"})
|
||||
# TODO: change button text to svg to make it aligned vertically
|
||||
tag.div(sanitize(message)) + tag.button(sanitize("×"), tabindex: -1,
|
||||
onclick: "this.parentElement.remove();")
|
||||
end
|
||||
end
|
||||
end.join.html_safe
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
module QuantitiesHelper
|
||||
def quantities_check_boxes(quantities)
|
||||
def quantities_check_boxes
|
||||
# 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
|
||||
|
||||
@@ -29,4 +29,11 @@ class User < ApplicationRecord
|
||||
def at_least(status)
|
||||
User.statuses[self.status] >= User.statuses[status]
|
||||
end
|
||||
|
||||
# Returns true when this user is the only admin account in the system.
|
||||
# Used to block actions that would leave the application without an admin
|
||||
# (account deletion, status demotion).
|
||||
def sole_admin?
|
||||
admin? && !User.admin.where.not(id: id).exists?
|
||||
end
|
||||
end
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
class: 'tools-area' %>
|
||||
</div>
|
||||
|
||||
<table class="main-area items-table">
|
||||
<table class="main-area items">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><%= Unit.human_attribute_name(:symbol) %></th>
|
||||
|
||||
@@ -1,37 +1,28 @@
|
||||
<%= tabular_form_with model: Measurement.new, id: :measurement_form,
|
||||
class: 'topside-area vflex centered',
|
||||
html: {onkeydown: 'formProcessKey(event)'} do |form| %>
|
||||
|
||||
<table class="items-table centered">
|
||||
<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="number">
|
||||
<%= form.datetime_field :taken_at, required: true %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
class: 'topside-area vflex', html: {onkeydown: 'formProcessKey(event)'} do |form| %>
|
||||
<table class="items centered">
|
||||
<tbody id="readouts"></tbody>
|
||||
</table>
|
||||
|
||||
<%# TODO: right-click selection; unnecessary with hierarchical tags? %>
|
||||
<details id="quantity_select" class="centered hexpand" open
|
||||
onkeydown="detailsProcessKey(event)">
|
||||
<summary autofocus>
|
||||
<!-- TODO: Set content with CSS when span empty to avoid duplication -->
|
||||
<span data-prompt="<%= t('.select_quantity') %>">
|
||||
<%= t('.select_quantity') %>
|
||||
</span>
|
||||
<%= image_button_tag t(:apply), "update", name: nil, disabled: true,
|
||||
formaction: new_readout_path, formmethod: :get, formnovalidate: true,
|
||||
data: {turbo_stream: true} %>
|
||||
</summary>
|
||||
<ul><%= quantities_check_boxes(@quantities) %></ul>
|
||||
</details>
|
||||
<div class="hflex">
|
||||
<%# TODO: right-click selection %>
|
||||
<details id="quantity_select" class="hexpand" open
|
||||
onkeydown="detailsProcessKey(event)">
|
||||
<summary autofocus>
|
||||
<!-- TODO: Set content with CSS when span empty to avoid duplication -->
|
||||
<span data-prompt="<%= t('.select_quantity') %>">
|
||||
<%= t('.select_quantity') %>
|
||||
</span>
|
||||
<%= image_button_tag t(:apply), "update", name: nil, disabled: true,
|
||||
formaction: new_readout_path, formmethod: :get, formnovalidate: true,
|
||||
data: {turbo_stream: true} %>
|
||||
</summary>
|
||||
<ul><%= quantities_check_boxes %></ul>
|
||||
</details>
|
||||
<%= form.button id: :create_measurement_button, disabled: true -%>
|
||||
</div>
|
||||
|
||||
<div class="hflex 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') %>
|
||||
</div>
|
||||
|
||||
@@ -8,10 +8,9 @@
|
||||
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">
|
||||
<table class="main-area items">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><%= Quantity.human_attribute_name(:name) %></th>
|
||||
|
||||
@@ -1,24 +1,25 @@
|
||||
<%# TODO: add readout reordering by dragging %>
|
||||
<%= tabular_fields_for 'readouts[]', readout do |form| %>
|
||||
<%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
|
||||
<td>
|
||||
<%# TODO: add grayed readout index (in separate column?) %>
|
||||
<%= readout.quantity.relative_pathname(@superquantity) %>
|
||||
</td>
|
||||
<td>
|
||||
<%= form.number_field :value, required: true, autofocus: readout_counter == 0 %>
|
||||
</td>
|
||||
<td>
|
||||
<%= form.hidden_field :quantity_id %>
|
||||
<%= form.collection_select :unit_id, @user_units, :id,
|
||||
->(u){ sanitize(' ' * (u.base_id ? 1 : 0) + u.symbol) },
|
||||
{prompt: '', disabled: '', selected: ''}, required: true %>
|
||||
</td>
|
||||
<td class="actions">
|
||||
<%# 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(' ' * (u.base_id ? 1 : 0) + u.symbol) },
|
||||
{prompt: t('.select_unit'), disabled: '', selected: ''}, required: true %>
|
||||
</td>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
@@ -7,10 +7,9 @@
|
||||
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">
|
||||
<table class="main-area items">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><%= Unit.human_attribute_name(:symbol) %></th>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<table class="main-area items-table" id="users">
|
||||
<table class="main-area items" id="users">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><%= User.human_attribute_name(:email) %></th>
|
||||
|
||||
@@ -4,9 +4,8 @@
|
||||
<% end %>
|
||||
|
||||
<div class="rightside-area buttongrid">
|
||||
<%#= TODO: Disallow/disable deletion for last admin account, image_button_to_if %>
|
||||
<%= image_button_to t('.delete'), 'account-remove-outline', user_registration_path,
|
||||
form_class: 'tools-area', method: :delete, data: {turbo: false},
|
||||
<%= image_button_to_if !current_user.sole_admin?, t('.delete'), 'account-remove-outline',
|
||||
user_registration_path, form_class: 'tools-area', method: :delete, data: {turbo: false},
|
||||
onclick: {confirm: t('.confirm_delete')} %>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
|
||||
<%= f.submit t(:register), data: {turbo: false} %>
|
||||
|
||||
<%# TODO: fix button text color after change link -> button %>
|
||||
<%= image_button_tag t(:resend_confirmation), 'email-sync-outline',
|
||||
class: 'auxiliary', formaction: user_confirmation_path, formnovalidate: true,
|
||||
data: {validate: f.field_id(:email)} %>
|
||||
|
||||
@@ -85,10 +85,12 @@ en:
|
||||
navigation: Measurements
|
||||
no_items: There are no measurements taken. You can Add some now.
|
||||
form:
|
||||
select_quantity: select quantities...
|
||||
taken_at_html: Measurement taken at 
|
||||
select_quantity: select the measured quantities...
|
||||
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.
|
||||
@@ -160,6 +162,9 @@ en:
|
||||
New password:
|
||||
<br><em>leave blank to keep unchanged</em>
|
||||
%{password_length_hint_html}
|
||||
registrations:
|
||||
destroy:
|
||||
sole_admin: You cannot delete the only admin account.
|
||||
actions: Actions
|
||||
add: Add
|
||||
apply: Apply
|
||||
|
||||
@@ -1,14 +1,10 @@
|
||||
class CreateReadouts < ActiveRecord::Migration[7.2]
|
||||
def change
|
||||
create_table :readouts do |t|
|
||||
# Reference :user through :quantity (:measurement may be NULL).
|
||||
t.references :measurement, foreign_key: true
|
||||
t.references :user, null: false, 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
|
||||
# Move to Measurement?
|
||||
t.decimal :value, null: false, precision: 30, scale: 15
|
||||
#t.references :collector, foreign_key: true
|
||||
#t.references :device, foreign_key: true
|
||||
|
||||
|
||||
18
test/controllers/registrations_controller_test.rb
Normal file
18
test/controllers/registrations_controller_test.rb
Normal file
@@ -0,0 +1,18 @@
|
||||
require "test_helper"
|
||||
|
||||
class RegistrationsControllerTest < ActionDispatch::IntegrationTest
|
||||
test "sole admin cannot delete account" do
|
||||
sign_in users(:admin)
|
||||
delete user_registration_path
|
||||
assert_redirected_to edit_user_registration_path
|
||||
assert_equal t("registrations.destroy.sole_admin"), flash[:alert]
|
||||
assert User.exists?(users(:admin).id)
|
||||
end
|
||||
|
||||
test "non-admin can delete account" do
|
||||
sign_in users(:alice)
|
||||
assert_difference ->{ User.count }, -1 do
|
||||
delete user_registration_path
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -182,8 +182,8 @@ class UsersTest < ApplicationSystemTestCase
|
||||
assert_title 'Access is forbidden to this page (403)'
|
||||
end
|
||||
|
||||
test 'delete profile' do
|
||||
user = sign_in
|
||||
test "delete profile" do
|
||||
user = sign_in user: users.reject(&:admin?).select(&:confirmed?).sample
|
||||
# TODO: remove condition after root_url changed to different path than
|
||||
# profile in routes.rb
|
||||
unless has_current_path?(edit_user_registration_path)
|
||||
@@ -196,7 +196,15 @@ class UsersTest < ApplicationSystemTestCase
|
||||
assert_text t("devise.registrations.destroyed")
|
||||
end
|
||||
|
||||
test 'index forbidden for non admin' do
|
||||
test "sole admin cannot delete profile" do
|
||||
sign_in user: users(:admin)
|
||||
unless has_current_path?(edit_user_registration_path)
|
||||
first(:link_or_button, users(:admin).email).click
|
||||
end
|
||||
assert find(:button, t("users.registrations.edit.delete"))[:disabled]
|
||||
end
|
||||
|
||||
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)"
|
||||
@@ -229,7 +237,7 @@ class UsersTest < ApplicationSystemTestCase
|
||||
user = User.find_by_email!(first(:link).text)
|
||||
inject_button_to first('td:not(.link)'), "update status", user_path(user), method: :patch,
|
||||
params: {user: {status: User.statuses.keys.sample}}, data: {turbo: false}
|
||||
execute_script("arguments[0].click()", find_button("update status"))
|
||||
click_on "update status"
|
||||
end
|
||||
assert_title 'The change you wanted was rejected (422)'
|
||||
end
|
||||
|
||||
Reference in New Issue
Block a user