studio - adding introduction areas to all templates and infrastructure for its contnet

cms/static/js/base.js

@@ -41,6 +41,12 @@ $(document).ready(function() {
 
   $('body').addClass('js');
 
+  // lean/simple modal
+  $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' });
+  $('a.action-modal-close').click(function(e){
+    (e).preventDefault();
+  });
+
   // nav - dropdown related
   $body.click(function(e){
     $('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown');

cms/static/sass/_base.scss

@@ -225,7 +225,30 @@ h1 {
 
   .introduction {
     @include font-size(14);
+    width: flex-grid(12);
     margin: 0 0 $baseline 0;
+
+    .copy strong {
+      font-weight: 600;
+    }
+
+    &.has-links {
+      @include clearfix();
+
+      .copy {
+        float: left;
+        width: flex-grid(8,12);
+        margin-right: flex-gutter();
+      }
+
+      .nav-introduction-supplementary {
+        @include font-size(13);
+        float: right;
+        width: flex-grid(4,12);
+        display: block;
+        text-align: right;
+      }
+    }
   }
 }
 
@@ -743,6 +766,72 @@ hr.divide {
 
 // ====================
 
+// js dependant
+body.js {
+
+  // lean/simple modal window
+  .content-modal {
+    @include border-bottom-radius(2px);
+    @include box-sizing(border-box);
+    @include box-shadow(0 2px 4px $shadow-d1);
+    position: relative;
+    display: none;
+    width: 700px;
+    overflow: hidden;
+    border: 1px solid $gray-d1;
+    padding: ($baseline);
+    background: $white;
+
+    .action-modal-close {
+      @include transition(top .25s ease-in-out);
+      @include border-bottom-radius(3px);
+      position: absolute;
+      top: -3px;
+      right: $baseline;
+      padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
+      background: $gray-l3;
+      text-align: center;
+
+      .label {
+        @include text-sr();
+      }
+
+      .ss-icon {
+        @include font-size(18);
+        color: $white;
+      }
+
+      &:hover {
+        background: $blue;
+        top: 0;
+      }
+    }
+
+    img {
+      @include box-sizing(border-box);
+      width: 100%;
+      overflow-y: scroll;
+      padding: ($baseline/10);
+      border: 1px solid $gray-l4;
+    }
+
+    .title {
+      @include font-size(18);
+      margin: 0 0 ($baseline/2) 0;
+      font-weight: 600;
+      color: $gray-d3;
+    }
+
+    .description {
+      @include font-size(13);
+      margin-top: ($baseline/2);
+      color: $gray-l1;
+    }
+  }
+}
+
+// ====================
+
 // works in progress
 body.hide-wip {
 

cms/static/sass/_dashboard.scss

@@ -43,6 +43,7 @@
 		color: #3c3c3c;
 	}
 
+	// view live button
 	.view-live-button {
 		z-index: 10000;
 		position: absolute;

cms/static/sass/_index.scss

@@ -350,67 +350,4 @@
       }
     }
   }
-
-  // js dependant
-  &.js {
-
-    .content-modal {
-      @include border-bottom-radius(2px);
-      @include box-sizing(border-box);
-      @include box-shadow(0 2px 4px $shadow-d1);
-      position: relative;
-      display: none;
-      width: 700px;
-      overflow: hidden;
-      border: 1px solid $gray-d1;
-      padding: ($baseline);
-      background: $white;
-
-      .action-modal-close {
-        @include transition(top .25s ease-in-out);
-        @include border-bottom-radius(3px);
-        position: absolute;
-        top: -3px;
-        right: $baseline;
-        padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
-        background: $gray-l3;
-        text-align: center;
-
-        .label {
-          @include text-sr();
-        }
-
-        .ss-icon {
-          @include font-size(18);
-          color: $white;
-        }
-
-        &:hover {
-          background: $blue;
-          top: 0;
-        }
-      }
-
-      img {
-        @include box-sizing(border-box);
-        width: 100%;
-        overflow-y: scroll;
-        padding: ($baseline/10);
-        border: 1px solid $gray-l4;
-      }
-
-      .title {
-        @include font-size(18);
-        margin: 0 0 ($baseline/2) 0;
-        font-weight: 600;
-        color: $gray-d3;
-      }
-
-      .description {
-        @include font-size(13);
-        margin-top: ($baseline/2);
-        color: $gray-l1;
-      }
-    }
-  }
-}
+}

cms/templates/course_info.html

@@ -60,6 +60,14 @@
     </header>
   </div>
 
+  <div class="wrapper-content wrapper">
+    <section class="content">
+      <div class="introduction">
+        <p clas="copy">Course updates are announcements or notifications you want to share with your class. Other course authors have used them for important exam/date reminders, change in schedules, and to call out any important step students need to take while enrolled in the course.</p>
+      </div>
+    </section>
+  </div>
+
   <div class="main-wrapper">
     <div class="inner-wrapper">
       <div class="course-info-wrapper">

cms/templates/edit-tabs.html

@@ -35,8 +35,15 @@
 
 <div class="wrapper-content wrapper">
   <section class="content">
-    <div class="introduction">
-      <p>On this page, you can add and manage additional pages for your course. These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.</p>
+    <div class="introduction has-links">
+      <p class="copy">Static Pages are additional pages that supplment your Courseware. Other course authors have used them to share a syllabus, external resources, and additional reading.</p>
+      <nav class="nav-introduction-supplementary">
+        <ul>
+          <li class="nav-item">
+            <a rel="modal" href="#preview-lms-staticpages">How do Static Tabs look to students in my course?</a>
+          </li>
+        </ul>
+      </nav>
     </div>
   </section>
 </div>
@@ -44,7 +51,7 @@
 <div class="main-wrapper">
   <div class="inner-wrapper">
     <article class="unit-body">
-          
+      
       <div class="tab-list">
         <ol class='components'>
           % for id in components:
@@ -59,4 +66,17 @@
     </article>
   </div>
 </div>
+
+<div class="content-modal" id="preview-lms-staticpages">
+  <h3 class="title">How Static Pages are Used in Your Course</h3>
+  <figure>
+    <img src="/static/img/preview-lms-staticpages.png" alt="Preview of how Static Pages are used in your course" />
+    <figcaption class="description">These pages will be presented in your course's main navigation alongside Courseware, Course Info, Discussion, etc.</figcaption>
+  </figure>
+
+  <a href="#" rel="view" class="action action-modal-close">
+    <i class="ss-icon ss-symbolicons-block">&#x2421;</i>
+    <span class="label">close modal</span>
+  </a>
+</div>
 </%block>

cms/templates/howitworks.html

@@ -182,18 +182,4 @@
     <span class="label">close modal</span>
   </a>
 </div>
-</%block>
-
-<%block name="jsextra">
-  <script type="text/javascript">
-    (function() {
-
-      // lean modal window
-      $('a[rel*=modal]').leanModal({overlay : 0.50, closeButton: '.action-modal-close' });
-      $('a.action-modal-close').click(function(e){
-        (e).preventDefault();
-      });
-
-    })(this)
-  </script>
 </%block>

cms/templates/index.html

@@ -54,6 +54,14 @@
     </header>
   </div>
 
+  <div class="wrapper-content wrapper">
+    <section class="content">
+      <div class="introduction">
+        <p class="copy"><strong>Welcome, ${ user.username }</strong>. Here are all of the courses you are currently authoring in Studio:</p>
+      </div>
+    </section>
+  </div>
+
   <div class="main-wrapper">
     <div class="inner-wrapper">
       <article class="my-classes">

cms/templates/settings.html

@@ -55,7 +55,7 @@ from contentstore import utils
   <section class="content">
 
     <!-- <div class="introduction">
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
+      <p class="copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
     </div> -->
 
     <article class="content-primary" role="main">

cms/templates/settings_graders.html

@@ -52,7 +52,7 @@ from contentstore import utils
   <section class="content">
 
     <!-- <div class="introduction">
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
+      <p class="copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
     </div> -->
 
     <article class="content-primary" role="main">

cms/templates/widgets/header.html

@@ -17,7 +17,7 @@
       </div>
       
       <nav class="nav-course primary nav-dropdown" role="navigation">
-        <h2 class="sr">PH207x's Navigation:</h2>
+        <h2 class="sr">${context_course.display_name}'s Navigation:</h2>
 
         <ol>
           <li class="nav-item nav-course-courseware">