Divide country list into columns

vinc · Aug 26, 2023 · 9256ad5 · 9256ad5
1 parent 59b63a6
commit 9256ad5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
@@ -10,3 +10,15 @@ $link-hover-decoration: underline;
 .container {
   max-width: 45rem;
 }
+
+ul.columns {
+  column-count: 1;
+
+  @include media-breakpoint-up(sm) {
+    column-count: 2;
+  }
+
+  @include media-breakpoint-up(lg) {
+    column-count: 3;
+  }
+}
diff --git a/app/views/electricity/emissions/index.html.erb b/app/views/electricity/emissions/index.html.erb
@@ -42,7 +42,7 @@
     </p>
   <% else %>
     <h3>Electricity emissions</h3>
-    <ul>
+    <ul class="columns">
       <% @countries.each do |country| %>
         <li><%= link_to country.name, "/electricity/emissions/#{country.code}" %></li>
       <% end %>

diff --git a/app/views/electricity/generation/index.html.erb b/app/views/electricity/generation/index.html.erb
@@ -39,7 +39,7 @@
     </p>
   <% else %>
     <h3>Electricity generation</h3>
-    <ul>
+    <ul class="columns">
       <% @countries.each do |country| %>
         <li><%= link_to country.name, "/electricity/generation/#{country.code}" %></li>
       <% end %>