assets/layout: remove custom tile code and replace with bootstrap flex

and remove tile class from newsletter form and replace with bootstrap form classes
liqd · Sep 30, 2019 · 63f074a · 63f074a
1 parent 49f08cb
commit 63f074a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 27 deletions.
diff --git a/apps/newsletters/templates/a4_candy_newsletters/restricted_newsletter_dashboard_form.html b/apps/newsletters/templates/a4_candy_newsletters/restricted_newsletter_dashboard_form.html
@@ -11,9 +11,13 @@ <h1>{% trans "Create Newsletter" %}</h1>
         {% csrf_token %}
         {% include 'a4_candy_contrib/includes/form_field.html' with field=form.project %}
 
-        <div class="l-tiles-2">
+        <div class="row">
+            <div class="col-sm">
             {% include 'a4_candy_contrib/includes/form_field.html' with field=form.sender_name %}
+            </div>
+            <div class="col-sm">
             {% include 'a4_candy_contrib/includes/form_field.html' with field=form.sender %}
+            </div>
         </div>
         {% include 'a4_candy_contrib/includes/form_field.html' with field=form.subject %}
         {% include 'a4_candy_contrib/includes/form_field.html' with field=form.body %}

diff --git a/liqd_product/assets/scss/_layout.scss b/liqd_product/assets/scss/_layout.scss
@@ -1,24 +1,3 @@
-// should be used with ul/ol
-@mixin grid-tiles($n, $settings: ()) {
-    @include clearfix;
-
-    > * {
-        @include grid-same-width($n, $settings);
-    }
-
-    @supports (display: grid) {
-        display: grid;
-        grid-column-gap: _grid-get('gutter', $settings);
-        grid-template-columns: repeat($n, 1fr);
-
-        > * {
-            margin-left: 0 !important;
-            margin-right: 0 !important;
-            width: auto !important;
-        }
-    }
-}
-
 .l-wrapper {
     @extend .container;
     position: relative;
@@ -87,28 +66,42 @@
 .l-tiles-2,
 .l-tiles-3,
 .l-tiles-4 {
-    margin: 0;
+    margin: -0.5*$r-spacer;
     padding: 0;
     list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.tile {
+    margin: 0.5*$r-spacer;
 }
 
 @media (min-width: $breakpoint) {
     .l-tiles-2 {
-        @include grid-tiles(2);
+        .tile {
+            width: calc(100% * (1 / 2) - 16px - 1px);
+        }
     }
 
     .l-tiles-3 {
-        @include grid-tiles(3);
+        .tile {
+            width: calc(100% * (1 / 3) - 16px - 1px);
+        }
     }
 
     .l-tiles-4 {
-        @include grid-tiles(2);
+        .tile {
+            width: calc(100% * (1 / 2) - 16px - 1px);
+        }
     }
 }
 
 @media (min-width: $breakpoint-md) {
     .l-tiles-4 {
-        @include grid-tiles(4);
+        .tile {
+            width: calc(100% * (1 / 4) - 16px - 1px);
+        }
     }
 }