updated container header styling and exposed sidebar back to its location.…

updated container header styling and exposed sidebar back to its location. includes some javascript to render tooltips on overflowed text headers

cms/static/js/base.js

@@ -66,6 +66,9 @@ domReady(function() {
         }
     });
 
+    // container navigation links - tooltips on overflow
+    $('a.navigation-link').bind('mouseenter', overflowTooltip);
+
     // general link management - new window/tab
     $('a[rel="external"]').attr('title', gettext('This link will open in a new browser window/tab')).bind('click', linkNewWindow);
 
@@ -117,6 +120,12 @@ domReady(function() {
     IframeUtils.iframeBinding();
 });
 
+function overflowTooltip(e) {
+    (e).preventDefault();
+    if ($(this).offsetWidth < this.scrollWidth && !this.attr('data-tooltip'))
+        $this.attr('data-tooltip', $this.text()); 
+}
+
 function smoothScrollLink(e) {
     (e).preventDefault();
 

cms/static/sass/_base.scss

@@ -56,7 +56,7 @@ h1 {
   font-weight: 600;
   color: $gray-d3;
 
-  .subtitle {
+  .navigation, .navigation-divider, .subtitle {
     @extend %t-title7;
     position: relative;
     top: ($baseline/4);
@@ -323,6 +323,41 @@ p, ul, ol, dl {
         bottom: -($baseline*1.5);
       }
     }
+
+    // layout with actions
+    &.has-navigation {
+
+      .navigation-link {
+        display: inline-block;
+        overflow: hidden; 
+        max-width: 150px;
+        color: inherit;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:hover {
+          color: $blue-s1;
+
+          &:after {
+          	color: $gray-l2;
+          }
+        }
+      }
+
+      .navigation-link:after {
+          content: "/";
+          margin: 0px $baseline/4;
+          color: inherit;
+
+          &:hover {
+          	color: inherit;
+          }
+        }
+
+      .nav-actions {
+        bottom: -($baseline*1.5);
+      }
+    }
   }
 
   // page metadata/action bar

cms/static/sass/views/_container.scss

@@ -13,11 +13,6 @@ body.course.container,.view-container {
   }
   //end problem selector reqs
 
-  .main-column {
-    clear: both;
-    float: left;
-    width: 70%;
-  }
 
   .unit-body.published {
     .components > li {
@@ -29,7 +24,10 @@ body.course.container,.view-container {
     }
   }
 
-  .unit-body {
+  .content-primary {
+    clear: both;
+    float: left;
+    width: 70%;
 
     .unit-name-input {
       padding: $baseline 2*$baseline;
@@ -958,7 +956,7 @@ body.unit {
 
 // Unit Page Sidebar
 
-.sidebar {
+.content-supplementary {
 
   label {
     @extend %t-title8;

cms/templates/container.html

@@ -49,10 +49,14 @@ from django.utils.translation import ugettext as _
 
 
 <div class="wrapper-mast wrapper">
-    <header class="mast has-actions has-subtitle">
+    <header class="mast has-actions has-navigation">
         <h1 class="page-header">
-            <small class="subtitle">${_("Content")}</small>
-            <span class="sr">&gt; </span>${_("Container")}
+            <small class="navigation navigation-parents">
+                <a href="#" class="navigation-link navigation-parent-previous">${_("Parent of Unit Page")}</a>
+                <a href="#" class="navigation-link navigation-parent">${_("Unit Page Super Long Title Name Goes Here Yeah Whats Up Parent")}</a>
+            </small>
+            <span class="sr">&gt; </span>
+            <span class="container-page-name">${_("Container")}</span>
         </h1>
 
         <nav class="nav-actions">
@@ -67,8 +71,8 @@ from django.utils.translation import ugettext as _
 </div>
 
 <div class="wrapper-content wrapper">
-    <section class="content">
-        <article class="unit-body window">
+    <section class="content-area">
+        <article class="content-primary window">
             <p class="unit-name-input"><label for="unit-display-name-input">${_("Display Name:")}</label><input type="text" value="${unit.display_name_with_default | h}" id="unit-display-name-input" class="unit-display-name-input" /></p>
             <ol class="components">
                 % for locator in components: