Merge pull request #377 from MITx/feature/tomg/fall-design

wayfinding style changes

lms/static/sass/course/_textbook.scss

@@ -9,6 +9,27 @@ div.book-wrapper {
     ul#booknav {
       font-size: em(14);
 
+      .chapter-number {
+        
+      }
+
+      .chapter {
+        float: left;
+        width: 87%;
+        line-height: 1.4em;
+      }
+
+      .page-number {
+        float: right;
+        width: 12%;
+        font-size: .8em;
+        line-height: 2.1em;
+        text-align: right;
+        color: #9a9a9a;
+        opacity: 0;
+        @include transition(opacity .15s);
+      }
+
       li {
         background: none;
         border-bottom: 0;
@@ -16,9 +37,14 @@ div.book-wrapper {
 
         a {
           padding: 0;
+          @include clearfix;
 
           &:hover {
             background-color: transparent;
+
+            .page-number {
+              opacity: 1;
+            }
           }
         }
 

lms/static/sass/course/base/_extends.scss

@@ -185,3 +185,21 @@ h1.top-header {
 .tran {
   @include transition( all, .2s, $ease-in-out-quad);
 }
+
+.global {
+  h2 {
+    float: left;
+    font-size: 0.9em;
+    font-weight: 600;
+    line-height: 40px;
+    letter-spacing: 0;
+    text-transform: none;
+    text-shadow: 0 1px 0 #fff;
+
+    .provider {
+      font: inherit;
+      font-weight: bold;
+      color: #6d6d6d;
+    }
+  }
+}

lms/templates/navigation.html

@@ -7,11 +7,16 @@
 <header class="global" aria-label="Global Navigation">
   <nav>
     <h1 class="logo"><a href="${reverse('root')}"></a></h1>
-    <ol class="left">
+    
+    %if course:
+      <h2><span class="provider">${course.org}:</span> ${course.number} ${course.title}</h2>
+    %else:
+      <ol class="left">
       <li class="primary">
         <a href="${reverse('courses')}">Find Courses</a>
       </li>
     </ol>
+    %endif
 
   %if user.is_authenticated():
     <ol class="user">

lms/templates/staticbook.html

@@ -75,7 +75,14 @@ $("#open_close_accordion a").click(function(){
           <%def name="print_entry(entry)">
               <li>
                   <a href="javascript:goto_page(${entry.get('page')})">
-                      ${' '.join(entry.get(attribute, '') for attribute in ['chapter', 'name', 'page_label'])}
+                      <span class="chapter">
+                        %if entry.get('chapter'):
+                          <span class="chapter-number">${entry.get('chapter')}.</span> ${entry.get('name')}
+                        %else:
+                          ${entry.get('name')}
+                        %endif
+                      </span>
+                      <span class="page-number">${entry.get('page_label')}</span>
                   </a>
                   % if len(entry) > 0:
                       <ul>