Using flex we don't have to rely on JavaScript to equalize the item. Besides, we've had problems with JavaScript in the past. We're also adjusting the width of the elements; previously, even though we defined a width of 16.666% for each element, only five elements would be on the same row. It happenend because these elements were styled with inline-block and the generated HTML contained a newline character between <li> tags, meaning a space character was introduced between elements. The width of the mentioned space character wasn't being taken into account when calculating the width. Using flex, there's no space character between items and we have to define the margin between them. We're taking this margin into account when calculating the width.
22 lines
776 B
Plaintext
22 lines
776 B
Plaintext
<div id="groups_and_headings" class="groups-and-headings">
|
|
<% budget.groups.each do |group| %>
|
|
<h2 id="<%= group.name.parameterize %>"><%= group.name %></h2>
|
|
<ul class="headings-list">
|
|
<% group.headings.sort_by_name.each do |heading| %>
|
|
<li class="heading">
|
|
<% unless budget.informing? || budget.finished? %>
|
|
<%= link_to budget_investments_path(budget.id,
|
|
heading_id: heading.id) do %>
|
|
<%= heading_name_and_price_html(heading) %>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="heading-name">
|
|
<%= heading_name_and_price_html(heading) %>
|
|
</div>
|
|
<% end %>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
<% end %>
|
|
</div>
|