Edit course duration

eleven-labs · Mar 1, 2018 · 3703af8 · 3703af8
1 parent df6501f
commit 3703af8
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 26 deletions.
diff --git a/src/assets/scss/includes/_header.scss b/src/assets/scss/includes/_header.scss
@@ -100,7 +100,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
@@ -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
@@ -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,7 +140,6 @@ export class Course extends React.Component {
 
   render() {
     const {
-      course = {},
       course: { stepTitles = [] } = {},
       currentStep,
     } = this.state;
@@ -159,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
@@ -7,42 +7,37 @@ import clock from '../assets/images/icons/icon_clock.svg';
 
 const mapStateToProps = ({
   currentCourse,
-  currentStepIndex,
 }) => ({
   currentCourse,
-  currentStepIndex,
 });
 
 export class Header extends React.Component {
   static propTypes = {
     currentCourse: PropTypes.shape(),
-    currentStepIndex: PropTypes.number,
   };
 
   static defaultProps = {
     currentCourse: {},
-    currentStepIndex: null,
   };
 
   render() {
     const {
       currentCourse,
-      currentStepIndex,
     } = this.props;
 
-    const headerClasses = cx('site-header', {
+    const headerClasses = cx('container site-header', {
       '-yellow': currentCourse.title,
     });
 
     return (
-      <nav className={headerClasses + ' container'}>
+      <nav className={headerClasses}>
         <div className="branding-container">
           <a href="/" className="branding" />
         </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>
     );