1
0

Extra nutrients are displayed in table cells

Fixed column widths with content ellipsizing
This commit is contained in:
cryptogopher 2019-10-31 15:28:32 +01:00
parent 6f9e8926d7
commit 2f0b34d3fe
3 changed files with 49 additions and 27 deletions

View File

@ -19,21 +19,20 @@ class IngredientsController < ApplicationController
@ingredient.nutrients.new(ingredient: @ingredient)
ingredients = @project.ingredients.includes(:ref_unit, nutrients: [:quantity, :unit])
@header = @project.quantities.where(primary: true)
@nutrients = {}
@descriptions = {}
@primary_quantities = @project.quantities.where(primary: true)
@primary_nutrients = {}
@extra_nutrients = {}
ingredients.each do |i|
@nutrients[i] = {}
@descriptions[i] = []
@primary_nutrients[i] = {}
@extra_nutrients[i] = {}
i.nutrients.sort_by { |n| n.quantity.lft }.each do |n|
if @header.include?(n.quantity)
@nutrients[i][n.quantity_id] = "#{n.amount} [#{n.unit.shortname}]"
if @primary_quantities.include?(n.quantity)
@primary_nutrients[i][n.quantity_id] = "#{n.amount} [#{n.unit.shortname}]"
else
@descriptions[i] << "#{n.quantity.name}: #{n.amount} [#{n.unit.shortname}]"
@extra_nutrients[i][n.quantity.name] = "#{n.amount} [#{n.unit.shortname}]"
end
end
end
@descriptions.each { |i, v| @descriptions[i] = v.join(", ") }
end
def create

View File

@ -13,38 +13,54 @@
<%= render :partial => 'ingredients/form' %>
<h2><%= t ".heading" %></h2>
<% if @nutrients.any? %>
<% if @primary_nutrients.any? %>
<table class="nutrients list">
<thead>
<tr>
<th><%= l(:field_name) %></th>
<% @header.each do |q| %>
<th><%= q.name %></th>
<th style="width:30%"><%= l(:field_name) %></th>
<% @primary_quantities.each do |q| %>
<th style="width:8%"><%= q.name %></th>
<% end %>
</tr>
</thead>
<tbody>
<% @nutrients.each do |i, values| %>
<tr id="ingredient-<%= i.id %>" class="ingredient <%= 'hidden' if i.hidden %>">
<% @primary_nutrients.each do |i, values| %>
<% row_class = "ingredient #{'hidden' if i.hidden}" %>
<tr id="ingredient-<%= i.id %>" class="primary <%= row_class %>">
<td class="name">
<%= link_to '', '#', {
onclick: "$(this).closest('tr').next('tr').toggle(); $(this).toggleClass('icon-bullet-closed'); $(this).toggleClass('icon-bullet-open'); return false;",
onclick: "$(this).closest('tr').nextUntil('tr.primary', 'tr').toggle(); $(this).toggleClass('icon-bullet-closed'); $(this).toggleClass('icon-bullet-open'); return false;",
class: "icon icon-bullet-closed"
} %>
<%= i.name %>
</td>
<% @header.each do |q| %>
<td class="value"><%= values[q.id] || '-' %></td>
<% @primary_quantities.each do |q| %>
<td class="primary value">
<%= values[q.id] || '-' %>
</td>
<% end %>
</tr>
<tr id="ingredient-desc-<%= i.id %>" class="ingredient <%= 'hidden' if i.hidden %>"
style="display:none">
<td></td>
<td colspan="<%= @header.length %>" class="description">
<%= @descriptions[i] %>
</td>
</tr>
<tr style="display:none"></tr>
<% @extra_nutrients[i].keys.each_slice(@primary_quantities.length) do |names| %>
<tr class="extra <%= row_class %>" style="display:none">
<td rowspan="2"></td>
<% names.each do |name| %>
<td class="extra name">
<%= name %>
</td>
<% end %>
<% for index in names.length...@primary_quantities.length do %>
<td rowspan="2"></td>
<% end %>
</tr>
<tr class="extra <%= row_class %>" style="display:none">
<% names.each do |name| %>
<% title = %>
<td class="extra value">
<%= @extra_nutrients[i][name] %>
</td>
<% end %>
</tr>
<% end %>
<% end %>
</tbody>
</table>

View File

@ -2,8 +2,15 @@ table.list tr.quantity.primary td.name {font-weight: bold;}
table.list tr.ingredient.hidden {opacity: 0.4}
table.list td.action,
table.list td.value {text-align: right;}
table.list th,
table.list td.action,
table.list td.name {white-space: nowrap;}
table.list td.name,
table.list td.value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 1px;
}
.icon-move-left { background-image: url(../images/1leftarrow.png); }
.icon-move-right { background-image: url(../images/1rightarrow.png); }