From f1b707f5490b1d8da376a1dd8e7f6838b704d335 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 11 Mar 2021 19:57:37 +0100
Subject: [PATCH] Simplify styling headings with the same height

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.
---
 .../budgets/groups_and_headings.scss          | 19 ++++++++++++++++++-
 .../groups_and_headings_component.html.erb    |  4 ++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss
index 44c36f108..1be85a2be 100644
--- a/app/assets/stylesheets/budgets/groups_and_headings.scss
+++ b/app/assets/stylesheets/budgets/groups_and_headings.scss
@@ -1,10 +1,27 @@
 .groups-and-headings {
+  $spacing: rem-calc(4);
+
+  .headings-list {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin-left: -$spacing;
+  }
 
   .heading {
     border: 1px solid $border;
     border-radius: rem-calc(3);
-    display: inline-block;
     margin-bottom: $line-height / 2;
+    margin-left: $spacing;
+    width: 100%;
+
+    @include breakpoint(medium) {
+      width: calc(100% / 3 - #{$spacing});
+    }
+
+    @include breakpoint(large) {
+      width: calc(100% / 6 - #{$spacing});
+    }
 
     a {
       display: block;
diff --git a/app/components/budgets/groups_and_headings_component.html.erb b/app/components/budgets/groups_and_headings_component.html.erb
index dfb997032..6c88b9850 100644
--- a/app/components/budgets/groups_and_headings_component.html.erb
+++ b/app/components/budgets/groups_and_headings_component.html.erb
@@ -1,9 +1,9 @@
 <div id="groups_and_headings" class="groups-and-headings">
   <% budget.groups.each do |group| %>
     <h2 id="<%= group.name.parameterize %>"><%= group.name %></h2>
-    <ul class="no-bullet" data-equalizer data-equalizer-on="medium">
+    <ul class="headings-list">
       <% group.headings.sort_by_name.each do |heading| %>
-        <li class="heading small-12 medium-4 large-2" data-equalizer-watch>
+        <li class="heading">
           <% unless budget.informing? || budget.finished? %>
             <%= link_to budget_investments_path(budget.id,
                                                 heading_id: heading.id) do %>