From 5a5304dd4b687202b540e2fbbf777fa4049d1273 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan.tuomi@eficode.com>
Date: Mon, 19 Nov 2018 14:52:42 +0200
Subject: [PATCH] Give some css love to card images

---
 src/components/Card/Card.scss         | 24 +++++++++++++++++++-----
 src/components/Card/Card.tsx          |  4 +++-
 src/components/PageLink/PageLink.scss |  2 +-
 src/pages/FrontPage/FrontPage.scss    | 10 ----------
 src/pages/FrontPage/FrontPage.tsx     | 16 ++++++++--------
 5 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
index 978a3e1..2af5a82 100644
--- a/src/components/Card/Card.scss
+++ b/src/components/Card/Card.scss
@@ -7,18 +7,16 @@
   margin: 1rem 1rem;
   display: flex;
   flex-flow: column nowrap;
-  justify-content: space-between;
-  max-width: 20%;
+  justify-content: flex-start;
+  width: calc(25% - 2rem);
 
   @media screen and (min-width: 1000px) and (max-width: 1200px - 1px) {
-    width: 45%;
-    max-width: 45%;
+    width: calc(50% - 2rem);
     margin-bottom: 2rem;
   }
 
   @media screen and (max-width: 1000px - 1px) {
     width: 100%;
-    max-width: 100%;
     margin-bottom: 3rem;
     margin-left: 0;
     margin-right: 0;
@@ -34,12 +32,28 @@
 
   &__image {
     width: 100%;
+    height: 300px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
     margin-bottom: 1rem;
+
+    @media screen and (min-width: 1200px) {
+      height: 15vw;
+    }
+
+    @media screen and (max-width: 1200px - 1px) {
+      height: 35vh;
+    }
   }
 
   &__button {
     display: flex;
     justify-content: center;
+
+    button {
+      height: 100%;
+    }
   }
 
   &__text {
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 1740acc..5e9db78 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -25,7 +25,9 @@ class Card extends React.Component<CardProps, CardState> {
     };
     const datetime = new Date(this.props.start_time).toLocaleString("fi-FI", options);
 
-    const imageElem = !!image ? <img src={image} className="card__image" /> : null;
+    const imageElem = !!image ? (
+      <div style={{ backgroundImage: `url(${image})`, }} className="card__image" />
+    ) : null;
     if (link) {
       return (
         <Link to={link} className="card">
diff --git a/src/components/PageLink/PageLink.scss b/src/components/PageLink/PageLink.scss
index 2a1ce8a..8f543a8 100644
--- a/src/components/PageLink/PageLink.scss
+++ b/src/components/PageLink/PageLink.scss
@@ -4,7 +4,7 @@
   border-left-color: $blue;
   border-left-width: 0.8rem;
   border-left-style: solid;
-  margin: 1rem;
+  margin: 0 1rem 1rem 0;
 
   & p {
     display: flex;
diff --git a/src/pages/FrontPage/FrontPage.scss b/src/pages/FrontPage/FrontPage.scss
index 54b9989..bbedfd6 100644
--- a/src/pages/FrontPage/FrontPage.scss
+++ b/src/pages/FrontPage/FrontPage.scss
@@ -4,14 +4,4 @@
   display: flex;
   flex-flow: column wrap;
   justify-content: flex-start;
-
-  &__page-links {
-    display: flex;
-    flex-flow: column wrap;
-
-    @media screen and (max-width: 1200px - 1px) {
-      margin: 0 2rem 1rem 0;
-      width: 40%;
-    }
-  }
 }
diff --git a/src/pages/FrontPage/FrontPage.tsx b/src/pages/FrontPage/FrontPage.tsx
index 4e55fca..02693fb 100644
--- a/src/pages/FrontPage/FrontPage.tsx
+++ b/src/pages/FrontPage/FrontPage.tsx
@@ -112,7 +112,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
               button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää&nbsp;›</Button>}
             />
           ))}
-          <div className="front-page__page-links">
+          <div className="card">
             <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
               Kaikki tapahtumat
             </PageLink>
@@ -135,13 +135,13 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
                 button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää&nbsp;›</Button>}
               />
             ))}
-            <div className="front-page__page-links">
-            <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
-              Lue tuoreimmat uutiset
-            </PageLink>
-            <PageLink to="sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
-              Kuvia tapahtumista
-            </PageLink>
+            <div className="card">
+              <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
+                Lue tuoreimmat uutiset
+              </PageLink>
+              <PageLink to="sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
+                Kuvia tapahtumista
+              </PageLink>
             </div>
         </PageSection>
         <PageSection center backgroundColor={PageSectionColor.White}>