update splash headings; color learning objectives

This reworks how learning objectives are padded and colored so that it hopefully will be applied to all content uniformly
openstax · May 14, 2019 · b84bb7a · b84bb7a
1 parent 9e4008a
commit b84bb7a
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 18 deletions.
diff --git a/tutor/resources/styles/book-content/base.scss b/tutor/resources/styles/book-content/base.scss
@@ -68,7 +68,8 @@
   }
 
   section:not(.references) h1 + p:first-of-type,
-  div[data-type="document-title"] ~ p:first-of-type {
+  [data-type="document-title"] ~ p:first-of-type {
+    margin-top: 2rem;
     @include tutor-reading-first-letter();
   }
 
@@ -122,23 +123,22 @@
   }
 
   .os-chapter-outline {
-    *:not(.splash) & {
-      margin-top: 1rem;
-    }
     .os-title { display: none; }
     .os-chapter-objective {
-    > a.os-chapter-objective {
+      > a.os-chapter-objective {
         display: none;
       }
       & + .os-chapter-objective {
         .learning-objective {
           [data-type="abstract"] {
             min-height: inherit;
-            padding: 0;
+            padding: 0 0 0 20px;
           }
-
         }
       }
+      &:last-of-type .learning-objective [data-type="abstract"] {
+        padding-bottom: 20px;
+      }
     }
   }
 

diff --git a/tutor/resources/styles/book-content/learning-objectives.scss b/tutor/resources/styles/book-content/learning-objectives.scss
@@ -1,5 +1,15 @@
 @mixin tutor-book-content-learning-objectives() {
 
+  .os-chapter-objective:not(:last-of-type) {
+    & + & {
+      .learning-objective {
+        [data-type=abstract] {
+          margin-bottom: 20px;
+        }
+      }
+    }
+  }
+
   .learning-objectives,
   [data-type=abstract] {
 
@@ -9,12 +19,9 @@
     p {
       display: none;
     }
-
-    width: 100%;
-    min-height: 100px;
     @include book-content-full-width();
 
-    padding: $tutor-book-padding-vertical;
+    padding-left: $tutor-book-padding-vertical;
     border-bottom: 1px solid $border-color;
     margin-bottom: $tutor-book-padding-vertical;
 

diff --git a/tutor/resources/styles/book-content/splash-image.scss b/tutor/resources/styles/book-content/splash-image.scss
@@ -1,10 +1,20 @@
 @mixin tutor-book-content-splash-image() {
 
+  .os-chapter-objective {
+    .splash {
+      padding-bottom: 0;
+    }
+  }
+
   // splash elements are full width without margin or surrounding padding
   .splash {
     @include book-content-full-width();
     margin-bottom: 2rem;
 
+//    &:last-of-type {
+      padding-bottom: 2rem;
+//    }
+
     img {
       border: 0;
       margin: 0;

diff --git a/tutor/resources/styles/book-content/theming-mixins.scss b/tutor/resources/styles/book-content/theming-mixins.scss
@@ -1,5 +1,6 @@
 @mixin tutor-book-theme-learning-objectives($background, $theme-accent, $text-color) {
 
+  [data-type="abstract"],
   .learning-objectives.splash {
     background: $background;
     color: $text-color;
@@ -11,6 +12,7 @@
     & + *:not(.splash) {
       margin-top: 2rem;
     }
+//    & +
   }
 
 }

diff --git a/tutor/src/components/book-page.js b/tutor/src/components/book-page.js
@@ -162,11 +162,21 @@ class BookPage extends React.Component {
   }
 
   insertSplash(root) {
-    const splashFigure = root.querySelector(`${LEARNING_OBJECTIVE_SELECTORS} + figure, [data-type="document-title"] + .os-figure`);
+    let splashFigure = root.querySelector(`${LEARNING_OBJECTIVE_SELECTORS} + figure, [data-type="document-title"] + .os-figure`);
+    if (!splashFigure) { return; }
+
     // abort if it already has a splash element
-    if (splashFigure && !splashFigure.querySelector('.splash')) {
+    if (!splashFigure.querySelector('.splash')) {
       splashFigure.classList.add('splash');
     }
+
+    while (
+      (splashFigure = splashFigure.nextSibling) &&
+        (!splashFigure.matches || splashFigure.matches('.os-figure'))
+    ) {
+      // text nodes will not have classList
+      if (splashFigure.classList) { splashFigure.classList.add('splash'); }
+    }
   }
 
   insertCanonicalLink() {

diff --git a/tutor/src/components/notes.js b/tutor/src/components/notes.js
@@ -372,6 +372,7 @@ class NotesWidget extends React.Component {
   }
 
   renderSummaryPage = () => {
+    console.log("RENDER")
     return (
       <SummaryPage
         notes={this.props.course.notes}

diff --git a/tutor/src/components/notes/summary-page.jsx b/tutor/src/components/notes/summary-page.jsx
@@ -55,15 +55,12 @@ class NoteSummaryPage extends React.Component {
     }
   }
 
-  componentWillMount() {
-    this.resetCurrentChapterSection();
-  }
-
   @computed get currentChapterSection() {
     return this.props.page.chapter_section;
   }
 
   componentDidMount() {
+    this.resetCurrentChapterSection();
     this.prepareFocus();
   }
 

diff --git a/tutor/src/screens/task/styles.scss b/tutor/src/screens/task/styles.scss
@@ -6,7 +6,10 @@
 .task-screen {
   @include book-page();
   .book-page {
-    padding: $tutor-book-padding-vertical $tutor-book-padding-horizontal;
+    padding: 0 $tutor-book-padding-horizontal;
+    .os-chapter-outline {
+      display: none;
+    }
   }
 
   .exercise-step {