Use Flexbox instead of Bootstrap’s grid for languages list

sas1ni69 · May 21, 2017 · a5d9955 · a5d9955
1 parent ffd1ad6
commit a5d9955
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 24 deletions.
diff --git a/app/views/languages/index.erb b/app/views/languages/index.erb
@@ -3,34 +3,28 @@
     <section class="page-header">
       <h1>Languages</h1>
     </section>
-    <% active.each_slice(6) do |tracks| %>
-      <div class="row">
-        <% tracks.each do |t| %>
-          <%= erb :'languages/_block', locals: { track: t } %>
-        <% end %>
-      </div>
-    <% end %>
+    <div class="languages-list">
+      <% active.each do |t| %>
+        <%= erb :'languages/_block', locals: { track: t } %>
+      <% end %>
+    </div>
 
     <section class="page-header">
       <h3>Upcoming</h3>
     </section>
-    <% upcoming.each_slice(6) do |tracks| %>
-      <div class="row">
-        <% tracks.each do |t| %>
-          <%= erb :'languages/_block', locals: { track: t } %>
-        <% end %>
-      </div>
-    <% end %>
+    <div class="languages-list">
+      <% upcoming.each do |t| %>
+        <%= erb :'languages/_block', locals: { track: t } %>
+      <% end %>
+    </div>
 
     <section class="page-header">
       <h3>Planned</h3>
     </section>
-    <% planned.each_slice(6) do |tracks| %>
-      <div class="row">
-        <% tracks.each do |t| %>
-          <%= erb :'languages/_block', locals: { track: t } %>
-        <% end %>
-      </div>
-    <% end %>
+    <div class="languages-list">
+      <% planned.each do |t| %>
+        <%= erb :'languages/_block', locals: { track: t } %>
+      <% end %>
+    </div>
   </div>
 </div>
diff --git a/public/sass/base/components/languages.scss b/public/sass/base/components/languages.scss
@@ -1,9 +1,20 @@
+@import "compass/css3/flexbox";
 @import '../mixins/track_link';
 
-#languages, #contribute{
+#contribute{
   .row{
-    display: flex;
-    flex-wrap: wrap;
+    @include display-flex();
+    @include flex-wrap(wrap);
+  }
+  @include track_link;
+}
+
+#languages{
+  .languages-list{
+    @include display-flex();
+    @include flex-wrap(wrap);
+    margin-left: -15px;
+    margin-right: -15px;
   }
   @include track_link;
 }