From d6b3fe3f60296b8264cc2b2b47a50c81ed71d5ef Mon Sep 17 00:00:00 2001
From: cryptogopher <git6453hub@michalczyk.pro>
Date: Sat, 21 Dec 2019 17:21:47 +0100
Subject: [PATCH] Simplified display of readout extended row

---
 app/views/measurements/_readouts.html.erb | 29 ++++++++--------------
 assets/stylesheets/body_tracking.css      | 30 +++++++++++++----------
 2 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/app/views/measurements/_readouts.html.erb b/app/views/measurements/_readouts.html.erb
index 561351e..0185ae8 100644
--- a/app/views/measurements/_readouts.html.erb
+++ b/app/views/measurements/_readouts.html.erb
@@ -27,14 +27,11 @@
           <td class="date" style="cursor: pointer;" onclick="$(this).closest('tr').prev('tr.primary').toggle(); $(this).closest('tr').prev('tr.primary').nextUntil('tr.primary', 'tr').toggle(); return false;">
             <span class="icon icon-bullet-closed"><%= format_datetime(m) %></span>
           </td>
-          <% @requested_r[index].each do |q_name, *| %>
-            <td class="primary quantity"><%= q_name %></td>
-          <% end %>
-        </tr>
-        <tr class="<%= row_class %>" style="display:none">
-          <td class="space"></td>
-          <% @requested_r[index].each do |*, value| %>
-            <td class="primary value"><%= format_value(value) %></td>
+          <% @requested_r[index].each do |q_name, value| %>
+            <td class="primary">
+              <p class="quantity"><%= q_name %></p>
+              <p class="value"><%= format_value(value) %></p>
+            </td>
           <% end %>
         </tr>
 
@@ -42,17 +39,11 @@
         <% @extra_r[index].each_slice(@quantities.length).with_index do |values| %>
           <tr class="extra <%= row_class %>" style="display:none">
             <td class="space"></td>
-            <% values.each do |q_name, *| %>
-              <td class="extra quantity"><%= q_name %></td>
-            <% end %>
-            <% if @quantities.length > values.length %>
-              <td class="space" colspan="<%= @quantities.length-values.length %>"></td>
-            <% end %>
-          </tr>
-          <tr class="extra <%= row_class %>" style="display:none">
-            <td class="space"></td>
-            <% values.each do |*, value| %>
-              <td class="extra value"><%= format_value(value) %></td>
+            <% values.each do |q_name, value| %>
+              <td class="extra">
+                <p class="quantity"><%= q_name %></p>
+                <p class="value"><%= format_value(value) %></p>
+              </td>
             <% end %>
             <% if @quantities.length > values.length %>
               <td class="space" colspan="<%= @quantities.length-values.length %>"></td>
diff --git a/assets/stylesheets/body_tracking.css b/assets/stylesheets/body_tracking.css
index 68f5518..3388168 100644
--- a/assets/stylesheets/body_tracking.css
+++ b/assets/stylesheets/body_tracking.css
@@ -1,20 +1,20 @@
 table.list tr.quantity.primary td.name {font-weight: bold;}
-table.nutrients.list td.name,
-table.nutrients.list td.quantity,
-table.readouts.list td.date,
-table.readouts.list td.quantity {text-align: left; border-bottom: none;}
-table.nutrients.list td.space,
-table.readouts.list td.space {border-top: none; border-bottom: none;}
-table.nutrients.list td.value,
-table.readouts.list td.value {border-top: none;}
+
 table.list tr.ingredient.hidden {opacity: 0.4}
+
+table.list .date,
+table.list .name,
+table.list .quantity {text-align: left;}
+
+table.list .action,
+table.list .value {text-align: right;}
+
+table.list .space {border-top: none; border-bottom: none;}
+
+table.list th,
 table.list td.action,
 table.list td.date,
-table.list td.name {white-space: nowrap;}
-table.list td.action,
-table.list td.value {text-align: right;}
-table.nutrients.list th,
-table.nutrients.list td.name,
+table.list td.name,
 table.list td.quantity,
 table.list td.value {
   overflow: hidden;
@@ -22,18 +22,22 @@ table.list td.value {
   white-space: nowrap;
   max-width: 1px;
 }
+
 table.list td.form {
   padding-right: 2px;
   text-align: left;
 }
+
 fieldset#filters table.filter td {padding-left: 8px;}
 
+
 .icon-move-left { background-image: url(../images/1leftarrow.png); }
 .icon-move-right { background-image: url(../images/1rightarrow.png); }
 .icon-eye { background-image: url(../images/eye.png); }
 .icon-bullet-open { background-image: url(../../../images/bullet_toggle_minus.png); }
 .icon-bullet-closed { background-image: url(../../../images/bullet_toggle_plus.png); }
 
+
 input[type=number] {
   -moz-appearance:textfield;
   text-align: right;