From e6fec50cd079454e2c5154a4963ba09e02720070 Mon Sep 17 00:00:00 2001
From: Brysen Ackx <brysen.ackx@gmail.com>
Date: Thu, 27 Jul 2017 10:38:16 +0200
Subject: [PATCH 1/9] randomize homepage snippers & stories

---
 src/helpers/{RoomIdGenerator.js => RandomHelpers.js} | 11 +++++++++++
 src/redux/actions.js                                 |  9 +++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)
 rename src/helpers/{RoomIdGenerator.js => RandomHelpers.js} (62%)

diff --git a/src/helpers/RoomIdGenerator.js b/src/helpers/RandomHelpers.js
similarity index 62%
rename from src/helpers/RoomIdGenerator.js
rename to src/helpers/RandomHelpers.js
index bdebf0e..f6a8886 100644
--- a/src/helpers/RoomIdGenerator.js
+++ b/src/helpers/RandomHelpers.js
@@ -13,3 +13,14 @@ export const RoomIdGenerator = {
     return text;
   }
 };
+
+export const shuffle = arr => {
+  let j, x, i;
+  for (i = arr.length; i; i--) {
+    j = Math.floor(Math.random() * i);
+    x = arr[i - 1];
+    arr[i - 1] = arr[j];
+    arr[j] = x;
+  }
+  return arr;
+};
diff --git a/src/redux/actions.js b/src/redux/actions.js
index a8de617..0d23b98 100644
--- a/src/redux/actions.js
+++ b/src/redux/actions.js
@@ -5,6 +5,7 @@ import {
 } from '../helpers/firebase';
 import { push } from 'connected-react-router';
 import moment from 'moment';
+import { shuffle } from '../helpers/RandomHelpers';
 
 export const actionTypes = {
   listenToFirebaseAuth: 'LISTEN_FIREBASE_AUTH',
@@ -103,7 +104,9 @@ export const fetchRandomStories = () => {
       .ref('/stories')
       .once('value')
       .then(snapshot => {
-        dispatch(fetchRandomStoriesFulfilled(snapshot.val()));
+        let randomStories = shuffle(snapshot.val());
+
+        dispatch(fetchRandomStoriesFulfilled(randomStories.splice(0, 3)));
       })
       .catch(err => {
         dispatch(fetchRandomStoriesRejected(err));
@@ -776,7 +779,9 @@ export const fetchRandomSnippers = () => {
     firebaseDatabase.ref(`/creations`).once('value').then(snippers => {
       const val = snippers.val();
       const keys = Object.keys(val);
-      dispatch(fetchRandomSnippersFulfilled(keys.map(id => val[id])));
+      let randomSnippers = shuffle(keys.map(key => val[key]));
+      // keys.map(id => val[id])
+      dispatch(fetchRandomSnippersFulfilled(randomSnippers.splice(0, 4)));
     });
   };
 };

From 51fc07b277821bdbf697b2e314de72b41a1a8ca1 Mon Sep 17 00:00:00 2001
From: Brysen Ackx <brysen.ackx@gmail.com>
Date: Thu, 27 Jul 2017 11:23:17 +0200
Subject: [PATCH 2/9] hotfixes

---
 src/components/creations1/Creations1.js | 8 +++++++-
 src/components/nav/Navlink.scss         | 4 ++++
 src/containers/views/Room/Room.scss     | 3 +++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/creations1/Creations1.js b/src/components/creations1/Creations1.js
index ff1d429..719199e 100644
--- a/src/components/creations1/Creations1.js
+++ b/src/components/creations1/Creations1.js
@@ -10,7 +10,13 @@ const Creations1 = ({ snipper }) => {
         onClick={e => history.push(`/snippers/${snipper.id}`)}
       >
         {snipper.fileType === 'video'
-          ? <video autoPlay controls src={snipper.photoURL} />
+          ? <video
+              className="img-fluid card-img"
+              autoPlay
+              loop
+              muted
+              src={snipper.photoURL}
+            />
           : <img
               src={snipper.photoURL}
               alt={`Snipper van ${snipper.creators}`}
diff --git a/src/components/nav/Navlink.scss b/src/components/nav/Navlink.scss
index a95fa25..9fc3454 100644
--- a/src/components/nav/Navlink.scss
+++ b/src/components/nav/Navlink.scss
@@ -5,6 +5,10 @@
   font-family: $brand-font-stack;
   font-weight: 600;
 
+  &:hover {
+    cursor: pointer;
+  }
+
   &:hover,
   &:focus {
     color: $brand-blue;
diff --git a/src/containers/views/Room/Room.scss b/src/containers/views/Room/Room.scss
index fecdc8e..bd88f01 100644
--- a/src/containers/views/Room/Room.scss
+++ b/src/containers/views/Room/Room.scss
@@ -109,6 +109,9 @@
 
 .monument {
   margin-bottom: 6rem;
+  .card-block {
+    width: 100%;
+  }
 }
 
 .story-information svg {

From 66459d7bece89a3c6aeed5401fca16b98c3c3ff7 Mon Sep 17 00:00:00 2001
From: Brysen Ackx <brysen.ackx@gmail.com>
Date: Thu, 27 Jul 2017 11:44:39 +0200
Subject: [PATCH 3/9] aligned icons story select

---
 src/containers/views/StorySelect/StorySelect.js | 17 +++--------------
 .../views/StorySelect/StorySelect.scss          | 12 +++++++++---
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/containers/views/StorySelect/StorySelect.js b/src/containers/views/StorySelect/StorySelect.js
index ac5e2d3..d7629b9 100644
--- a/src/containers/views/StorySelect/StorySelect.js
+++ b/src/containers/views/StorySelect/StorySelect.js
@@ -42,17 +42,6 @@ class StorySelect extends React.Component {
           image={StapLogo}
         />
         <div className="container">
-          {/* <div className="input-group">
-            <input
-              type="text"
-              className="form-control"
-              placeholder="Zoek hier een persoon of thema"
-              aria-describedby="basic-addon1"
-            />
-            <span className="input-group-addon" id="basic-addon1">
-              <Search />
-            </span>
-          </div> */}
           <div className="random-stories row">
             {randomStories &&
               randomStories.map(story =>
@@ -78,7 +67,7 @@ class StorySelect extends React.Component {
                     <p className="card-text">
                       {story.description}
                     </p>
-                    <p className="card-text">
+                    <p className="card-text card-text--icon">
                       <svg
                         version="1.1"
                         xmlns="http://www.w3.org/2000/svg"
@@ -91,7 +80,7 @@ class StorySelect extends React.Component {
                       </svg>{' '}
                       {getReadableDate(story.birthdate)}
                     </p>
-                    <p className="card-text">
+                    <p className="card-text card-text--icon">
                       <svg
                         version="1.1"
                         xmlns="http://www.w3.org/2000/svg"
@@ -104,7 +93,7 @@ class StorySelect extends React.Component {
                       </svg>
                       {getReadableDate(story.died)}
                     </p>
-                    <p className="card-text">
+                    <p className="card-text card-text--icon">
                       <svg
                         style={{ transform: 'scale(0.8)' }}
                         version="1.1"
diff --git a/src/containers/views/StorySelect/StorySelect.scss b/src/containers/views/StorySelect/StorySelect.scss
index a40b6bc..ef6acb7 100644
--- a/src/containers/views/StorySelect/StorySelect.scss
+++ b/src/containers/views/StorySelect/StorySelect.scss
@@ -7,9 +7,15 @@
 .story.card {
   cursor: pointer !important;
   transition: 0.5s;
-  svg {
-    fill: white;
-    margin-right: 10px;
+  .card-text--icon {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    svg {
+      fill: white;
+      margin-right: 10px;
+      width: 36px;
+    }
   }
   &:hover {
     transform: scale(1.04);

From 8d55ee9d727501275622ab20827a94b7572e6f4d Mon Sep 17 00:00:00 2001
From: Elias Meire <eliasmeire@users.noreply.github.com>
Date: Thu, 27 Jul 2017 12:00:51 +0200
Subject: [PATCH 4/9] Feature/responsive fixes (#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
---
 package.json                                  |  1 +
 src/components/difficulty/Difficulty.js       |  2 +-
 src/components/modules/ImageModule.js         |  9 ++-
 src/components/modules/QuizModule.js          |  9 ++-
 src/components/modules/TextblockModule.js     | 11 ++--
 src/components/nav/Navbar.js                  | 17 ++---
 src/components/nav/Navlink.scss               | 12 +++-
 .../step-indicator/FloatingSteps.scss         | 16 ++++-
 src/containers/App.scss                       | 27 +++-----
 src/containers/views/Home/Home.js             | 12 ++--
 src/containers/views/Home/Home.scss           | 18 +++++-
 src/containers/views/KnutselTips.js           | 63 -------------------
 .../views/KnutselTips/KnutselTips.js          | 21 ++++---
 .../views/KnutselTips/KnutselTips.scss        | 36 +++++++++--
 src/containers/views/Room/Room.scss           |  1 -
 .../views/SnipperDetail/SnipperDetail.scss    |  4 +-
 .../views/StorySelect/StorySelect.scss        |  4 ++
 src/index.js                                  |  2 +
 yarn.lock                                     |  4 ++
 19 files changed, 147 insertions(+), 122 deletions(-)
 delete mode 100644 src/containers/views/KnutselTips.js

diff --git a/package.json b/package.json
index 4f9f232..8d941c4 100644
--- 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
index 3ac7f97..c180b97 100644
--- 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
index 7a4539b..846d690 100644
--- 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
index 8ab8a59..7a23df9 100644
--- 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
index eea0a25..c27ed83 100644
--- 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
index 21a90c1..81aa6b3 100644
--- 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
index 9fc3454..5c2b07f 100644
--- 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
index ac266d1..2a38811 100644
--- 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
index 602576f..a3cc739 100644
--- 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
index 01e992d..7d503f2 100644
--- 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
index 886e815..b0e7cb5 100644
--- 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
deleted file mode 100644
index 3d93be7..0000000
--- a/src/containers/views/KnutselTips.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { fetchKnutselTips } from '../../redux/actions';
-import NavBar from '../../components/nav/Navbar';
-import Footer from '../../components/footer/Footer';
-import Difficulty from '../../components/difficulty/Difficulty';
-
-class KnutselTips extends React.Component {
-  componentWillMount() {
-    this.props.fetchKnutselTips();
-  }
-
-  render() {
-    const { knutseltips } = this.props;
-    return (
-      <div>
-        <NavBar />
-        <div>
-          <h1 style={{ textAlign: 'center' }}>Knutseltips</h1>
-          <div className="knutseltips row">
-            {knutseltips.tips.map((tip, i) =>
-              <div
-                className="card knutseltip"
-                style={{ width: '20em', margin: '2em' }}
-              >
-                <img
-                  class="card-img-top"
-                  style={{ maxWidth: '100%' }}
-                  src={tip.image}
-                  alt={tip.name}
-                />
-                <div className="card-block">
-                  <h4 className="card-title">
-                    {tip.name}
-                  </h4>
-                  <p className="card-text">
-                    {tip.text}
-                  </p>
-                </div>
-                <div className="card-block">
-                  <Difficulty amount={tip.difficulty} />
-                </div>
-                <div className="card-block">
-                  <p>Benodigdheden:</p>
-                  <p className="card-text">
-                    {tip.requirements}
-                  </p>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-        <Footer />
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = state => ({
-  knutseltips: state.knutseltips
-});
-
-export default connect(mapStateToProps, { fetchKnutselTips })(KnutselTips);
diff --git a/src/containers/views/KnutselTips/KnutselTips.js b/src/containers/views/KnutselTips/KnutselTips.js
index b212399..e0dd1cf 100644
--- 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>
                 )}
diff --git a/src/containers/views/KnutselTips/KnutselTips.scss b/src/containers/views/KnutselTips/KnutselTips.scss
index acd6353..e6c0b5c 100644
--- a/src/containers/views/KnutselTips/KnutselTips.scss
+++ b/src/containers/views/KnutselTips/KnutselTips.scss
@@ -3,12 +3,30 @@
 .knutseltips {
   overflow: hidden;
   .card.knutseltip {
+    .card-title {
+      font-size: 1.6rem;
+      line-height: 2rem;
+      padding: 0;
+      margin: 0;
+    }
+
+    .card-block {
+      padding: 0;
+      padding-top: 1rem;
+    }
+
+    h3 {
+      font-size: 1.25rem;
+    }
     cursor: pointer;
     user-select: none;
     height: 400px;
     border-radius: 2.5rem;
     border: 1rem solid $brand-blue;
+    background-color: $brand-blue;
+    color: white;
     img {
+      border: none;
       border-top-left-radius: 1.8rem;
       border-top-right-radius: 1.8rem;
     }
@@ -22,12 +40,20 @@
     height: 0;
     opacity: 0;
   }
-}
 
-.tip-difficulty {
-  font-family: $brand-font-stack;
-  font-weight: 500;
-  margin-bottom: -.2rem;
+  .difficulty {
+    .difficulty-counter {
+      border: 3px solid $brand-red--lighter;
+      display: inline-block;
+    }
+    .difficulty-counter + .difficulty-counter {
+      margin-left: 1rem;
+    }
+    .difficulty-counter.filled {
+      background-color: $brand-red--lighter;
+      border: 3px solid transparent;
+    }
+  }
 }
 
 .tip-difficulty-card {
diff --git a/src/containers/views/Room/Room.scss b/src/containers/views/Room/Room.scss
index bd88f01..85a7356 100644
--- a/src/containers/views/Room/Room.scss
+++ b/src/containers/views/Room/Room.scss
@@ -8,7 +8,6 @@
 .story-information {
   color: white;
   display: flex;
-
   flex-flow: row-reverse;
   align-items: center;
   justify-content: center;
diff --git a/src/containers/views/SnipperDetail/SnipperDetail.scss b/src/containers/views/SnipperDetail/SnipperDetail.scss
index 17761fa..fab83c3 100644
--- a/src/containers/views/SnipperDetail/SnipperDetail.scss
+++ b/src/containers/views/SnipperDetail/SnipperDetail.scss
@@ -21,8 +21,8 @@
     img,
     video {
       max-height: 35em;
-      border-radius: 4.5rem;
-      border: 10px $brand-blue solid;
+      border-radius: 2.5rem;
+      border: 1rem $brand-blue solid;
     }
     .snipper-description {
       background: $brand-blue;
diff --git a/src/containers/views/StorySelect/StorySelect.scss b/src/containers/views/StorySelect/StorySelect.scss
index ef6acb7..dca0f38 100644
--- a/src/containers/views/StorySelect/StorySelect.scss
+++ b/src/containers/views/StorySelect/StorySelect.scss
@@ -7,6 +7,10 @@
 .story.card {
   cursor: pointer !important;
   transition: 0.5s;
+  img {
+    border-top-left-radius: 2.5rem;
+    border-top-right-radius: 2.5rem;
+  }
   .card-text--icon {
     display: flex;
     align-items: center;
diff --git a/src/index.js b/src/index.js
index 592481b..f90817e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,10 +3,12 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import Root from './containers/Root';
 import registerServiceWorker from './registerServiceWorker';
+const flexibility = require('flexibility');
 window.jQuery = require('jquery');
 window.Tether = require('tether');
 require('bootstrap');
 
 ReactDOM.render(<Root />, document.getElementById('root'));
+flexibility(document.getElementById('root'));
 
 registerServiceWorker();
diff --git a/yarn.lock b/yarn.lock
index 56d9a81..984a1df 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2620,6 +2620,10 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+flexibility@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/flexibility/-/flexibility-2.0.1.tgz#ad323aafc40f469ce624286518fc4d7cd72b7c77"
+
 for-in@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"

From 42c93cb604e54d92f2e5c4f4808d0fe6e9e1f081 Mon Sep 17 00:00:00 2001
From: Brysen Ackx <brysen.ackx@gmail.com>
Date: Thu, 27 Jul 2017 12:06:28 +0200
Subject: [PATCH 5/9] removed controls from snippers

---
 src/containers/views/Snippers/Snippers.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/containers/views/Snippers/Snippers.js b/src/containers/views/Snippers/Snippers.js
index 2a4b6d3..7c57032 100644
--- a/src/containers/views/Snippers/Snippers.js
+++ b/src/containers/views/Snippers/Snippers.js
@@ -25,9 +25,9 @@ class Snippers extends React.Component {
           </h1>
           <div className="container">
             <p className="creation-description">
-              Snippers zijn de werkjes van anderen over de geschiedenis.
-              Wil je zelf een Snipper maken? Lees dan een verhaal en laat
-              je inspireren!
+              Snippers zijn de werkjes van anderen over de geschiedenis. Wil je
+              zelf een Snipper maken? Lees dan een verhaal en laat je
+              inspireren!
             </p>
           </div>
           <div className="row" style={{ justifyContent: 'center' }}>
@@ -43,7 +43,6 @@ class Snippers extends React.Component {
                 >
                   {snipper.fileType === 'video'
                     ? <video
-                        controls
                         src={snipper.photoURL}
                         className="card-img-top img-fluid"
                       />
@@ -64,10 +63,7 @@ class Snippers extends React.Component {
                       <h2 className="card-title">
                         Geknutseld door {snipper.creators}
                       </h2>
-                      <p
-                        className="card-text"
-
-                      >
+                      <p className="card-text">
                         {snipper.description}
                       </p>
                     </div>

From 05bfdaaddcbf60185948d9b40e267282a89fcaa9 Mon Sep 17 00:00:00 2001
From: Elias Meire <me@eliasmei.re>
Date: Thu, 27 Jul 2017 12:13:02 +0200
Subject: [PATCH 6/9] update package.json

---
 package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8d941c4..8674906 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,8 @@
 {
-  "name": "ishare",
+  "name": "snipstory",
   "version": "0.2.0",
+  "repository": "oSoc17/snipstory",
+  "license": "MIT",
   "dependencies": {
     "bootstrap": "^4.0.0-alpha.6",
     "connected-react-router": "^4.2.3",

From a0b91d6f03d80cf1c13260fc1a51c6942c4a3921 Mon Sep 17 00:00:00 2001
From: Brysen Ackx <brysen.ackx@gmail.com>
Date: Thu, 27 Jul 2017 12:13:04 +0200
Subject: [PATCH 7/9] reroll

---
 src/containers/views/Snippers/Snippers.js       |  2 ++
 src/containers/views/StorySelect/StorySelect.js | 10 ++++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/containers/views/Snippers/Snippers.js b/src/containers/views/Snippers/Snippers.js
index 7c57032..fddd633 100644
--- a/src/containers/views/Snippers/Snippers.js
+++ b/src/containers/views/Snippers/Snippers.js
@@ -43,6 +43,8 @@ class Snippers extends React.Component {
                 >
                   {snipper.fileType === 'video'
                     ? <video
+                        autoPlay
+                        loop
                         src={snipper.photoURL}
                         className="card-img-top img-fluid"
                       />
diff --git a/src/containers/views/StorySelect/StorySelect.js b/src/containers/views/StorySelect/StorySelect.js
index d7629b9..186dc52 100644
--- a/src/containers/views/StorySelect/StorySelect.js
+++ b/src/containers/views/StorySelect/StorySelect.js
@@ -7,6 +7,7 @@ import {
 import Spinner from '../../../components/spinner/Spinner';
 import Navbar from '../../../components/nav/Navbar';
 import Footer from '../../../components/footer/Footer';
+import Button from '../../../components/button/Button';
 import { connect } from 'react-redux';
 import FloatingSteps from '../../../components/step-indicator/FloatingSteps';
 import StepIndicator from '../../../components/step-indicator/StepIndicator';
@@ -112,6 +113,15 @@ class StorySelect extends React.Component {
                   </div>
                 </div>
               )}
+
+            <Button
+              onClick={e => {
+                e.preventDefault();
+                this.props.fetchRandomStories();
+              }}
+            >
+              Krijg 3 andere personen
+            </Button>
             <FloatingSteps clickable={false} activeStep={0} />
           </div>
           {error &&

From 20f7a23a3044a3cede073e39b799ab31e92968f9 Mon Sep 17 00:00:00 2001
From: Brysen Ackx <brysen.ackx@gmail.com>
Date: Thu, 27 Jul 2017 12:16:36 +0200
Subject: [PATCH 8/9] only reload persons instead of whole page

---
 .../views/StorySelect/StorySelect.js          | 160 +++++++++---------
 1 file changed, 79 insertions(+), 81 deletions(-)

diff --git a/src/containers/views/StorySelect/StorySelect.js b/src/containers/views/StorySelect/StorySelect.js
index 186dc52..52b5263 100644
--- a/src/containers/views/StorySelect/StorySelect.js
+++ b/src/containers/views/StorySelect/StorySelect.js
@@ -29,10 +29,6 @@ class StorySelect extends React.Component {
       createRoom
     } = this.props;
 
-    if (isLoading) {
-      return <Spinner page size="large" />;
-    }
-
     return (
       <div className="page">
         <Navbar />
@@ -43,87 +39,89 @@ class StorySelect extends React.Component {
           image={StapLogo}
         />
         <div className="container">
-          <div className="random-stories row">
-            {randomStories &&
-              randomStories.map(story =>
-                <div
-                  className="story card"
-                  key={story.storyId}
+          {isLoading
+            ? <Spinner page size="large" />
+            : <div className="random-stories row">
+                {randomStories &&
+                  randomStories.map(story =>
+                    <div
+                      className="story card"
+                      key={story.storyId}
+                      onClick={e => {
+                        e.preventDefault();
+                        selectStory(story);
+                        createRoom('');
+                      }}
+                      style={{ margin: '1em', width: '20em' }}
+                    >
+                      <img
+                        className="card-img-top img-fluid"
+                        src={story.profilePicture}
+                        alt={story.name}
+                      />
+                      <div className="card-block">
+                        <h3 className="card-title">
+                          {story.name}
+                        </h3>
+                        <p className="card-text">
+                          {story.description}
+                        </p>
+                        <p className="card-text card-text--icon">
+                          <svg
+                            version="1.1"
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                          >
+                            <title>child_friendly</title>
+                            <path d="M17.016 20.016c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM8.016 20.016c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM19.313 15.891c0.703 0.656 1.172 1.594 1.172 2.625 0 1.922-1.547 3.469-3.469 3.469-1.781 0-3.234-1.313-3.469-3h-2.109c-0.234 1.688-1.641 3-3.422 3-1.922 0-3.516-1.547-3.516-3.469 0-1.313 0.75-2.484 1.828-3.094-0.234-0.328-2.109-4.406-2.109-4.406h-2.203v-2.016h3.469l0.938 2.016h14.578c0 1.828-0.656 3.516-1.688 4.875zM12.984 2.016c4.406 0 8.016 3.563 8.016 7.969h-8.016v-7.969z" />
+                          </svg>{' '}
+                          {getReadableDate(story.birthdate)}
+                        </p>
+                        <p className="card-text card-text--icon">
+                          <svg
+                            version="1.1"
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="32"
+                            height="32"
+                            viewBox="0 0 32 32"
+                          >
+                            <title>cross</title>
+                            <path d="M5.979 10.974v5.021h7.041v11.99h5.042v-11.99h6.958v-5.021h-6.958v-6.958h-5.042v6.958h-7.041z" />
+                          </svg>
+                          {getReadableDate(story.died)}
+                        </p>
+                        <p className="card-text card-text--icon">
+                          <svg
+                            style={{ transform: 'scale(0.8)' }}
+                            version="1.1"
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="32"
+                            height="32"
+                            viewBox="0 0 32 32"
+                          >
+                            <title>flag</title>
+                            <path d="M0 0h4v32h-4v-32z" />
+                            <path d="M26 20.094c2.582 0 4.83-0.625 6-1.547v-16c-1.17 0.922-3.418 1.547-6 1.547s-4.83-0.625-6-1.547v16c1.17 0.922 3.418 1.547 6 1.547z" />
+                            <path d="M19 1.016c-1.466-0.623-3.61-1.016-6-1.016-3.012 0-5.635 0.625-7 1.547v16c1.365-0.922 3.988-1.547 7-1.547 2.39 0 4.534 0.393 6 1.016v-16z" />
+                          </svg>
+                          {story.nationality}
+                        </p>
+                      </div>
+                    </div>
+                  )}
+
+                <Button
                   onClick={e => {
                     e.preventDefault();
-                    selectStory(story);
-                    createRoom('');
+                    this.props.fetchRandomStories();
                   }}
-                  style={{ margin: '1em', width: '20em' }}
                 >
-                  <img
-                    className="card-img-top img-fluid"
-                    src={story.profilePicture}
-                    alt={story.name}
-                  />
-                  <div className="card-block">
-                    <h3 className="card-title">
-                      {story.name}
-                    </h3>
-                    <p className="card-text">
-                      {story.description}
-                    </p>
-                    <p className="card-text card-text--icon">
-                      <svg
-                        version="1.1"
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                      >
-                        <title>child_friendly</title>
-                        <path d="M17.016 20.016c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM8.016 20.016c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM19.313 15.891c0.703 0.656 1.172 1.594 1.172 2.625 0 1.922-1.547 3.469-3.469 3.469-1.781 0-3.234-1.313-3.469-3h-2.109c-0.234 1.688-1.641 3-3.422 3-1.922 0-3.516-1.547-3.516-3.469 0-1.313 0.75-2.484 1.828-3.094-0.234-0.328-2.109-4.406-2.109-4.406h-2.203v-2.016h3.469l0.938 2.016h14.578c0 1.828-0.656 3.516-1.688 4.875zM12.984 2.016c4.406 0 8.016 3.563 8.016 7.969h-8.016v-7.969z" />
-                      </svg>{' '}
-                      {getReadableDate(story.birthdate)}
-                    </p>
-                    <p className="card-text card-text--icon">
-                      <svg
-                        version="1.1"
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="32"
-                        height="32"
-                        viewBox="0 0 32 32"
-                      >
-                        <title>cross</title>
-                        <path d="M5.979 10.974v5.021h7.041v11.99h5.042v-11.99h6.958v-5.021h-6.958v-6.958h-5.042v6.958h-7.041z" />
-                      </svg>
-                      {getReadableDate(story.died)}
-                    </p>
-                    <p className="card-text card-text--icon">
-                      <svg
-                        style={{ transform: 'scale(0.8)' }}
-                        version="1.1"
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="32"
-                        height="32"
-                        viewBox="0 0 32 32"
-                      >
-                        <title>flag</title>
-                        <path d="M0 0h4v32h-4v-32z" />
-                        <path d="M26 20.094c2.582 0 4.83-0.625 6-1.547v-16c-1.17 0.922-3.418 1.547-6 1.547s-4.83-0.625-6-1.547v16c1.17 0.922 3.418 1.547 6 1.547z" />
-                        <path d="M19 1.016c-1.466-0.623-3.61-1.016-6-1.016-3.012 0-5.635 0.625-7 1.547v16c1.365-0.922 3.988-1.547 7-1.547 2.39 0 4.534 0.393 6 1.016v-16z" />
-                      </svg>
-                      {story.nationality}
-                    </p>
-                  </div>
-                </div>
-              )}
-
-            <Button
-              onClick={e => {
-                e.preventDefault();
-                this.props.fetchRandomStories();
-              }}
-            >
-              Krijg 3 andere personen
-            </Button>
-            <FloatingSteps clickable={false} activeStep={0} />
-          </div>
+                  Krijg 3 andere personen
+                </Button>
+              </div>}
+          <FloatingSteps clickable={false} activeStep={0} />
           {error &&
             <div className="error">
               {error}

From 777e817888caf05bde72cc2815387b43208f6988 Mon Sep 17 00:00:00 2001
From: Elias Meire <me@eliasmei.re>
Date: Thu, 27 Jul 2017 12:20:14 +0200
Subject: [PATCH 9/9] version 0.2.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8674906..26e209f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "snipstory",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "repository": "oSoc17/snipstory",
   "license": "MIT",
   "dependencies": {