Cleaning up CSS and implementing unit nav.

src/index.scss

@@ -14,31 +14,6 @@
     flex: 0;
   }
 
-  main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-
-    iframe {
-      flex: 1;
-      margin: 0 -10px;
-    }
-
-    nav {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-
-      .unit-button {
-        flex: 1;
-      }
-
-      button {
-        margin: 0px 5px;
-      }
-    }
-  }
-
   footer {
     flex: 0;
   }

src/learning-sequence/LearningSequencePage.jsx

@@ -19,25 +19,24 @@ function LearningSequencePage({ match, intl }) {
   const { blocks, loaded, courseBlockId } = useCourseStructure(courseId);
 
   return (
-    <main>
-      <div className="container-fluid">
-        <CourseStructureContext.Provider value={{
-            courseId,
-            courseBlockId,
-            subSectionId,
-            unitId,
-            blocks,
-            loaded,
-          }}
-        >
-          {!loaded && <PageLoading
-            srMessage={intl.formatMessage(messages['learn.loading.learning.sequence'])}
-          />}
+    <main className="container-fluid d-flex flex-column flex-grow-1">
+      <CourseStructureContext.Provider value={{
+          courseId,
+          courseBlockId,
+          subSectionId,
+          unitId,
+          blocks,
+          loaded,
+        }}
+      >
+        {!loaded && <PageLoading
+          srMessage={intl.formatMessage(messages['learn.loading.learning.sequence'])}
+        />}
+
+        {loaded && <CourseBreadcrumbs />}
+        <SubSection />
+      </CourseStructureContext.Provider>
 
-          {loaded && <CourseBreadcrumbs />}
-          <SubSection />
-        </CourseStructureContext.Provider>
-      </div>
     </main>
   );
 }

src/learning-sequence/data/hooks.js

@@ -97,9 +97,10 @@ export function useNextUnit() {
 }
 
 export function useCurrentSubSectionUnits() {
-  const { blocks } = useContext(CourseStructureContext);
+  const { loaded, blocks } = useContext(CourseStructureContext);
   const subSection = useCurrentSubSection();
-  return subSection.children.map(id => blocks[id]);
+
+  return loaded ? subSection.children.map(id => blocks[id]) : [];
 }
 
 export function useSubSectionIdList() {

src/learning-sequence/sub-section/SubSection.jsx

@@ -20,7 +20,7 @@ export default function SubSection() {
   const ready = blocks !== null && metadata !== null;
 
   return ready && (
-    <section>
+    <section className="d-flex flex-column flex-grow-1">
       <SubSectionNavigation />
       <Unit id={unitId} unit={blocks[unitId]} />
     </section>

src/learning-sequence/sub-section/SubSectionNavigation.jsx

@@ -1,10 +1,11 @@
 import React, { useCallback, useContext } from 'react';
+import PropTypes from 'prop-types';
 import { history } from '@edx/frontend-platform';
 import { Button } from '@edx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFilm, faBook, faPencilAlt, faTasks } from '@fortawesome/free-solid-svg-icons';
 
-import { useCurrentSubSection, usePreviousUnit, useNextUnit, useCurrentSubSectionUnits } from '../data/hooks';
+import { useCurrentSubSection, usePreviousUnit, useNextUnit, useCurrentSubSectionUnits, useCurrentUnit } from '../data/hooks';
 import CourseStructureContext from '../CourseStructureContext';
 
 function UnitIcon({ type }) {
@@ -48,7 +49,7 @@ export default function SubSectionNavigation() {
   });
 
   return (
-    <nav>
+    <nav className="flex-grow-0 d-flex w-100 mb-3">
       <Button
         key="previous"
         className="btn-outline-primary"
@@ -56,7 +57,7 @@ export default function SubSectionNavigation() {
       >
         Previous
       </Button>
-      {/* {this.renderUnits()} */}
+      <UnitNavigation />
       <Button
         key="next"
         className="btn-outline-primary"
@@ -70,34 +71,34 @@ export default function SubSectionNavigation() {
 
 function UnitNavigation() {
   const units = useCurrentSubSectionUnits();
+  const currentUnit = useCurrentUnit();
+
+  return (
+    <div className="btn-group ml-2 mr-2 flex-grow-1 d-flex" role="group">
+      {units.map(unit => (
+        <UnitButton key={unit.id} unit={unit} disabled={unit.id === currentUnit.id} />
+      ))}
+    </div>
+  );
 }
 
-function renderUnits() {
-  return this.props.unitIds.map((id) => {
-    const { type } = this.props.units[id];
-    const disabled = this.props.activeUnitId === id;
-    return (
-      <Button
-        key={id}
-        className="btn-outline-secondary unit-button"
-        onClick={() => this.props.unitClickHandler(id)}
-        disabled={disabled}
-      >
-        {this.renderUnitIcon(type)}
-      </Button>
-    );
-  });
+function UnitButton({ unit: { id, type }, disabled }) {
+  return (
+    <Button
+      key={id}
+      className="btn-outline-secondary unit-button flex-grow-1"
+      onClick={() => console.log(id)}
+      disabled={disabled}
+    >
+      <UnitIcon type={type} />
+    </Button>
+  );
 }
 
-
-SubSectionNavigation.propTypes = {
-  // unitIds: PropTypes.arrayOf(PropTypes.string).isRequired,
-  // units: PropTypes.objectOf(PropTypes.shape({
-  //   pageTitle: PropTypes.string.isRequired,
-  //   type: PropTypes.oneOf(['video', 'other', 'vertical', 'problem']).isRequired,
-  // })).isRequired,
-  // activeUnitId: PropTypes.string.isRequired,
-  // unitClickHandler: PropTypes.func.isRequired,
-  // nextClickHandler: PropTypes.func.isRequired,
-  // previousClickHandler: PropTypes.func.isRequired,
+UnitButton.propTypes = {
+  unit: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['video', 'other', 'vertical', 'problem']).isRequired,
+  }).isRequired,
+  disabled: PropTypes.bool.isRequired,
 };

src/learning-sequence/sub-section/Unit.jsx

@@ -8,6 +8,7 @@ export default function Unit({ id, unit }) {
   const { displayName } = unit;
   return (
     <iframe
+      className="flex-grow-1"
       title={displayName}
       ref={iframeRef}
       src={iframeUrl}