-
% for locator in components:
diff --git a/cms/static/js/base.js b/cms/static/js/base.js index bc33afc44f..ad0a2761bf 100644 --- a/cms/static/js/base.js +++ b/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(); diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 553c687526..a7aa370adc 100644 --- a/cms/static/sass/_base.scss +++ b/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 diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss index 530f5ae222..bfba5712d3 100644 --- a/cms/static/sass/views/_container.scss +++ b/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; diff --git a/cms/templates/container.html b/cms/templates/container.html index 8073c0f4ff..b5964e4c8f 100644 --- a/cms/templates/container.html +++ b/cms/templates/container.html @@ -49,10 +49,14 @@ from django.utils.translation import ugettext as _