Use Object picker for Key link

eea · Apr 7, 2020 · fdeb323 · fdeb323
1 parent fde4b7b
commit fdeb323
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 26 deletions.
diff --git a/src/components/Blocks/KeyFacts/KeyFactsView.jsx b/src/components/Blocks/KeyFacts/KeyFactsView.jsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import cx from 'classnames';
+import { Link } from 'react-router-dom';
 
 const View = ({ data }) => {
   const { message, message_link, message_link_text, lines } = data;
+  console.log('data', data);
   return (
     <div
       className={cx(
-        'block align keyfacts',
+        'block align keyfacts-block',
         {
           center: !Boolean(data.align),
         },
@@ -25,7 +27,9 @@ const View = ({ data }) => {
                 <>
                   <div className="headline">{message}</div>
                   {message_link && (
-                    <a href={message_link}>{message_link_text}</a>
+                    <Link className="ui primary button" to={message_link}>
+                      {message_link_text}
+                    </Link>
                   )}
                 </>
               ) : (

diff --git a/src/components/Blocks/KeyFacts/schema.jsx b/src/components/Blocks/KeyFacts/schema.jsx
@@ -33,11 +33,11 @@ const KeyFactsSchema = {
       id: 'default',
       title: 'Default',
       fields: [
-        'align',
-        'lines',
         'message',
         'message_link_text',
         'message_link',
+        'lines',
+        'align',
       ],
     },
   ],
@@ -63,7 +63,7 @@ const KeyFactsSchema = {
       title: 'Key message link text',
     },
     message_link: {
-      type: 'string',
+      widget: 'object_by_path',
       title: 'Key message link',
     },
   },

diff --git a/theme/themes/bise/extras/keyfacts.less b/theme/themes/bise/extras/keyfacts.less
@@ -1,4 +1,4 @@
-.keyfacts {
+.keyfacts-block {
   padding: 6.5em 0 4em 0;
 
   @media (max-width: 767px) {
@@ -10,42 +10,70 @@
   }
 
   .block-wrapper {
-    max-width: 1127px;
     display: flex;
+    max-width: 1127px;
+    max-height: 500px;
     margin: 0 auto !important;
 
     .facts-wrapper {
-      width: 67%;
+      display: flex;
+      width: 60%;
+      flex-direction: column;
+      flex-wrap: wrap;
+      padding: 4em 0 4em 2em;
       margin: 0.5em 0;
 
-      .upper {
-        margin: 0.2em 0;
-        color: @darkGreenColor;
-        font-size: 44px;
-        font-weight: 700;
-        line-height: 47px;
+      & :nth-child(3n) {
+        // the bottom fact
+        justify-content: flex-end;
+      }
 
-        @media (max-width: 1024px) {
-          font-size: 34px;
-        }
+      & :nth-child(3n+1) {
+        // the first fact
+        justify-content: flex-start;
+      }
 
-        @media (max-width: 550px) {
-          font-size: 28px;
-        }
+      & :nth-child(3n+2) {
+        // the middle fact
+        justify-content: center;
       }
 
-      .lower {
-        font-size: 22px;
+      .fact {
+        display: flex;
+        width: 50%;
+        flex-basis: 33%;
+        flex-direction: column;
+
+        .upper {
+          margin: 0 0 0.2em 0;
+          color: @darkGreenColor;
+          font-size: 44px;
+          font-weight: 700;
+          line-height: 47px;
+
+          @media (max-width: 1024px) {
+            font-size: 34px;
+          }
+
+          @media (max-width: 550px) {
+            font-size: 28px;
+          }
+        }
+
+        .lower {
+          font-size: 22px;
 
-        @media (max-width: 550px) {
-          font-size: 18px;
+          @media (max-width: 550px) {
+            font-size: 18px;
+          }
         }
       }
+
     }
 
     .title-wrapper {
-      width: 33%;
-      padding: 0.8em 4.5em 0.8em 0.8em;
+      width: 40%;
+      padding: 4em 4.5em 4em 0.8em;
 
       @media (max-width: 1024px) {
         padding-right: 2em;
@@ -101,7 +129,9 @@
         .headline {
           margin-bottom: 1em;
           color: @darkGreenColor;
+          font-family: @headerFont;
           font-size: 44px;
+          font-weight: 700;
           line-height: 47px;
 
           @media (max-width: 1024px) {