forked from fixin.me/fixin.me
Compare commits
3 Commits
c367009347
...
68695bced9
| Author | SHA1 | Date | |
|---|---|---|---|
| 68695bced9 | |||
| 6717b1d4c1 | |||
| d7fd8f1c45 |
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 167 B After Width: | Height: | Size: 152 B |
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 293 B After Width: | Height: | Size: 278 B |
@@ -18,10 +18,14 @@
|
||||
/* 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>; <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. */
|
||||
/* TODO: review styles with multiple selectors and try to convert them to the same
|
||||
* specificity. */
|
||||
:root {
|
||||
--color-focus-gray: #f3f3f3;
|
||||
--color-border-gray: #dddddd;
|
||||
@@ -53,12 +57,26 @@
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
/* NOTE: move to higher priority layer instead of using !important? */
|
||||
[disabled] {
|
||||
border-color: var(--color-border-gray) !important;
|
||||
color: var(--color-border-gray) !important;
|
||||
/* NOTE: cannot set cursor with `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;
|
||||
}
|
||||
/* [hidden] submit elements cannot have `display` set as it makes 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,
|
||||
@@ -73,50 +91,17 @@ 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;
|
||||
}
|
||||
input[type=checkbox],
|
||||
svg,
|
||||
textarea {
|
||||
margin: 0
|
||||
margin: 0;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
accent-color: var(--color-blue);
|
||||
@@ -124,13 +109,16 @@ 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;
|
||||
@@ -142,52 +130,21 @@ input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.button > svg,
|
||||
.tab > svg,
|
||||
button > svg {
|
||||
height: 1.4em;
|
||||
width: 1.4em;
|
||||
}
|
||||
.button > svg:not(:last-child),
|
||||
.tab > svg:not(:last-child),
|
||||
button > svg:not(:last-child) {
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
/* TODO: move normal non-button links (<a>:hover/:focus) styling here (i.e.
|
||||
* page-wide, top-level) and remove from table.items - as the style should be
|
||||
* same everywhere */
|
||||
.button:focus-visible,
|
||||
button:focus-visible,
|
||||
input[type=submit]:focus-visible {
|
||||
background-color: var(--color-focus-gray);
|
||||
}
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
select:focus-within,
|
||||
/* TODO: how to achieve summary:focus-within for ::details-content? */
|
||||
/* TODO: how to achieve `summary:focus-within` for `::details-content`? */
|
||||
summary:focus-visible,
|
||||
textarea:focus-visible {
|
||||
accent-color: var(--color-dark-blue);
|
||||
background-color: var(--color-focus-gray);
|
||||
}
|
||||
.button:hover,
|
||||
button:hover,
|
||||
input[type=submit]:hover {
|
||||
background-color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
color: white;
|
||||
fill: white;
|
||||
}
|
||||
.dangerous:hover {
|
||||
background-color: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
}
|
||||
input:hover,
|
||||
select:hover,
|
||||
summary:hover,
|
||||
textarea:hover {
|
||||
border-color: var(--color-blue);
|
||||
outline: solid 1px var(--color-blue);
|
||||
outline: 1px solid var(--color-blue);
|
||||
}
|
||||
select:hover,
|
||||
summary:hover {
|
||||
@@ -197,8 +154,68 @@ input:invalid,
|
||||
select:invalid,
|
||||
textarea:invalid {
|
||||
border-color: var(--color-red);
|
||||
outline: solid 1px 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 {
|
||||
height: 1.4em;
|
||||
width: 1.4em;
|
||||
}
|
||||
.button > svg:not(:last-child),
|
||||
.tab > svg:not(:last-child) {
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
.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;
|
||||
fill: white;
|
||||
}
|
||||
.dangerous:hover {
|
||||
background-color: var(--color-red);
|
||||
border-color: 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. */
|
||||
input[type=text]:read-only,
|
||||
textarea:read-only {
|
||||
border: none;
|
||||
@@ -206,8 +223,8 @@ textarea:read-only {
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
@@ -240,18 +257,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 +296,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 +312,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();
|
||||
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 {
|
||||
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 +364,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,15 +378,23 @@ 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;
|
||||
}
|
||||
|
||||
|
||||
/* TODO: remove .items class (?) and make 'form table' work properly */
|
||||
/* TODO: remove `.items` class (?) and make `form table` work properly. */
|
||||
table.items {
|
||||
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;
|
||||
@@ -402,7 +417,7 @@ table.items th,
|
||||
table.items td {
|
||||
padding-inline: 1em 0;
|
||||
}
|
||||
/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
|
||||
/* For <a> to fill <td> completely, we use an `::after` pseudoelement. */
|
||||
table.items td.link {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
@@ -432,7 +447,7 @@ table.items td:last-child {
|
||||
padding-inline-end: 0.1em;
|
||||
}
|
||||
table.items td {
|
||||
border-top: solid 1px var(--color-border-gray);
|
||||
border-top: 1px solid var(--color-border-gray);
|
||||
height: 2.4em;
|
||||
padding-block: 0.1em;
|
||||
}
|
||||
@@ -451,7 +466,7 @@ table.items tr.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);
|
||||
}
|
||||
@@ -462,8 +477,8 @@ table.items tr.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. */
|
||||
/* TODO: replace `:hover:focus-visible` combos with proper LOVE style 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 {
|
||||
@@ -501,9 +516,7 @@ table.items td.svg {
|
||||
table.items td.number {
|
||||
text-align: right;
|
||||
}
|
||||
table.items .button,
|
||||
table.items button,
|
||||
table.items input[type=submit] {
|
||||
table.items .button {
|
||||
font-weight: normal;
|
||||
height: 100%;
|
||||
padding: 0.4em;
|
||||
@@ -513,30 +526,26 @@ 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) {
|
||||
|
||||
table input,
|
||||
table select,
|
||||
table summary,
|
||||
table textarea {
|
||||
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) {
|
||||
table select {
|
||||
color: var(--color-table-gray);
|
||||
}
|
||||
table.items select:focus-within,
|
||||
table.items select:focus-visible {
|
||||
table select:hover,
|
||||
table select:focus-within,
|
||||
table select:focus-visible {
|
||||
color: black;
|
||||
}
|
||||
form a[name=cancel] {
|
||||
table .button {
|
||||
border-color: var(--color-border-gray);
|
||||
color: var(--color-nav-gray);
|
||||
fill: var(--color-nav-gray);
|
||||
color: var(--color-table-gray);
|
||||
}
|
||||
|
||||
form table.items {
|
||||
border: none;
|
||||
}
|
||||
@@ -548,6 +557,9 @@ form table.items td {
|
||||
form table.items td:first-child {
|
||||
color: inherit;
|
||||
}
|
||||
form table select {
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
.centered {
|
||||
@@ -580,17 +592,6 @@ form table.items td:first-child {
|
||||
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 {
|
||||
@@ -618,7 +619,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;
|
||||
@@ -634,10 +635,10 @@ details[open] summary::before {
|
||||
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);
|
||||
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 +660,10 @@ 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.
|
||||
* */
|
||||
|
||||
@@ -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
|
||||
@@ -113,8 +114,12 @@ module ApplicationHelper
|
||||
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 +140,21 @@ 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, 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 +165,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 +213,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 +223,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("×"), 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 +260,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
|
||||
|
||||
Reference in New Issue
Block a user