Merge 6ecc5fd into 4538beb

liqd · Jul 25, 2019 · 425d3ef · 425d3ef
2 parents 4538beb + 6ecc5fd
commit 425d3ef
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 60 deletions.
diff --git a/apps/cms/pages/templates/a4_candy_cms_pages/blocks/col_background_cta_block.html b/apps/cms/pages/templates/a4_candy_cms_pages/blocks/col_background_cta_block.html
@@ -6,7 +6,7 @@
             {{ column.body }}
             {% if column.link %}
             <div class="block-col_cta-content">
-                <a href="{{ column.link }}" class="btn btn--full btn--transparent block-bg_btn-{{ forloop.counter }}">{{ column.link_text }}</a>
+                <a href="{{ column.link }}" class="btn btn--full btn--transparent block-bg_btn-{{ forloop.counter }} mt-3">{{ column.link_text }}</a>
             </div>
         {% endif %}
         </div>

diff --git a/apps/cms/pages/templates/a4_candy_cms_pages/blocks/col_cta_block.html b/apps/cms/pages/templates/a4_candy_cms_pages/blocks/col_cta_block.html
@@ -1,6 +1,6 @@
 {% load wagtailcore_tags %}
 
-<div class="block row mb-3 mb-md-5">
+<div class="block block-row-{{ value.columns_count }} row mb-0">
     {% for column in value.columns %}
         <div class="block-col-{{ value.columns_count }}">
             {% if column.body %}

diff --git a/apps/cms/pages/templates/a4_candy_cms_pages/blocks/col_img_cta_block.html b/apps/cms/pages/templates/a4_candy_cms_pages/blocks/col_img_cta_block.html
@@ -4,7 +4,8 @@
     {% for column in value.columns %}
         <div class="block-img-col-{{ forloop.counter }}">
             {% if column.image %}
-            {% image column.image width-500 %}
+            {% image column.image width-770 as image %}
+            <img src="{{ image.url }}" alt="{{ image.alt }}" class="block-img-col__image" />
             {% endif %}
             {{ column.body }}
             {% if column.link %}

diff --git a/apps/cms/pages/templates/a4_candy_cms_pages/home_page.html b/apps/cms/pages/templates/a4_candy_cms_pages/home_page.html
@@ -6,7 +6,7 @@
         <div class="hompage__wrapper p-3">
         <div class="row homepage-header">
             <div class="col-lg-6">
-                <h1 class="homepage-header__teaser">{{ page.teaser|richtext }}</h1>
+                <h1 class="homepage-header__teaser ml-md-4">{{ page.teaser|richtext }}</h1>
             </div>
             <div class="col-lg-6 homepage-header__image-wrapper">
                 {% image page.image width-770 as image %}

diff --git a/apps/contrib/templates/a4_candy_contrib/component_library.html b/apps/contrib/templates/a4_candy_contrib/component_library.html
@@ -224,6 +224,8 @@ <h4>Lists</h4>
                             <li>Body-background-darker<span class="background-darker colour-block"></span></li>
                             <li>Background-secondary<span class="bg-secondary colour-block"></span></li>
                             <li>Background-tertiary<span class="bg-tertiary colour-block"></span></li>
+                            <li>Gray<span class="gray colour-block"></span></li>
+                            <li>Gray-two<span class="gray-two colour-block"></span></li>
                             <li>Gray-light<span class="gray-light colour-block"></span></li>
                             <li>Gray-lighter<span class="gray-lighter colour-block"></span></li>
                             <li>Gray-lightest<span class="gray-lightest colour-block"></span></li>

diff --git a/liqd_product/assets/scss/_variables.scss b/liqd_product/assets/scss/_variables.scss
@@ -13,9 +13,6 @@ $brand-danger: #d0011b !default; // $plattform-danger
 $platform-primary: #46caad !default;
 $platform-danger: #d0011b !default;
 
-$gray: #464a4c !default;
-$gray-lighter: #636c72 !default;
-
 $body-bg: #fff !default;
 $body-bg-darker: #f7f7f7 !default;
 
@@ -25,6 +22,12 @@ $text-color-gray: #666 !default;
 $text-secondary-color: #666 !default;
 $overlay: rgba(#000, 0.5) !default;
 
+$gray: #464a4c !default;
+$gray-two: #636c72 !default;
+$gray-light: #4d4d4d;
+$gray-lighter: $text-secondary-color;
+$gray-lightest: #d8d8d8;
+
 $print-black: #000 !default;
 $print-link: #005cb4 !default;
 
@@ -36,10 +39,6 @@ $bg-tertiary: $brand-primary-tint !default;
 $bg-secondary: mix($bg-tertiary, $body-bg, 50%) !default;
 $bg-light: #f7f7f7;
 
-$gray-light: #4d4d4d;
-$gray-lighter: $text-secondary-color;
-$gray-lightest: #d8d8d8;
-
 $demi-bold: 600;
 $headings-font-weight: $demi-bold !default;
 

diff --git a/liqd_product/assets/scss/components/_blocks.scss b/liqd_product/assets/scss/components/_blocks.scss
@@ -1,29 +1,66 @@
 $block-padding: 2.5*$padding;
 $block-padding-md: 5*$padding;
 
+//non block specific styles
 .block-col-6 {
     @extend .col-sm-4;
     @extend .col-md-2;
 }
 
 .block-col-4 {
-    @extend .col-sm-3;
+    @extend .col-md-3;
 }
 
 .block-col-3 {
     @extend .col-md-4;
+    padding: $block-padding;
 }
 
 .block-col-2 {
-    @extend .col-sm-6;
+    @extend .col-md-6;
 }
 
 .block-col-1 {
     @extend .col-12;
     text-align: center;
 }
 
-//cta with content
+.block-col_cta-btn {
+    padding: $padding;
+
+    @media screen and (min-width: $breakpoint-xs) {
+        padding-bottom: $block-padding;
+    }
+}
+
+//single col cta styling
+.block-row-1 {
+    background-color: $body-bg;
+
+    @media screen and (min-width: $breakpoint-xs) {
+        padding-top: $block-padding;
+    }
+
+    @media screen and (min-width: $breakpoint-md) {
+        padding-top: $block-padding-md;
+    }
+}
+
+//three col cta styling
+.block-row-3 {
+    padding: $padding;
+    background-color: $body-bg;
+
+    @media screen and (min-width: $breakpoint-xs) {
+        padding: $padding $block-padding $block-padding $block-padding;
+    }
+
+    @media screen and (min-width: $breakpoint-md) {
+        padding: $padding $block-padding-md $block-padding-md $block-padding-md;
+    }
+}
+
+//multi col cta with content styling
 .block-columns_cta {
     text-align: center;
 
@@ -42,46 +79,35 @@ $block-padding-md: 5*$padding;
     }
 }
 
-.block-col_cta,
-.block-image_cta_block {
-    background-color: $body-bg-darker;
-}
-
 //image/list cta block
 .block-img-col-1 {
-    @extend .col-sm-7;
+    @extend .col-md-7;
 }
 
 .block-img-col-2 {
-    @extend .col-sm-5;
-
-    .rich-text {
-        padding-bottom: 0;
-    }
+    @extend .col-md-5;
 
     .rich-text,
     .block-col_cta-content {
-        padding: 0 $block-padding 0 0;
+        padding: 0 0 0 2*$r-spacer;
 
         @media screen and (min-width: $breakpoint-md) {
-            padding: 0 $block-padding-md 0 0;
+            padding: 0 $block-padding-md 0 2*$r-spacer;
         }
     }
 }
 
+.block-img-col__image {
+    max-height: 400px;
+    width: auto;
+    position: relative;
+    right: -32px;
+    margin-top: $r-spacer;
+}
+
 .block-image_cta_block {
     text-align: left;
 
-    //block height contained in whole page
-    @media screen and (min-width: $breakpoint-md) {
-        min-height: 100vh;
-    }
-
-    img {
-        max-height: 400px;
-        width: auto;
-    }
-
     //list styling
     ul {
         list-style: none;
@@ -90,7 +116,7 @@ $block-padding-md: 5*$padding;
 
     li:before {
         margin-right: 0.5*$spacer;
-        color: $gray-lighter;
+        color: $gray-lightest;
         font-family: "Font Awesome 5 Free", sans-serif;
         font-weight: 900;
         content: '\f111';
@@ -108,6 +134,7 @@ $block-padding-md: 5*$padding;
     }
 }
 
+//coloured background block
 .block-background_cta_block .block > :first-child {
     background-color: $brand-secondary;
 }
@@ -128,19 +155,17 @@ $block-padding-md: 5*$padding;
     margin-right: -17px;
 
     .row {
+        display: flex;
         text-align: center;
         justify-content: center;
-
-        @media screen and (min-width: $breakpoint-md) {
-            min-height: 70vh;
-        }
     }
 
     .block-col-2 {
         justify-content: space-between;
         display: flex;
         flex-direction: column;
         padding: $padding;
+        padding-bottom: $block-padding;
 
         @media screen and (min-width: $breakpoint-xs) {
             padding: $block-padding;
@@ -152,6 +177,7 @@ $block-padding-md: 5*$padding;
     }
 }
 
+//old block styling, still used in activity block
 .block--bordered {
     padding: 1em;
     border: 1px solid $border-color;
@@ -162,6 +188,7 @@ $block-padding-md: 5*$padding;
     }
 }
 
+//some old some current general styling
 .block {
     @include clearfix;
     margin-bottom: 2.8em;
@@ -184,7 +211,7 @@ $block-padding-md: 5*$padding;
         position: relative;
     }
 
-    //border on chaüter headings
+    //border on section headings
     h2:after {
         content: "";
         position: absolute;
@@ -193,25 +220,18 @@ $block-padding-md: 5*$padding;
         width: 50px;
         border-bottom: solid 4px $brand-secondary;
     }
+}
 
-    .block-img-col-1,
-    .block-col_cta {
-        padding: $padding;
-
-        @media screen and (min-width: $breakpoint-xs) {
-            padding: $block-padding;
-        }
+//responsive padding for image, 2 col cta and whole
+.block-img-col-1,
+.block-row-2 {
+    padding: $padding;
 
-        @media screen and (min-width: $breakpoint-md) {
-            padding: $block-padding-md;
-        }
+    @media screen and (min-width: $breakpoint-xs) {
+        padding: $block-padding;
     }
 
-    .block-col_cta-btn {
-        padding: $padding;
-
-        @media screen and (min-width: $breakpoint-xs) {
-            padding-bottom: $block-padding;
-        }
+    @media screen and (min-width: $breakpoint-md) {
+        padding: $block-padding-md;
     }
 }
diff --git a/liqd_product/assets/scss/components/_style_guide.scss b/liqd_product/assets/scss/components/_style_guide.scss
@@ -55,8 +55,16 @@
     background-color: $bg-tertiary;
 }
 
+.gray.colour-block {
+    background-color: $gray;
+}
+
+.gray-two.colour-block {
+    background-color: $gray-two;
+}
+
 .gray-light.colour-block {
-    background-color: $gray-light;
+    background-color: $gray-two;
 }
 
 .gray-lighter.colour-block {