Rearranged Meals index columns

app/helpers/meals_helper.rb

@@ -5,9 +5,14 @@ module MealsHelper
     delete_link(meal_path(m), {remote: true, data: {}})
   end
 
-  def display_notes(m)
-    content_tag(:span, m.notes) +
-    link_to(l(:button_notes), edit_notes_meal_path(m),
-            {remote: true, class: "icon icon-wiki-page", style: "float: right"})
+  def adjustment_buttons(i)
+    {'- -' => -10, '-' => -1, '+' => 1, '++' => 10}.map do |text, value|
+      link_to text, adjust_ingredient_path(i, adjustment: value),
+        {remote: true, method: :post, class: "button #{value>0 ? 'green' : 'red'}"}
+    end.reduce(&:+)
+  end
+
+  def notes(m)
+    content_tag(:span, m.notes)
   end
 end

app/views/meals/_edit_notes_form.html.erb

@@ -3,11 +3,5 @@
   remote: true,
   html: {id: 'edit-meal-notes-form', name: 'edit-meal-notes-form'} do |f| %>
 
-  <%= f.text_field :notes, size: 40, required: false, label: '' %>
-  <%= link_to l(:button_save), '', class: 'icon icon-save',
-    onclick: "$(event.target).closest('form').submit(); return false;" %>
-  <%= link_to l(:button_cancel), '', class: 'icon icon-cancel',
-    onclick: "$(event.target).closest('form').remove();
-              $('td[id=notes-#{@meal.id}]').contents().show();
-              return false;" %>
+  <%= f.text_field :notes, required: false, label: '', style: "width: 100%;" %>
 <% end %>

app/views/meals/_index.html.erb

@@ -4,7 +4,7 @@
       <% @meals.group_by { |m| m.eaten_at ? m.eaten_at.to_date : Date.current }
         .sort_by {|k,v| k }.reverse.each do |date, meals| %>
         <tr id="day-<%= date.strftime('%Y%m%d') %>" class="date">
-          <td class="date" colspan="6">
+          <td class="date" colspan="4">
             <h3><%= date == Date.current ? 'Today' : date.strftime('%F') %></h3>
           </td>
         </tr>

app/views/meals/_show.html.erb

@@ -1,5 +1,5 @@
 <tr id="meal-<%= m.id %>" class="primary meal project idnt idnt-1 odd">
-  <td class="name unwrappable" style="width: 5%; border-right: none;">
+  <td class="name unwrappable">
     <b><%= "#{t '.label_meal'} ##{index+1}" %></b>
     <% if m.eaten_at %>
       <%= " at #{m.eaten_at.strftime('%R')}" %>
@@ -10,29 +10,37 @@
         {remote: true, method: :post, class: "icon icon-time"} %>
     <% end %>
   </td>
-  <td id="notes-<%= m.id %>" class="notes" style="text-align: left; border-left: none;"
-    colspan="4"><%= display_notes(m) %></td>
-  <td class="action" style="width: 5%;"><%= meal_links(m) %></td>
+  <td id="notes-links-<%= m.id %>" class="unwrappable"
+      style="text-align: left; border-right: none; width: 1%;">
+    <%= link_to l(:button_cancel), '', class: 'icon icon-cancel', style: 'display: none;',
+      onclick: "$(event.target).closest('tr').find('form').remove();
+                $('td[id=notes-#{m.id}]').contents().show();
+                $('td[id=notes-links-#{m.id}] a').toggle();
+                return false;" %>
+
+    <%= link_to l(:button_save), '', class: 'icon icon-save', style: 'display: none;',
+      onclick: "$(event.target).closest('tr').find('form').submit(); return false;" %>
+
+    <%= link_to l(:button_notes), edit_notes_meal_path(m), remote: true,
+      class: "icon icon-wiki-page" %>
+  </td>
+  <td id="notes-<%= m.id %>" class="notes unwrappable"
+      style="text-align: left; border-left: none;">
+    <%= notes(m) %>
+  </td>
+  <td class="action" style="width: 1%;"><%= meal_links(m) %></td>
 </tr>
 
 <% m.ingredients.each do |i| %>
   <tr id="ingredient-<%= i.id %>" class="ingredient project idnt idnt-2 buttonable">
-    <td class="name unwrappable" style="width: 5%;"><%= i.food.name %></td>
-    <td class="unwrappable" style="width: 1%;">
-      <% {'- -' => -10, '-' => -1, nil => 0, '+' => 1, '++' => 10}.map do |text, value| %>
-        <% if text %>
-          <%= link_to text, adjust_ingredient_path(i, adjustment: value),
-            {remote: true, method: :post, class: "button #{value>0 ? 'green' : 'red'}"} %>
-        <% else %>
-        </td>
-        <td class="amount unwrappable" style="width: 1%; text-align: right;">
-          <span><%= i.amount %></span>[<%= i.food.ref_unit.shortname %>]
-        </td>
-        <td class="unwrappable" style="width: 1%;">
-      <% end %>
-    <% end %>
+    <td class="name unwrappable" colspan="2"><%= i.food.name %></td>
+    <td class="amount unwrappable" style="text-align: right;">
+      <span><%= i.amount %></span>[<%= i.food.ref_unit.shortname %>]
+    </td>
+    <td class="unwrappable" style="width: 1%; text-align: right;">
+      <%# Moved to helper to avoid spaces between buttons %>
+      <%= adjustment_buttons(i) %>
     </td>
-    <td colspan="2"></td>
   </tr>
 <% end %>
 </tr>

app/views/meals/edit_notes.js.erb

@@ -1,4 +1,5 @@
-var box = $('td[id=notes-<%= @meal.id %>]');
-box.contents().hide();
-box.append('<%= j render partial: 'meals/edit_notes_form' %>');
-box.find('input[type=text]').focus();
+var notes = $('td[id=notes-<%= @meal.id %>]');
+notes.contents().hide();
+notes.append('<%= j render partial: 'meals/edit_notes_form' %>');
+notes.find('input[type=text]').focus();
+$('td[id=notes-links-<%= @meal.id %>] a').toggle();

app/views/meals/update_notes.js.erb

@@ -1,2 +1,2 @@
-var box = $('td[id=notes-<%= @meal.id %>]');
-box.html('<%= j display_notes(@meal) %>');
+$('td[id=notes-<%= @meal.id %>]').html('<%= j notes(@meal) %>');
+$('td[id=notes-links-<%= @meal.id %>] a').toggle();