Upgrade layout to grid+flex

app/assets/stylesheets/application.css

@@ -1,21 +1,25 @@
 /*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * This is a manifest file that'll be compiled into application.css, which will
- * listed below.
+ * include all the files listed below.
  *
- * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
+ * Any CSS (and SCSS, if configured) file within this directory,
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
+ * lib/assets/stylesheets, or any plugin's vendor/assets/stylesheets directory
+ * can be referenced here using a relative path.
  *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * You're free to add application-wide styles to this file and they'll appear at
- * compiled file so the styles you add here take precedence over styles defined in any other CSS
+ * the bottom of the compiled file so the styles you add here take precedence
- * files in this directory. Styles in this file should be added after the last require_* statement.
+ * over styles defined in any other CSS files in this directory. Styles in this
- * It is generally better to create a new file per style scope.
+ * file should be added after the last require_* statement.  It is generally
+ * better to create a new file per style scope.
  *
  *= require_tree .
  *= require_self
  */
 
-* {
+*,
-  font-family: system-ui;
+::before,
+::after {
+  box-sizing: border-box;
 }
 ::selection {
   background-color: #009ade;
@@ -24,28 +28,67 @@
 :focus-visible {
   outline: none;
 }
-.centered {
+
-  margin: 0 auto;
-}
 
 body {
-  margin: 0 0.5rem;
+  display: grid;
+  gap: 0.8em;
+  grid-template-areas:
+    "header   header  header"
+    "nav      nav     nav"
+    "leftside main    rightside";
+  grid-template-columns: 1fr 0fr 1fr;
+  grid-template-rows: repeat(3, auto);
+  font-family: system-ui;
+  margin: 0.4em;
 }
+button,
+input,
+select {
+  background-color: inherit;
+  font: inherit;
+}
+
 
 /* blue - target for interaction with pointer */
 /* gray - target for interaction with keyboard */
-input,
+a,
-select {
+button,
-  background-color: white;
+input[type=submit] {
-  border: 1px solid;
+  align-items: center;
-  border-radius: 0.2rem;
+  color: #a0a0a0;
-  border-color: #cccccc;
+  cursor: pointer;
+  fill: #a0a0a0;
+  font-weight: bold;
+  text-decoration: none;
 }
-input:not([type=checkbox]),
+.button,
+button,
+input[type=submit] {
+  display: flex;
+  font-size: 0.8rem;
+  padding: 0.4em;
+  width: fit-content;
+}
+input:not([type=submit]).not([type=checkbox]),
 select {
-  font-size: 0.9rem;
   padding: 0.2rem 0.4rem;
 }
+.button,
+button,
+input,
+select {
+  border: solid 1px #a0a0a0;
+  border-radius: 0.25em;
+}
+.button > svg,
+.tab > svg,
+button > svg {
+  height: 1.8em;
+  padding-right: 0.4em;
+  width: 1.8em;
+}
+
 input[type=checkbox] {
   accent-color: #009ade;
   appearance: none;
@@ -83,72 +126,52 @@ input:read-only:hover {
   background: white;
 }
 
-.app-menu {
+
-  height: 2.2rem;
+.header {
-  margin: 0.4rem 0;
+  display: flex;
-}
+  gap: 0.8em;
-.app-menu > * {
+  grid-area: header;
-  float: right;
+  justify-content: flex-end;
-  margin-left: 0.8rem;
 }
 
-.nav-menu {
+
-  height: 2.4rem;
+.navigation {
-  margin: 0.4rem 0;
+  display: flex;
+  grid-area: nav;
 }
-.nav-menu .right > * {
+.navigation > .tab + .tab.right {
-  float: right;
+  margin-inline-start: 4%;
-}
-.nav-menu .left > * {
-  float: left;
 }
 /* TODO: inactive tab color #d0d0d0 or #c7c7c7 */
-.nav-menu .tab {
+.navigation > .tab {
-  border: none;
+  border-bottom: solid 3px #c7c7c7;
-  border-bottom: solid 0.2rem #a0a0a0;
+  display: flex;
-  border-radius: 0;
+  flex: 1;
-  font-size: 0.9rem;
+  font-size: 1rem;
-  padding: 0.5rem 0.8rem;
+  justify-content: center;
+  padding-block: 0.3em;
 }
-.nav-menu .tab:hover {
+.navigation > .tab:hover {
-  border-bottom: solid 0.2rem #009ade;
+  border-bottom: solid 4px #009ade;
 }
-.nav-menu .tab.active {
+.navigation > .tab.active {
-  border-bottom: solid 0.2rem;
+  border-bottom: solid 4px;
   color: #009ade;
   fill: #009ade;
 }
-.nav-menu a.button svg,
+
-.nav-menu button svg {
+
-  height: 1.5rem;
+.leftside {
-  padding-right: 0.4rem;
+  grid-area: leftside;
-  width: 1.5rem;
+}
+.main {
+  grid-area: main;
+}
+.rightside {
+  grid-area: rightside;
 }
 
-a.button,
+
-button,
-input[type=submit] {
-  align-items: center;
-  background-color: white;
-  border: 1px solid;
-  border-color: #a0a0a0;
-  border-radius: 0.2rem;
-  color: #a0a0a0;
-  cursor: pointer;
-  display: flex;
-  fill: #a0a0a0;
-  font-size: 0.8rem;
-  font-weight: bold;
-  padding: 0.4rem;
-  text-decoration: none;
-  width: fit-content;
-}
-a.button svg,
-button svg {
-  height: 1.3rem;
-  padding-right: 0.4rem;
-  width: 1.3rem;
-}
 a.button:hover,
 a.button.active:hover,
 button:hover,
@@ -180,6 +203,7 @@ button.dangerous:hover:focus-visible {
   border-color: #b21237;
 }
 
+
 .flashes {
   height: 2.1rem;
 }
@@ -226,6 +250,7 @@ button.dangerous:hover:focus-visible {
   opacity: 1;
 }
 
+
 form table {
   border-spacing: 0.8rem;
 }
@@ -264,41 +289,41 @@ form input[type=submit] {
   padding: 0.75rem;
 }
 
+
 table.items {
   border-spacing: 0;
-  border: 1px solid #dddddd;
+  border: solid 1px #dddddd;
-  border-radius: 0.2rem;
+  border-radius: 0.25em;
   font-size: 0.85rem;
-  margin: 1rem auto 0 auto;
+  text-align: center;
 }
 table.items thead {
   font-size: 0.8rem;
-  line-height: 2.2rem;
 }
 table.items thead,
 table.items tbody tr:hover {
   background-color: #f3f3f3;
 }
+table.items th {
+  padding-block: 0.75em;
+}
 table.items th,
 table.items td {
-  padding: 0 0.8rem;
+  padding-inline-start: 0.8rem;
-  text-align: center;
+}
+table.items th:last-child {
+  padding-inline-end: 0.4em;
 }
 table.items td {
-  border-top: 1px solid #dddddd;
+  border-top: solid 1px #dddddd;
+  padding-block: 0.1em;
 }
 table.items td:first-child {
-  padding: 0;
   text-align: left;
 }
 table.items a {
-  color: black;
+  color: inherit;
-  cursor: pointer;
+  font: inherit;
-  display: block;
-  font-weight: normal;
-  line-height: 2.2rem;
-  padding: 0 0.8rem;
-  text-decoration: none;
 }
 table.items a:hover,
 table.items a:focus-visible,
@@ -329,13 +354,13 @@ table.items td.number {
   text-align: right;
 }
 table.items td.actions {
-  padding: 0 0 0 0.8rem;
   text-align: right;
 }
-table.items button {
+table.items .button,
+table.items button,
+table.items input[type=submit] {
   font-weight: normal;
-  margin-right: 0.25rem;
+  padding: 0.3em;
-  padding: 0.25rem;
 }
 table.items select:not(:hover),
 table.items button:not(:hover) {
@@ -347,7 +372,10 @@ table.items select:focus-visible {
   color: black;
 }
 
-.contextual {
+
-  float: right;
+.centered {
-  margin-top: 1rem;
+  margin: 0 auto;
+}
+.unwrappable {
+  white-space: nowrap;
 }

app/helpers/application_helper.rb

@@ -54,14 +54,6 @@ module ApplicationHelper
     form_for(record, **options, &-> (f) { f.table_form_for(&block) })
   end
 
-  def image_button_to(name, image = nil, options = nil, html_options = {})
-    image_element_to(:button, name, image, options, html_options)
-  end
-
-  def image_link_to(name, image = nil, options = nil, html_options = {})
-    image_element_to(:link, name, image, options, html_options)
-  end
-
   def svg_tag(source, options = {})
     content_tag :svg, options do
       tag.use href: image_path(source + ".svg") + "#icon"
@@ -69,30 +61,47 @@ module ApplicationHelper
   end
 
   def navigation_menu
-    menu_items = {right: [
+    menu_items = [
+      #[".test", "weight-kilogram", units_path, :restricted],
+      [".units", "weight-kilogram", units_path, :restricted, 'right'],
       [".users", "account-multiple-outline", users_path, :admin],
-      [".units", "weight-kilogram", units_path, :restricted],
+    ]
-    ]}
 
-    menu_items.map do |alignment, items|
+    menu_items.map do |label, image, path, status, css_class|
-      content_tag :div, class: alignment do
-        items.map do |label, image, path, status|
       if current_user.at_least(status)
-            image_link_to t(label), image, path, class: "tab", current: :active
+        image_tab_to t(label), image, path, class: "tab #{css_class}", current: :active
       end
     end.join.html_safe
   end
-    end.join.html_safe
+
+  def image_button_to(name, image = nil, options = nil, html_options = {})
+    html_options[:class] = class_names(html_options[:class], 'button')
+    image_element_to(:button, name, image, options, html_options)
   end
 
+  def image_link_to(name, image = nil, options = nil, html_options = {})
+    html_options[:class] = class_names(html_options[:class], 'button')
+    image_element_to(:link, name, image, options, html_options)
+  end
+
+  def image_tab_to(name, image = nil, options = nil, html_options = {})
+    image_element_to(:link, name, image, options, html_options)
+  end
+
+
   private
 
   def image_element_to(type, name, image = nil, options = nil, html_options = {})
-    current = (url_for(options) == request.path) && html_options.delete(:current)
+    current = html_options.delete(:current)
-    return "" if current == :hide
+    current = nil unless url_for(options) == request.path
+    return '' if current == :hide
 
     name = svg_tag("pictograms/#{image}") + name if image
-    html_options[:class] = class_names(html_options[:class], "button", active: current == :active)
+    html_options[:class] = class_names(
+      html_options[:class],
+      active: current == :active,
+      dangerous: html_options[:method] == :delete
+    )
     if html_options[:onclick]&.is_a? Hash
       html_options[:onclick] = "return confirm('#{html_options[:onclick][:confirm]}');"
     end

app/views/layouts/application.html.erb

@@ -11,23 +11,24 @@
   </head>
 
   <body>
-    <div class="app-menu">
+    <header class="header">
       <% if user_signed_in? %>
+        <%= image_link_to current_user.email, "account-wrench-outline",
+          edit_user_registration_path, current: :hide %>
         <% if current_user_disguised? %>
           <%= image_button_to t(".revert"), "incognito-off", revert_users_path %>
         <% else %>
           <%= image_button_to t(".sign_out"), "logout", destroy_user_session_path,
             method: :delete %>
         <% end %>
-        <%= image_link_to current_user.email, "account-wrench-outline",
-          edit_user_registration_path, current: :hide %>
       <% else %>
+        <%= image_link_to t(:sign_in), "login", new_user_session_path, current: :hide %>
         <%= image_link_to t(:register), "account-plus-outline", new_user_registration_path,
           current: :hide %>
-        <%= image_link_to t(:sign_in), "login", new_user_session_path, current: :hide %>
       <% end %>
-    </div>
+    </header>
 
+    <!--
     <div class="flashes">
       <% flash.each do |entry, message| %>
         <div class="flash <%= entry %>">
@@ -36,11 +37,12 @@
         </div>
       <% end %>
       </div>
+    -->
 
     <%# Allow overwriting/clearing navigation menu for some views %>
-    <div class="nav-menu">
+    <nav class="navigation">
       <%= content_for(:navigation) || (navigation_menu if user_signed_in?) %>
-    </div>
+    </nav>
 
     <%= yield %>
   </body>

app/views/units/index.html.erb

@@ -1,10 +1,12 @@
-<div class="contextual">
+<div class="rightside">
   <% if current_user.at_least(:active) %>
     <%= image_link_to t(".add_unit"), "plus-outline", new_unit_path %>
   <% end %>
 </div>
 
-<table class="items" id="units">
+<%#= turbo_frame_tag 'unit_form' %>
+
+<table class="main items" id="units">
   <thead>
     <tr>
       <th><%= User.human_attribute_name(:symbol).capitalize %></th>
@@ -18,8 +20,9 @@
   <tbody>
     <% Unit.each_with_level(@units) do |unit, level| %>
       <tr>
-        <td <%= "style=padding-left:0.5rem;" if level > 0 %>>
+        <td>
-          <%= link_to unit.symbol, edit_unit_path(unit) %>
+          <%= link_to unit.symbol, edit_unit_path(unit),
+            {style: level > 0 ? 'padding-left:0.6em;': ''}  %>
         </td>
         <td><%= unit.name %></td>
         <td class="number"><%= scientifize(unit.multiplier) unless unit.multiplier == 1 %></td>

app/views/users/index.html.erb

@@ -1,10 +1,10 @@
-<table class="items" id="users">
+<table class="main items" id="users">
   <thead>
     <tr>
       <th><%= User.human_attribute_name(:email).capitalize %></th>
       <th><%= User.human_attribute_name(:status).capitalize %></th>
       <th><%= User.human_attribute_name(:confirmed_at).capitalize %></th>
-      <th><%= User.human_attribute_name(:created_at).capitalize %> <sup>UTC</sup></th>
+      <th><%= User.human_attribute_name(:created_at).capitalize %>&nbsp;<sup>UTC</sup></th>
       <th><%= t :actions %></th>
     </tr>
   </thead>

app/views/users/registrations/edit.html.erb

@@ -1,11 +1,11 @@
 <% content_for :navigation, flush: true do %>
   <div class="left">
-    <%= image_link_to t(:back), "arrow-left-bold-outline",
+    <%= image_link_to t(:back), 'arrow-left-bold-outline',
       request.referer.present? ? :back : root_url %>
   </div>
   <div class="right">
     <%= image_button_to t(".delete"), "account-remove-outline", user_registration_path,
-      class: "dangerous", method: :delete, onclick: {confirm: t(".confirm_delete")} %>
+      method: :delete, onclick: {confirm: t(".confirm_delete")} %>
   </div>
 <% end %>
 

app/views/users/sessions/new.html.erb

@@ -10,4 +10,4 @@
 <% end %>
 
 <%= content_tag :p, t(:or), style: "text-align: center;" %>
-<%= image_link_to t(:recover_password), "lock-reset", new_user_password_path, class: "centered" %>
+<%= image_link_to t(:recover_password), 'lock-reset', new_user_password_path, class: 'centered' %>