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: