diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index f6404da..d01d199 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -18,14 +18,12 @@ /* Strive for simplicity: * * style elements/tags only - if possible, * * replace element/tag name with class name - if element has to be styled - * differently depending on context (e.g.
; as link/button), + * differently depending on context (e.g. , , 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. */ -/* TODO: review styles with multiple selectors and try to convert them to the same - * specificity. */ :root { --color-focus-gray: #f3f3f3; --color-border-gray: #dddddd; @@ -57,8 +55,8 @@ :focus-visible { outline: none; } -/* NOTE: move to higher priority layer instead of using !important? */ -/* TODO: add CSS @layer requirements in README */ +/* NOTE: move to higher priority layer instead of using !important?; add CSS + * @layer requirements in README */ [disabled] { border-color: var(--color-border-gray) !important; color: var(--color-border-gray) !important; @@ -80,10 +78,13 @@ * gray - target for interaction with keyboard, * red - destructive, non-undoable action. */ +/* TODO: merge selectors using :is() */ +a, button, details, input, select, +summary, textarea { background-color: inherit; font: inherit; @@ -101,7 +102,14 @@ textarea { border-radius: 0.25em; padding: 0.2em 0.4em; } -svg, +svg { + height: 1.4em; + margin: 0 0.2em 0 0; + width: 1.4em; +} +svg:last-child { + margin-right: 0; +} textarea { margin: 0; } @@ -153,6 +161,10 @@ table form summary, table form textarea { color: inherit; } +table svg:not(:only-child) { + height: 1.25em; + width: 1.25em; +} input:focus-visible, select:focus-visible, select:focus-within, @@ -214,21 +226,17 @@ textarea:invalid { padding: 0.6em 0.5em; width: fit-content; } +.link { + color: inherit; + text-decoration: underline 1px var(--color-border-gray); + text-underline-offset: 0.25em; +} [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 { @@ -244,6 +252,13 @@ textarea:invalid { background-color: var(--color-red); border-color: var(--color-red); } +.link:focus-visible { + text-decoration-color: var(--color-gray); +} +.link:hover { + color: var(--color-blue); + text-decoration-color: var(--color-blue); +} table .button { border-color: var(--color-border-gray); color: var(--color-table-gray); @@ -251,15 +266,6 @@ table .button { height: 100%; padding: 0.4em; } -/* TODO: move normal, non-button links (: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; - padding-inline: 0; -} /* NOTE: collapse gaps around empty rows (`topside`) once possible with @@ -271,16 +277,16 @@ body { grid-template-areas: "header header header" "nav nav nav" - "leftside topside rightside" "leftside main rightside"; grid-template-columns: 1fr minmax(max-content, 2fr) 1fr; font-family: system-ui; margin: 0.4em; } -body:not(:has(.topside-area)) { +body:has(> .topside-area) { grid-template-areas: "header header header" "nav nav nav" + "leftside topside rightside" "leftside main rightside"; } @@ -431,14 +437,18 @@ header { .tabular-form table { border: none; + border-spacing: 0.4em 0; + margin-inline: -0.4em; } .tabular-form table td { border: none; - text-align: left; vertical-align: middle; } -.tabular-form table td:first-child { - color: inherit; +.tabular-form table td { + padding-inline: 0; +} +.tabular-form table :is(form, input, select, textarea):only-child { + margin-inline-start: 0; } @@ -457,59 +467,41 @@ header { background-color: var(--color-focus-gray); } .items-table th { - padding-block: 0.75em; + padding: 0.75em 0 0.75em 1em; text-align: center; } -.items-table th, -.items-table td { - padding-inline: 1em 0; -} -/* For to fill <% if current_user.at_least(:active) %> - - <% if current_user.at_least(:active) %> - - + <% if current_user.at_least(:active) %> diff --git a/app/views/readouts/_form.html.erb b/app/views/readouts/_form.html.erb index bbb5c31..79d1293 100644 --- a/app/views/readouts/_form.html.erb +++ b/app/views/readouts/_form.html.erb @@ -4,17 +4,17 @@ - - - - + <% if current_user.at_least(:active) %> - - + <% if current_user.at_least(:active) %> diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb index ccb438d..ac351b1 100644 --- a/app/views/users/index.html.erb +++ b/app/views/users/index.html.erb @@ -11,7 +11,7 @@ <% @users.each do |user| %> - + - -
completely, we use an `::after` pseudoelement. */ -.items-table td.link { - padding: 0; - position: relative; -} -.items-table td.link a { - color: inherit; - font: inherit; -} -.items-table td.link a::after { - content: ''; - inset: 0; - position: absolute; -} -.items-table td:first-child { - padding-inline-start: calc(1em + var(--depth) * 0.8em); -} -.items-table td:has(input, select, textarea) { - padding-inline-start: calc(0.6em - 0.9px); -} -.items-table td:first-child:has(input, select, textarea) { - padding-inline-start: calc(0.6em + var(--depth) * 0.8em - 0.9px); -} .items-table th:last-child { padding-inline-end: 0.4em; } -.items-table td:last-child { - padding-inline-end: 0.1em; -} .items-table td { border-top: 1px solid var(--color-border-gray); height: 2.4em; - padding-block: 0.1em; + padding: 0.1em 0 0.1em calc(1em + var(--depth) * 0.8em); } -.items-table .actions { - display: flex; +.items-table td:last-child { + padding-inline-end: 0.1em; +} +.items-table :is(form, input, select, textarea):only-child { + margin-inline-start: calc(-0.4em - 0.9px); +} +/* For to fill table cell completely, we use an `::after` pseudoelement. */ +/* TODO: expand to whole row? will require adjusting z-index on inputs/buttons */ +.items-table td:has(> .link) { + position: relative; +} +.items-table .link::after { + content: ''; + inset: -1px 0 0 0; + position: absolute; +} +.items-table .flex { gap: 0.4em; justify-content: end; } -.items-table .actions.centered { - justify-content: center; -} -.items-table tr.dropzone { +.items-table .dropzone { position: relative; } -.items-table tr.dropzone::after { +.items-table .dropzone::after { content: ''; inset: 1px 0 0 0; position: absolute; @@ -517,72 +509,37 @@ header { outline-offset: -1px; z-index: var(--z-index-table-row-outline); } -.items-table td.handle { - cursor: move; +.items-table .handle { + cursor: grab; } -.items-table tr.form td { +.items-table .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 { - text-decoration: underline; - text-decoration-thickness: 0.05rem; - text-underline-offset: 0.2rem; -} -.items-table td.link a:hover { - color: var(--color-blue); -} -.items-table td.link a:focus-visible { - text-decoration-color: var(--color-gray); -} -.items-table td.link a:hover:focus-visible { - color: var(--color-dark-blue); -} - .items-table td:not(:first-child), .grayed { color: var(--color-table-gray); - fill: var(--color-table-gray); + fill: var(--color-gray); } -.items-table svg { - height: 1rem; - vertical-align: middle; - width: 1rem; -} -.items-table svg:last-child { - height: 1.2rem; - width: 1.2rem; -} -.items-table td.svg { +.items-table td:has(> svg:only-child) { text-align: center; } -.items-table td.number { - text-align: right; -} -.centered { +.center { margin: 0 auto; } -.extendedright { - margin-right: auto; -} .hexpand { width: 100%; } -.hflex { +.flex { display: flex; gap: 0.8em; } -.hflex.reverse { +.flex.reverse { flex-direction: row-reverse; } -.hflex.centered { - justify-content: center; +.flex.vertical { + flex-direction: column; } .hint { color: var(--color-table-gray); @@ -597,10 +554,11 @@ header { color: var(--color-gray); font-style: italic; } -.vflex { - display: flex; - gap: 0.8em; - flex-direction: column; +.ralign { + text-align: right; +} +.rextend { + margin-right: auto; } @@ -647,7 +605,7 @@ summary::marker { } /* NOTE: use `details[open]::details-content` once widely available. */ details[open] ul { - background: white; + background-color: white; border: 1px solid var(--color-border-gray); border-radius: 0.25em; box-shadow: 1px 1px 3px var(--color-border-gray); @@ -670,11 +628,6 @@ li input[type=checkbox] { li::marker { content: ''; } - -#measurement_form { - min-width: 66%; - width: max-content; -} /* * TODO: * * disable + <% unless unit.portable.nil? %> <% if unit.default? %> <%= image_button_to_if unit.portable?, t('.import'), 'download-outline', diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 293a20b..6167976 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -23,10 +23,10 @@ -
+
<%= image_link_to t(".source_code"), "code-braces", source_code_url %> <%= image_link_to t(".issue_tracker"), "bug-outline", issue_tracker_url, - class: "extendedright" %> + class: "rextend" %> <% if user_signed_in? %> <%= image_link_to_unless_current(current_user, "account-wrench-outline", edit_user_registration_path) %> diff --git a/app/views/measurements/_form.html.erb b/app/views/measurements/_form.html.erb index 1794cfe..cd4b734 100644 --- a/app/views/measurements/_form.html.erb +++ b/app/views/measurements/_form.html.erb @@ -1,13 +1,13 @@ <%= tabular_form_with model: Measurement.new, id: :measurement_form, - class: 'topside-area vflex centered', + class: 'topside-area flex vertical center', html: {onkeydown: 'formProcessKey(event)'} do |form| %> - +
<%= tabular_fields_for @measurement do |form| %> - @@ -16,7 +16,7 @@
<%= t '.taken_at_html' %> + <%= form.datetime_field :taken_at, required: true %>
<%# TODO: right-click selection; unnecessary with hierarchical tags? %> -
@@ -30,7 +30,7 @@
    <%= quantities_check_boxes(@quantities) %>
-
+
<%= 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') %> diff --git a/app/views/quantities/_form.html.erb b/app/views/quantities/_form.html.erb index 3597590..15686a1 100644 --- a/app/views/quantities/_form.html.erb +++ b/app/views/quantities/_form.html.erb @@ -9,7 +9,7 @@ <%= form.text_area :description, cols: 30, rows: 1, escape: false %>
+ <%= form.button %> <%= image_link_to t(:cancel), "close-outline", quantities_path, class: 'dangerous', name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %> diff --git a/app/views/quantities/_quantity.html.erb b/app/views/quantities/_quantity.html.erb index c3b14f6..43344e2 100644 --- a/app/views/quantities/_quantity.html.erb +++ b/app/views/quantities/_quantity.html.erb @@ -5,14 +5,14 @@ data: {drag_path: reparent_quantity_path(quantity), drop_id: dom_id(quantity), drop_id_param: "quantity[parent_id]"} do %> - - <%= link_to quantity, edit_quantity_path(quantity), onclick: 'this.blur();', - data: {turbo_stream: true} %> + + <%= link_to quantity, edit_quantity_path(quantity), class: 'link', + onclick: 'this.blur();', data: {turbo_stream: true} %> <%= quantity.description %> + <%= image_link_to t('.new_subquantity'), 'plus-outline', new_quantity_path(quantity), id: dom_id(quantity, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %> diff --git a/app/views/quantities/index.html.erb b/app/views/quantities/index.html.erb index 9d9a1af..ecd3258 100644 --- a/app/views/quantities/index.html.erb +++ b/app/views/quantities/index.html.erb @@ -15,7 +15,7 @@
<%= Quantity.human_attribute_name(:name) %><%= Quantity.human_attribute_name(:description) %><%= Quantity.human_attribute_name(:description) %><%= t :actions %> <%# TODO: add grayed readout index (in separate column?) %> <%= readout.quantity.relative_pathname(@superquantity) %> + <%= form.hidden_field :quantity_id %> <%= form.number_field :value, required: true, autofocus: readout_counter == 0 %> - <%= 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 %> + <%# 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), diff --git a/app/views/units/_form.html.erb b/app/views/units/_form.html.erb index c419874..a5b1a3e 100644 --- a/app/views/units/_form.html.erb +++ b/app/views/units/_form.html.erb @@ -8,11 +8,11 @@ <%= form.text_area :description, cols: 30, rows: 1, escape: false %> + <%= form.number_field :multiplier, required: true, size: 10, min: :step if @unit.base_id? %> + <%= form.button %> <%= image_link_to t(:cancel), "close-outline", units_path, class: 'dangerous', name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %> diff --git a/app/views/units/_unit.html.erb b/app/views/units/_unit.html.erb index f332fdc..d5e726e 100644 --- a/app/views/units/_unit.html.erb +++ b/app/views/units/_unit.html.erb @@ -6,14 +6,15 @@ drop_id: dom_id(unit.base || unit), drop_id_param: "unit[base_id]"} do %> - - <%= link_to unit, edit_unit_path(unit), onclick: 'this.blur();', data: {turbo_stream: true} %> + + <%= link_to unit, edit_unit_path(unit), class: 'link', onclick: 'this.blur();', + data: {turbo_stream: true} %> <%= unit.description %><%= unit.multiplier.to_html %><%= unit.multiplier.to_html %> + <% unless unit.base_id? %> <%= image_link_to t('.new_subunit'), 'plus-outline', new_unit_path(unit), id: dom_id(unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %> diff --git a/app/views/units/index.html.erb b/app/views/units/index.html.erb index 417fab5..775fef8 100644 --- a/app/views/units/index.html.erb +++ b/app/views/units/index.html.erb @@ -14,7 +14,7 @@
<%= Unit.human_attribute_name(:symbol) %><%= Unit.human_attribute_name(:description) %><%= Unit.human_attribute_name(:description) %> <%= Unit.human_attribute_name(:multiplier) %><%= t :actions %>
<%= link_to user, user_path(user) %><%= link_to user, user_path(user), class: 'link' %> <% if user == current_user %> <%= user.status %> @@ -22,11 +22,11 @@ <% end %> <% end %> + <%= svg_tag 'pictograms/checkbox-marked-outline' if user.confirmed_at.present? %> <%= l user.created_at, format: :without_tz %> + <% if allow_disguise?(user) %> <%= image_link_to t('.disguise'), 'incognito', disguise_user_path(user) %> <% end %> diff --git a/app/views/users/unlocks/new.html.erb b/app/views/users/unlocks/new.html.erb index 2f4fab8..71ac7e4 100644 --- a/app/views/users/unlocks/new.html.erb +++ b/app/views/users/unlocks/new.html.erb @@ -8,7 +8,7 @@ <%= f.email_field :email, autofocus: true, autocomplete: "email" %> -
+
<%= f.submit "Resend unlock instructions" %>
<% end %>