Improve Measurement form layout and styling

This commit is contained in:
2026-03-22 01:06:38 +01:00
parent 687e6fcdff
commit 33004f62bd
10 changed files with 150 additions and 124 deletions

View File

@@ -8,7 +8,7 @@
class: 'tools-area' %>
</div>
<table class="main-area items">
<table class="main-area items-table">
<thead>
<tr>
<th><%= Unit.human_attribute_name(:symbol) %></th>

View File

@@ -1,28 +1,37 @@
<%= tabular_form_with model: Measurement.new, id: :measurement_form,
class: 'topside-area vflex', html: {onkeydown: 'formProcessKey(event)'} do |form| %>
<table class="items centered">
<tbody id="readouts"></tbody>
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>
</table>
<div class="hflex">
<%# TODO: right-click selection %>
<details id="quantity_select" class="hexpand" open
onkeydown="detailsProcessKey(event)">
<summary autofocus>
<!-- TODO: Set content with CSS when span empty to avoid duplication -->
<span data-prompt="<%= t('.select_quantity') %>">
<%= t('.select_quantity') %>
</span>
<%= image_button_tag t(:apply), "update", name: nil, disabled: true,
formaction: new_readout_path, formmethod: :get, formnovalidate: true,
data: {turbo_stream: true} %>
</summary>
<ul><%= quantities_check_boxes %></ul>
</details>
<%= form.button id: :create_measurement_button, disabled: true -%>
</div>
<%# TODO: right-click selection; unnecessary with hierarchical tags? %>
<details id="quantity_select" class="centered hexpand" open
onkeydown="detailsProcessKey(event)">
<summary autofocus>
<!-- TODO: Set content with CSS when span empty to avoid duplication -->
<span data-prompt="<%= t('.select_quantity') %>">
<%= t('.select_quantity') %>
</span>
<%= image_button_tag t(:apply), "update", name: nil, disabled: true,
formaction: new_readout_path, formmethod: :get, formnovalidate: true,
data: {turbo_stream: true} %>
</summary>
<ul><%= quantities_check_boxes(@quantities) %></ul>
</details>
<div class="hflex 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>

View File

@@ -8,9 +8,10 @@
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 class="main-area items-table">
<thead>
<tr>
<th><%= Quantity.human_attribute_name(:name) %></th>

View File

@@ -1,13 +1,8 @@
<%# TODO: add readout reordering by dragging %>
<%= tabular_fields_for 'readouts[]', readout do |form| %>
<%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
<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>
<%# TODO: add grayed readout index (in separate column?) %>
<%= readout.quantity.relative_pathname(@superquantity) %>
</td>
<td>
@@ -17,7 +12,13 @@
<%= form.hidden_field :quantity_id %>
<%= form.collection_select :unit_id, @user_units, :id,
->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) },
{prompt: t('.select_unit'), disabled: '', selected: ''}, required: true %>
{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>
<% end %>
<% end %>

View File

@@ -7,9 +7,10 @@
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 class="main-area items-table">
<thead>
<tr>
<th><%= Unit.human_attribute_name(:symbol) %></th>

View File

@@ -1,4 +1,4 @@
<table class="main-area items" id="users">
<table class="main-area items-table" id="users">
<thead>
<tr>
<th><%= User.human_attribute_name(:email) %></th>