forked from fixin.me/fixin.me
Compare commits
2 Commits
fix/system
...
fix/measur
| Author | SHA1 | Date | |
|---|---|---|---|
| 3fe43d1fc0 | |||
| 9b18784caf |
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,7 +1,13 @@
|
||||
class MeasurementsController < ApplicationController
|
||||
before_action except: :index do
|
||||
raise AccessForbidden unless current_user.at_least(:active)
|
||||
end
|
||||
|
||||
def index
|
||||
@measurements = []
|
||||
#@measurements = current_user.units.ordered.includes(:base, :subunits)
|
||||
readouts = current_user.readouts.includes(:quantity, :unit).order(created_at: :desc)
|
||||
@measurements = readouts.group_by(&:created_at).map do |created_at, grouped|
|
||||
Measurement.new(created_at: created_at, readouts: grouped)
|
||||
end
|
||||
end
|
||||
|
||||
def new
|
||||
@@ -9,8 +15,33 @@ class MeasurementsController < ApplicationController
|
||||
end
|
||||
|
||||
def create
|
||||
timestamp = Time.current
|
||||
@readouts = readout_params.map do |rp|
|
||||
r = current_user.readouts.new(rp)
|
||||
r.created_at = timestamp
|
||||
r
|
||||
end
|
||||
|
||||
if @readouts.all?(&:valid?)
|
||||
Readout.transaction { @readouts.each(&:save!) }
|
||||
@measurement = Measurement.new(readouts: @readouts, created_at: timestamp)
|
||||
flash.now[:notice] = t('.success')
|
||||
else
|
||||
render :new, status: :unprocessable_entity
|
||||
end
|
||||
end
|
||||
|
||||
def destroy
|
||||
@measurement = Measurement.new(id: params[:id].to_i,
|
||||
created_at: Time.at(params[:id].to_i))
|
||||
current_user.readouts.where(created_at: @measurement.created_at).delete_all
|
||||
@measurements_empty = current_user.readouts.empty?
|
||||
flash.now[:notice] = t('.success')
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def readout_params
|
||||
params.require(:readouts).map { |r| r.permit(:quantity_id, :value, :unit_id) }
|
||||
end
|
||||
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
|
||||
|
||||
@@ -1,3 +1,17 @@
|
||||
class Measurement
|
||||
include ActiveModel::Model
|
||||
|
||||
attr_accessor :readouts, :created_at
|
||||
|
||||
def id
|
||||
created_at.to_i
|
||||
end
|
||||
|
||||
def to_param
|
||||
id.to_s
|
||||
end
|
||||
|
||||
def persisted?
|
||||
true
|
||||
end
|
||||
end
|
||||
|
||||
@@ -15,8 +15,8 @@ class Quantity < ApplicationRecord
|
||||
errors.add(:parent, :descendant_reference) if ancestor_of?(parent)
|
||||
end
|
||||
validates :name, presence: true, uniqueness: {scope: [:user_id, :parent_id]},
|
||||
length: {maximum: type_for_attribute(:name).limit}
|
||||
validates :description, length: {maximum: type_for_attribute(:description).limit}
|
||||
length: {maximum: type_for_attribute(:name).limit || Float::INFINITY}
|
||||
validates :description, length: {maximum: type_for_attribute(:description).limit || Float::INFINITY}
|
||||
|
||||
# Update :depths of progenies after parent change
|
||||
before_save if: :parent_changed? do
|
||||
@@ -61,8 +61,8 @@ class Quantity < ApplicationRecord
|
||||
|
||||
# Return: ordered [sub]hierarchy
|
||||
scope :ordered, ->(root: nil, include_root: true) {
|
||||
if connection.adapter_name =~ /mysql/i
|
||||
numbered = Arel::Table.new('numbered')
|
||||
|
||||
self.model.with(numbered: numbered(:parent_id, :name)).with_recursive(arel_table.name => [
|
||||
numbered.project(
|
||||
numbered[Arel.star],
|
||||
@@ -73,6 +73,14 @@ class Quantity < ApplicationRecord
|
||||
arel_table[:path].concat(numbered[:child_number])
|
||||
).join(arel_table).on(numbered[:parent_id].eq(arel_table[:id]))
|
||||
]).order(arel_table[:path])
|
||||
elsif root.nil?
|
||||
# SQLite: pathname column already stores the full hierarchical path
|
||||
order(:pathname)
|
||||
else
|
||||
root_pathname = unscoped.where(id: root).pick(:pathname)
|
||||
scope = order(:pathname).where("pathname LIKE ?", "#{root_pathname}#{PATHNAME_DELIMITER}%")
|
||||
include_root ? scope.or(where(id: root)) : scope
|
||||
end
|
||||
}
|
||||
|
||||
# TODO: extract named functions to custom Arel extension
|
||||
|
||||
@@ -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,22 +1,12 @@
|
||||
<%= 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
|
||||
<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 -->
|
||||
@@ -27,11 +17,12 @@
|
||||
formaction: new_readout_path, formmethod: :get, formnovalidate: true,
|
||||
data: {turbo_stream: true} %>
|
||||
</summary>
|
||||
<ul><%= quantities_check_boxes(@quantities) %></ul>
|
||||
<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>
|
||||
|
||||
14
app/views/measurements/_measurement.html.erb
Normal file
14
app/views/measurements/_measurement.html.erb
Normal file
@@ -0,0 +1,14 @@
|
||||
<%= tag.tr id: dom_id(measurement) do %>
|
||||
<td><%= l measurement.created_at, format: :short %></td>
|
||||
<td>
|
||||
<% measurement.readouts.each do |readout| %>
|
||||
<span><%= readout.quantity.name %>: <%= readout.value %> <%= readout.unit %></span>
|
||||
<% end %>
|
||||
</td>
|
||||
<% if current_user.at_least(:active) %>
|
||||
<td class="actions">
|
||||
<%= image_button_to t('.destroy'), 'delete-outline', measurement_path(measurement),
|
||||
method: :delete %>
|
||||
</td>
|
||||
<% end %>
|
||||
<% end %>
|
||||
5
app/views/measurements/create.turbo_stream.erb
Normal file
5
app/views/measurements/create.turbo_stream.erb
Normal file
@@ -0,0 +1,5 @@
|
||||
<%= turbo_stream.update :flashes %>
|
||||
<%= turbo_stream.remove :measurement_form %>
|
||||
<%= turbo_stream.remove :no_items %>
|
||||
<%= turbo_stream.enable :new_measurement_link %>
|
||||
<%= turbo_stream.prepend :measurements, @measurement %>
|
||||
3
app/views/measurements/destroy.turbo_stream.erb
Normal file
3
app/views/measurements/destroy.turbo_stream.erb
Normal file
@@ -0,0 +1,3 @@
|
||||
<%= turbo_stream.update :flashes %>
|
||||
<%= turbo_stream.remove @measurement %>
|
||||
<%= turbo_stream.append(:measurements, render_no_items) if @measurements_empty %>
|
||||
@@ -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>
|
||||
|
||||
@@ -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,18 @@ 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
|
||||
create:
|
||||
success: Measurement saved.
|
||||
destroy:
|
||||
success: Measurement deleted.
|
||||
measurement:
|
||||
destroy: Delete
|
||||
readouts:
|
||||
form:
|
||||
select_unit: ...
|
||||
quantities:
|
||||
navigation: Quantities
|
||||
no_items: There are no configured quantities. You can Add some or Import from defaults.
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -229,7 +229,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