forked from fixin.me/fixin.me
@@ -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. <form>; <a> as link/button),
|
||||
* differently depending on context (e.g. <form>, <table>, <a> as link/button),
|
||||
* * styles with multiple selectors should have all selectors with same
|
||||
* specificity, to allow proper rule specificity vs order management.
|
||||
*
|
||||
* NOTE: style in a modular way, similar to how CSS @scope would be used,
|
||||
* to make transition easier once @scope is widely available. */
|
||||
/* 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 (<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;
|
||||
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 <a> to fill <td> 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 <a> to fill table cell completely, we use an `::after` pseudoelement. */
|
||||
/* TODO: expand to whole row? will require adjusting z-index on inputs/buttons */
|
||||
.items-table td:has(> .link) {
|
||||
position: relative;
|
||||
}
|
||||
.items-table .link::after {
|
||||
content: '';
|
||||
inset: -1px 0 0 0;
|
||||
position: absolute;
|
||||
}
|
||||
.items-table .flex {
|
||||
gap: 0.4em;
|
||||
justify-content: end;
|
||||
}
|
||||
.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 <label> containing disabled checkbox: `label:has(input[disabled])`,
|
||||
@@ -682,3 +635,8 @@ li::marker {
|
||||
* * focused label styling (currently only checkbox has focus),
|
||||
* * disabled checkbox blue square focus removal.
|
||||
* */
|
||||
|
||||
#measurement_form {
|
||||
min-width: 66%;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</td>
|
||||
|
||||
<% if current_user.at_least(:active) %>
|
||||
<td class="actions">
|
||||
<td class="flex">
|
||||
<% unless unit.portable.nil? %>
|
||||
<% if unit.default? %>
|
||||
<%= image_button_to_if unit.portable?, t('.import'), 'download-outline',
|
||||
|
||||
@@ -23,10 +23,10 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="hflex">
|
||||
<header class="flex">
|
||||
<%= image_link_to t(".source_code"), "code-braces", source_code_url %>
|
||||
<%= image_link_to t(".issue_tracker"), "bug-outline", issue_tracker_url,
|
||||
class: "extendedright" %>
|
||||
class: "rextend" %>
|
||||
<% if user_signed_in? %>
|
||||
<%= image_link_to_unless_current(current_user, "account-wrench-outline",
|
||||
edit_user_registration_path) %>
|
||||
|
||||
@@ -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| %>
|
||||
|
||||
<table class="items-table centered">
|
||||
<table class="items-table center">
|
||||
<tbody id="readouts">
|
||||
<%= tabular_fields_for @measurement do |form| %>
|
||||
<tr class="italic">
|
||||
<td class="hexpand hmin50"><%= t '.taken_at_html' %></td>
|
||||
<td colspan="3" class="number">
|
||||
<td colspan="3" class="ralign">
|
||||
<%= form.datetime_field :taken_at, required: true %>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -16,7 +16,7 @@
|
||||
</table>
|
||||
|
||||
<%# TODO: right-click selection; unnecessary with hierarchical tags? %>
|
||||
<details id="quantity_select" class="centered hexpand" open
|
||||
<details id="quantity_select" class="center hexpand" open
|
||||
onkeydown="detailsProcessKey(event)">
|
||||
<summary autofocus>
|
||||
<!-- TODO: Set content with CSS when span empty to avoid duplication -->
|
||||
@@ -30,7 +30,7 @@
|
||||
<ul><%= quantities_check_boxes(@quantities) %></ul>
|
||||
</details>
|
||||
|
||||
<div class="hflex reverse">
|
||||
<div class="flex reverse">
|
||||
<%= form.button id: :create_measurement_button, disabled: true -%>
|
||||
<%= image_link_to t(:cancel), "close-outline", measurements_path, name: :cancel,
|
||||
class: 'dangerous', onclick: render_turbo_stream('form_close') %>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<%= form.text_area :description, cols: 30, rows: 1, escape: false %>
|
||||
</td>
|
||||
|
||||
<td class="actions">
|
||||
<td class="flex">
|
||||
<%= form.button %>
|
||||
<%= image_link_to t(:cancel), "close-outline", quantities_path, class: 'dangerous',
|
||||
name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
|
||||
|
||||
@@ -5,14 +5,14 @@
|
||||
data: {drag_path: reparent_quantity_path(quantity), drop_id: dom_id(quantity),
|
||||
drop_id_param: "quantity[parent_id]"} do %>
|
||||
|
||||
<td class="link" style="--depth:<%= quantity.depth %>">
|
||||
<%= link_to quantity, edit_quantity_path(quantity), onclick: 'this.blur();',
|
||||
data: {turbo_stream: true} %>
|
||||
<td style="--depth:<%= quantity.depth %>">
|
||||
<%= link_to quantity, edit_quantity_path(quantity), class: 'link',
|
||||
onclick: 'this.blur();', data: {turbo_stream: true} %>
|
||||
</td>
|
||||
<td><%= quantity.description %></td>
|
||||
|
||||
<% if current_user.at_least(:active) %>
|
||||
<td class="actions">
|
||||
<td class="flex">
|
||||
<%= image_link_to t('.new_subquantity'), 'plus-outline', new_quantity_path(quantity),
|
||||
id: dom_id(quantity, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th><%= Quantity.human_attribute_name(:name) %></th>
|
||||
<th><%= Quantity.human_attribute_name(:description) %></th>
|
||||
<th class="hexpand"><%= Quantity.human_attribute_name(:description) %></th>
|
||||
<% if current_user.at_least(:active) %>
|
||||
<th><%= t :actions %></th>
|
||||
<th></th>
|
||||
|
||||
@@ -4,17 +4,17 @@
|
||||
<td>
|
||||
<%# TODO: add grayed readout index (in separate column?) %>
|
||||
<%= readout.quantity.relative_pathname(@superquantity) %>
|
||||
<%= form.hidden_field :quantity_id %>
|
||||
</td>
|
||||
<td>
|
||||
<%= form.number_field :value, required: true, autofocus: readout_counter == 0 %>
|
||||
</td>
|
||||
<td>
|
||||
<%= form.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">
|
||||
<td class="flex">
|
||||
<%# TODO: change to _link_ after giving up displaying relative paths %>
|
||||
<%= image_button_tag '', 'delete-outline', class: 'dangerous', name: nil,
|
||||
formaction: discard_readouts_path(readout.quantity),
|
||||
|
||||
@@ -8,11 +8,11 @@
|
||||
<td>
|
||||
<%= form.text_area :description, cols: 30, rows: 1, escape: false %>
|
||||
</td>
|
||||
<td class="number">
|
||||
<td>
|
||||
<%= form.number_field :multiplier, required: true, size: 10, min: :step if @unit.base_id? %>
|
||||
</td>
|
||||
|
||||
<td class="actions">
|
||||
<td class="flex">
|
||||
<%= form.button %>
|
||||
<%= image_link_to t(:cancel), "close-outline", units_path, class: 'dangerous',
|
||||
name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
|
||||
|
||||
@@ -6,14 +6,15 @@
|
||||
drop_id: dom_id(unit.base || unit),
|
||||
drop_id_param: "unit[base_id]"} do %>
|
||||
|
||||
<td class="link" style="--depth:<%= unit.base_id? ? 1 : 0 %>">
|
||||
<%= link_to unit, edit_unit_path(unit), onclick: 'this.blur();', data: {turbo_stream: true} %>
|
||||
<td style="--depth:<%= unit.base_id? ? 1 : 0 %>">
|
||||
<%= link_to unit, edit_unit_path(unit), class: 'link', onclick: 'this.blur();',
|
||||
data: {turbo_stream: true} %>
|
||||
</td>
|
||||
<td><%= unit.description %></td>
|
||||
<td class="number"><%= unit.multiplier.to_html %></td>
|
||||
<td class="ralign"><%= unit.multiplier.to_html %></td>
|
||||
|
||||
<% if current_user.at_least(:active) %>
|
||||
<td class="actions">
|
||||
<td class="flex">
|
||||
<% unless unit.base_id? %>
|
||||
<%= image_link_to t('.new_subunit'), 'plus-outline', new_unit_path(unit),
|
||||
id: dom_id(unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th><%= Unit.human_attribute_name(:symbol) %></th>
|
||||
<th><%= Unit.human_attribute_name(:description) %></th>
|
||||
<th class="hexpand"><%= Unit.human_attribute_name(:description) %></th>
|
||||
<th><%= Unit.human_attribute_name(:multiplier) %></th>
|
||||
<% if current_user.at_least(:active) %>
|
||||
<th><%= t :actions %></th>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<tbody>
|
||||
<% @users.each do |user| %>
|
||||
<tr>
|
||||
<td class="link"><%= link_to user, user_path(user) %></td>
|
||||
<td><%= link_to user, user_path(user), class: 'link' %></td>
|
||||
<td>
|
||||
<% if user == current_user %>
|
||||
<%= user.status %>
|
||||
@@ -22,11 +22,11 @@
|
||||
<% end %>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="svg">
|
||||
<td>
|
||||
<%= svg_tag 'pictograms/checkbox-marked-outline' if user.confirmed_at.present? %>
|
||||
</td>
|
||||
<td><%= l user.created_at, format: :without_tz %></td>
|
||||
<td class="actions">
|
||||
<td class="flex">
|
||||
<% if allow_disguise?(user) %>
|
||||
<%= image_link_to t('.disguise'), 'incognito', disguise_user_path(user) %>
|
||||
<% end %>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<div class="flex">
|
||||
<%= f.submit "Resend unlock instructions" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
Reference in New Issue
Block a user