From 7081c6fcc34ad8b58170de9d7440fc500a3e473b Mon Sep 17 00:00:00 2001
From: Martin Cadoux <martin.cadoux@me.com>
Date: Thu, 1 Mar 2018 01:15:36 +0100
Subject: [PATCH] Edit course duration

---
 src/assets/scss/includes/_header.scss     | 20 ++++++++++++++++++++
 src/assets/scss/objects/_course-page.scss | 13 -------------
 src/containers/Course.jsx                 |  9 ++-------
 src/containers/Header.jsx                 |  6 +++---
 4 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/assets/scss/includes/_header.scss b/src/assets/scss/includes/_header.scss
index 360aab2..e1bedeb 100644
--- a/src/assets/scss/includes/_header.scss
+++ b/src/assets/scss/includes/_header.scss
@@ -97,7 +97,27 @@
     flex: 1 1 25em;
   }
 
+  &__title {
+    $context: 24px;
+
+    font-size: em($context);
+    margin-bottom: em(20px, $context);
+    @media (min-width: 48em) {
+      margin-bottom: 0;
+    }
+  }
+
   &__duration {
+    $context: 20px;
+
+    font-size: $context;
     margin: 0;
+    &:before {
+      content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCI+PHBhdGggZD0iTTMwIDBDMTMuNDU4IDAgMCAxMy40NTggMCAzMHMxMy40NTggMzAgMzAgMzAgMzAtMTMuNDU4IDMwLTMwUzQ2LjU0MiAwIDMwIDB6bTAgNThDMTQuNTYxIDU4IDIgNDUuNDM5IDIgMzBTMTQuNTYxIDIgMzAgMnMyOCAxMi41NjEgMjggMjgtMTIuNTYxIDI4LTI4IDI4eiIvPjxwYXRoIGQ9Ik0zMCA2YTEgMSAwIDAgMC0xIDF2MjNIMTRhMSAxIDAgMSAwIDAgMmgxNmExIDEgMCAwIDAgMS0xVjdhMSAxIDAgMCAwLTEtMXoiLz48L3N2Zz4=");
+      display: inline-block;
+      margin-right: em(10px, $context);
+      width: em(35px, $context);
+      vertical-align: middle;
+    }
   }
 }
diff --git a/src/assets/scss/objects/_course-page.scss b/src/assets/scss/objects/_course-page.scss
index 9260f3e..84bda1a 100644
--- a/src/assets/scss/objects/_course-page.scss
+++ b/src/assets/scss/objects/_course-page.scss
@@ -117,19 +117,6 @@
     }
   }
 
-  &__duration {
-    $context: 20px;
-
-    font-size: $context;
-    &:before {
-      content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCI+PHBhdGggZD0iTTMwIDBDMTMuNDU4IDAgMCAxMy40NTggMCAzMHMxMy40NTggMzAgMzAgMzAgMzAtMTMuNDU4IDMwLTMwUzQ2LjU0MiAwIDMwIDB6bTAgNThDMTQuNTYxIDU4IDIgNDUuNDM5IDIgMzBTMTQuNTYxIDIgMzAgMnMyOCAxMi41NjEgMjggMjgtMTIuNTYxIDI4LTI4IDI4eiIvPjxwYXRoIGQ9Ik0zMCA2YTEgMSAwIDAgMC0xIDF2MjNIMTRhMSAxIDAgMSAwIDAgMmgxNmExIDEgMCAwIDAgMS0xVjdhMSAxIDAgMCAwLTEtMXoiLz48L3N2Zz4=");
-      display: inline-block;
-      margin-right: em(10px, $context);
-      width: em(35px, $context);
-      vertical-align: middle;
-    }
-  }
-
   &__text {
     h3 {
       $context: 17px;
diff --git a/src/containers/Course.jsx b/src/containers/Course.jsx
index a22b398..fb83ac4 100644
--- a/src/containers/Course.jsx
+++ b/src/containers/Course.jsx
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 
 import Summary from '../components/Summary';
 
+import clock from '../assets/images/icons/icon_clock.svg';
 import arrow from '../assets/images/icons/icon_arrow.svg';
 
 import {
@@ -139,10 +140,7 @@ export class Course extends React.Component {
 
   render() {
     const {
-      course: {
-        duration = {},
-        stepTitles = [],
-      } = {},
+      course: { stepTitles = [] } = {},
       currentStep,
     } = this.state;
 
@@ -161,9 +159,6 @@ export class Course extends React.Component {
         />
 
         <article className="course__content">
-          {stepTitles.length > 0 && (
-            <h1 className="course__chapter">{currentStep + 1} - {stepTitles[currentStep]}</h1>
-          )}
           <div className="course__text">{step.map((renderer, key) => renderer({ key }))}</div>
           <div className="course__navigation">
             <button
diff --git a/src/containers/Header.jsx b/src/containers/Header.jsx
index 224f05a..a21cf5a 100644
--- a/src/containers/Header.jsx
+++ b/src/containers/Header.jsx
@@ -25,7 +25,7 @@ export class Header extends React.Component {
       currentCourse,
     } = this.props;
 
-    const headerClasses = cx('site-header container', {
+    const headerClasses = cx('container site-header', {
       '-yellow': currentCourse.title,
     });
 
@@ -36,8 +36,8 @@ export class Header extends React.Component {
         </div>
 
         <div className="course-header">
-          {currentCourse && <h2 className="course-header__title">{currentCourse.title}</h2>}
-          <p className="course-header__duration" data-icon={clock}>{/*course.time*/} minutes</p>
+          {currentCourse.title && <h2 className="course-header__title">{currentCourse.title}</h2>}
+          {currentCourse.time && <p className="course-header__duration" data-icon={clock}>{currentCourse.time} minutes</p>}
         </div>
       </nav>
     );