Merge branch 'release/0.2.1'

oSoc17 · Jul 27, 2017 · d1239e4 · d1239e4
2 parents 5190bb7 + 777e817
commit d1239e4
Show file tree

Hide file tree

Showing 24 changed files with 278 additions and 221 deletions.
diff --git a/package.json b/package.json
@@ -1,11 +1,14 @@
 {
-  "name": "ishare",
-  "version": "0.2.0",
+  "name": "snipstory",
+  "version": "0.2.1",
+  "repository": "oSoc17/snipstory",
+  "license": "MIT",
   "dependencies": {
     "bootstrap": "^4.0.0-alpha.6",
     "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/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/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
@@ -5,6 +5,10 @@
   font-family: $brand-font-stack;
   font-weight: 600;
 
+  &:hover {
+    cursor: pointer;
+  }
+
   &:hover,
   &:focus {
     color: $brand-blue;
@@ -30,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