forked from fixin.me/fixin.me
Improve Measurement form layout and styling
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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(' ' * (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 %>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user