Feature/responsive fixes (oSoc17#93)

* Responsive fixes for homepage * responsive floating steps * Knutseltips styling fixes * Small styling fixes * add polyfill for flexbox * fix border radius on cards * use background cover for images
oSoc18 · Jul 27, 2017 · 8d55ee9 · 8d55ee9
1 parent 66459d7
commit 8d55ee9
Show file tree

Hide file tree

Showing 19 changed files with 147 additions and 122 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "connected-react-router": "^4.2.3",
     "deep-equal": "^1.0.1",
     "firebase": "^4.1.3",
+    "flexibility": "^2.0.1",
     "google-map-react": "^0.24.0",
     "jquery": "^3.2.1",
     "moment": "^2.18.1",

diff --git a/src/components/difficulty/Difficulty.js b/src/components/difficulty/Difficulty.js
@@ -12,7 +12,7 @@ const Difficulty = props => {
 
   return (
     <div className="difficulty tip-difficulty-card">
-      <p className="card-text tip-difficulty">Moeilijkheidsgraad:</p>
+      <h3 className="card-text tip-difficulty">Moeilijkheidsgraad</h3>
       {data}
     </div>
   );

diff --git a/src/components/modules/ImageModule.js b/src/components/modules/ImageModule.js
@@ -3,7 +3,14 @@ import React from 'react';
 const ImageModule = ({ module: { resources, text } }) =>
   <article className="container module">
     <figure>
-      <img alt={text.substring(0, 10)} src={resources[0]} />
+      <div
+        style={{
+          backgroundImage: `url(${resources[0]})`,
+          backgroundPosition: 'center',
+          backgroundSize: 'cover'
+        }}
+        className="img-mask"
+      />
       <figcaption>
         {text}
       </figcaption>

diff --git a/src/components/modules/QuizModule.js b/src/components/modules/QuizModule.js
@@ -19,9 +19,12 @@ const QuizModule = ({ module, handleChange, users }) => {
     <article className="container module module--quiz">
       <div className="question-picture-container ">
         {module.resources &&
-          <img
-            src={module.resources[0]}
-            alt="QuizImage"
+          <div
+            style={{
+              backgroundImage: `url(${module.resources[0]})`,
+              backgroundPosition: 'center',
+              backgroundSize: 'cover'
+            }}
             className="img-mask"
           />}
         <p className="quiz-text">

diff --git a/src/components/modules/TextblockModule.js b/src/components/modules/TextblockModule.js
@@ -2,10 +2,13 @@ import React from 'react';
 
 const TextblockModule = ({ module: { resources, text } }) =>
   <article className="container module article-centering">
-    <img
-      className="img-fluid img-mask"
-      src={resources[0]}
-      alt="TextBlockImage"
+    <div
+      style={{
+        backgroundImage: `url(${resources[0]})`,
+        backgroundPosition: 'center',
+        backgroundSize: 'cover'
+      }}
+      className="img-mask"
     />
     <div className="module-text text-centering">
       <p>

diff --git a/src/components/nav/Navbar.js b/src/components/nav/Navbar.js
@@ -3,6 +3,7 @@ import Navlink from './Navlink';
 import Button from '../button/Button';
 import Navlogo from '../../containers/views/Home/assets/menu-logo.png';
 import './Navlink.css';
+import { Menu } from 'react-feather';
 
 const Navbar = ({ fixed = true }) => {
   return (
@@ -20,16 +21,18 @@ const Navbar = ({ fixed = true }) => {
         aria-expanded="false"
         aria-label="Toggle navigation"
       >
-        <span className="navbar-toggler-icon" />
+        <Menu color="#3274ff" size="36" />
       </button>
+
+      <div className="navbar-brand nav-logo">
+        <Navlink to="/">
+          <img src={Navlogo} alt="nav logo" width="80px" />
+          <span>Snipstory</span>
+        </Navlink>
+      </div>
+
       <div className="collapse navbar-collapse" id="navbarSupportedContent">
         <ul className="navbar-nav mr-auto">
-          <li className="nav-item nav-logo">
-            <Navlink to="/">
-              <img src={Navlogo} alt="nav logo" width="80px" />
-              <span>Snipstory</span>
-            </Navlink>
-          </li>
           <li className="nav-item">
             <Navlink to="/snippers">Snippers bekijken</Navlink>
           </li>

diff --git a/src/components/nav/Navlink.scss b/src/components/nav/Navlink.scss
@@ -34,10 +34,16 @@
 
 .navbar {
   background-color: white;
-}
-
-.navbar {
+  justify-content: center;
   box-shadow: 0 0 40px 4px $brand-blue--darker;
+  &-toggler {
+    border-color: transparent !important;
+  }
+  .show {
+    .nav-item + .nav-item {
+      margin-top: 1rem;
+    }
+  }
 }
 
 .navbar-toggler {

diff --git a/src/components/step-indicator/FloatingSteps.scss b/src/components/step-indicator/FloatingSteps.scss
@@ -20,16 +20,16 @@
   .floating-step {
     width: 100%;
     transition: all $transition-timing;
+    flex-direction: column;
     padding: 1rem 1.5rem;
     display: flex;
     align-items: center;
-    flex-direction: row;
     .checkmark {
       display: none;
     }
     &__icon {
       display: flex;
-      margin-right: .8rem;
+      margin-bottom: .8rem;
       padding: 1rem;
       border-radius: 50%;
       box-shadow: $box-shadow;
@@ -63,3 +63,15 @@
     }
   }
 }
+
+@media (min-width: 90rem) {
+  .floating-steps {
+    .floating-step {
+      flex-direction: row;
+      &__icon {
+        margin-right: .8rem;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/src/containers/App.scss b/src/containers/App.scss
@@ -1,26 +1,19 @@
 @import '../variables.scss';
-.knutseltips {
-  .card {
-    background-color: $brand-blue;
-    color: white;
-  }
-  .difficulty {
-    .difficulty-counter {
-      border: 3px solid $brand-red--lighter;
-      display: inline-block;
-      margin-left: 1em;
-    }
-    .difficulty-counter.filled {
-      background-color: $brand-red--lighter;
-      border: 3px solid transparent;
-    }
-  }
-}
 
 .module {
   margin: 7em 0;
 }
 
+*:focus {
+  outline-color: $brand-blue !important;
+}
+.card {
+  border-radius: 2.5rem;
+  img {
+    border: .5rem $brand-blue solid;
+  }
+}
+
 .room {
   margin-top: 3em;
 }

diff --git a/src/containers/views/Home/Home.js b/src/containers/views/Home/Home.js
@@ -161,26 +161,28 @@ class Home extends React.Component {
 
                 <div className="container">
                   <div className="row creations-position">
-                    <div className="col-6">
+                    <div className="col-md-6">
                       <Creations1 snipper={randomSnippers[0]} />
                     </div>
-                    <div className="col-6">
+                    <div className="col-md-6">
                       <Creations1 snipper={randomSnippers[1]} />
                     </div>
                   </div>
 
                   <div className="row creations-position">
-                    <div className="col-6">
+                    <div className="col-md-6">
                       <Creations1 snipper={randomSnippers[2]} />
                     </div>
-                    <div className="col-6">
+                    <div className="col-md-6">
                       <Creations1 snipper={randomSnippers[3]} />
                     </div>
                   </div>
                 </div>
               </section>}
           <section className="button-section button-section--white">
-            <Button size="small" to="/story/select">Start je verhaal hier</Button>
+            <Button size="small" to="/story/select">
+              Start je verhaal hier
+            </Button>
           </section>
         </main>
 

diff --git a/src/containers/views/Home/Home.scss b/src/containers/views/Home/Home.scss
@@ -82,6 +82,7 @@
   color: $brand-blue;
   font-size: 2rem;
   font-weight: 700;
+  text-align: center;
 }
 
 .header-paraf {
@@ -250,7 +251,6 @@
   font-family: $brand-font-stack;
   font-size: 1.4rem;
   color: $brand-blue;
-  padding: 2rem 8rem;
   text-align: center;
 }
 
@@ -271,3 +271,19 @@
     opacity: 0;
   }
 }
+@media (min-width: 30rem) {
+  .creation-description {
+    padding: 2rem 1rem;
+  }
+}
+@media (min-width: 60rem) {
+  .creation-description {
+    padding: 2rem 4rem;
+  }
+}
+
+@media (min-width: 90rem) {
+  .creation-description {
+    padding: 2rem 8rem;
+  }
+}
diff --git a/src/containers/views/KnutselTips.js b/src/containers/views/KnutselTips.js
diff --git a/src/containers/views/KnutselTips/KnutselTips.js b/src/containers/views/KnutselTips/KnutselTips.js
@@ -46,7 +46,10 @@ class KnutselTips extends React.Component {
         {knutseltips.isFetching
           ? <Spinner page size="large" />
           : <div className="page">
-              {!storyId && <h1 className="creation-title" style={{ textAlign: 'center' }}>Knutseltips</h1>}
+              {!storyId &&
+                <h1 className="creation-title" style={{ textAlign: 'center' }}>
+                  Knutseltips
+                </h1>}
               <div
                 className="knutseltips"
                 style={{
@@ -83,9 +86,9 @@ class KnutselTips extends React.Component {
                       alt={tip.name}
                     />
                     <div className="card-block">
-                      <h4 className="card-title">
+                      <h2 className="card-title">
                         {tip.name}
-                      </h4>
+                      </h2>
                     </div>
                     <div
                       className={`${this.state.openedTip !== i
@@ -96,10 +99,14 @@ class KnutselTips extends React.Component {
                         {tip.text}
                       </p>
                       <Difficulty amount={tip.difficulty} />
-                      <p className="card-text">
-                        Benodigdheden:<br/>
-                        {tip.requirements}
-                      </p>
+                      <div className="card-text">
+                        <h3 className="knutseltip__requirements__title">
+                          Benodigdheden
+                        </h3>
+                        <p>
+                          {tip.requirements}
+                        </p>
+                      </div>
                     </div>
                   </div>
                 )}