From 83ad950887d96377d01c9444d95ae5e5abb6245c Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 1 Feb 2013 20:48:59 -0500 Subject: [PATCH] studio - revised course nav: plumbed in current html and scss progress into header --- cms/static/js/base.js | 15 ++ cms/static/sass/_base.scss | 13 +- cms/static/sass/_header.scss | 413 +++++++++++++++++++++++------- cms/static/sass/_variables.scss | 6 + cms/templates/base.html | 4 +- cms/templates/widgets/header.html | 124 ++++++--- common/static/sass/_mixins.scss | 17 +- 7 files changed, 465 insertions(+), 127 deletions(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 41c1ee3cdb..7c7e0f2bfd 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -39,6 +39,21 @@ $(document).ready(function() { $('.unit .item-actions .delete-button').bind('click', deleteUnit); $('.new-unit-item').bind('click', createNewUnit); + // nav-related + $('body').addClass('js'); + + $('.nav-dropdown .nav-item .title').click(function(e){ + + $subnav = $(this).parent().find('.nav-sub'); + $title = $(this).parent().find('.title'); + + e.preventDefault(); + $('.nav-dropdown .nav-item .title').removeClass('is-selected'); + $('.nav-dropdown .nav-item .nav-sub').removeClass('is-shown'); + $title.toggleClass('is-selected'); + $subnav.toggleClass('is-shown'); + }); + // toggling overview section details $(function(){ if($('.courseware-section').length > 0) { diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 6e5c547b87..7c017ab76e 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -6,7 +6,7 @@ body { min-width: 980px; - background: rgb(240, 241, 245); + background: $m-gray-l; font-size: 16px; line-height: 1.6; color: $baseFontColor; @@ -42,6 +42,12 @@ h1 { margin-bottom: 30px; } +.wrapper { + @include clearfix(); + @include box-sizing(border-box); + width: 100%; +} + .main-wrapper { position: relative; margin: 0 40px; @@ -417,4 +423,9 @@ body.show-wip { font-size: 20px; color: rgba(0, 0, 0, 0.85); } +} + +// basic utility +.sr { + @include text-sr(); } \ No newline at end of file diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss index e031e16f50..9c4b10b0b7 100644 --- a/cms/static/sass/_header.scss +++ b/cms/static/sass/_header.scss @@ -1,109 +1,348 @@ -body.no-header { - .primary-header { - display: none; - } +// header +.wrapper-header { + margin: 0 0 ($baseline*1.5) 0; + padding: $baseline; + border-bottom: 1px solid tint($m-gray, 50%); + @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); + background: $white; + height: 76px; + position: relative; + width: 100%; + z-index: 10; + + a { + color: $baseFontColor; + display: block; + + &:hover, &:active { + color: $blue; + } + } } -@mixin active { - @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); - background-color: rgba(255, 255, 255, .3); - @include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset); - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); +.header { + @include clearfix(); + max-width: 1280px; + margin: 0 auto; + color: $lightGrey; } -.primary-header { - width: 100%; - margin-bottom: 30px; +.branding, .info-course, .nav-course, .nav-account { + display: inline-block; + vertical-align: top; +} - &.active-tab-courseware #courseware-tab { - @include active; - } +.branding, .info-course, .nav-course { + margin: 0 ($baseline*0.75) 0 0; +} - &.active-tab-assets #assets-tab { - @include active; - } - - &.active-tab-pages #pages-tab { - @include active; - } +.branding { + position: relative; + padding-right: 15px; - &.active-tab-users #users-tab { - @include active; - } + a { + @include text-hide(); + display: block; + width: 164px; + height: 32px; + background: transparent url('../img/logo-edx-studio.png') 0 0 no-repeat; + } - &.active-tab-settings #settings-tab { - @include active; - } + &:before { + @extend .faded-vertical-divider; + content: ""; + display: block; + height: 50px; + position: absolute; + right: 1px; + top: -8px; + width: 1px; + } - &.active-tab-import #import-tab { - @include active; - } + &:after { + @extend .faded-vertical-divider-light; + content: ""; + display: block; + height: 50px; + position: absolute; + right: 0px; + top: -12px; + width: 1px; + } +} - &.active-tab-export #export-tab { - @include active; - } +.info-course { + position: relative; + max-width: 500px; + min-width: 200px; + width: 23%; + padding-right: 15px; + font-size: 14px; - .drop-icon { - margin-left: 5px; - font-size: 11px; - } + &:before { + @extend .faded-vertical-divider; + content: ""; + display: block; + height: 50px; + position: absolute; + right: 1px; + top: -8px; + width: 1px; + } - .settings-icon { - font-size: 18px; - line-height: 18px; - } + &:after { + @extend .faded-vertical-divider-light; + content: ""; + display: block; + height: 50px; + position: absolute; + right: 0px; + top: -12px; + width: 1px; + } - .class-nav-bar { - clear: both; - @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); - background-color: $lightBluishGrey; - @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); - } + .course-number, .course-title { + display: block; + } - .class-nav { - @include clearfix; + .course-number { + font-size: 12px; + } - a { - float: left; - display: inline-block; - padding: 15px 25px 17px; - font-size: 15px; - color: #3c3c3c; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); + .course-title { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 16px; + font-weight: 600; - &:hover { - @include linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)); - } - } + } +} - li { - float: left; - } - } +.nav-course { + width: 275px; + margin-top: -($baseline/4); + font-size: 14px; - .class { - @include clearfix; - height: 100%; - font-size: 12px; - color: rgb(163, 171, 184); - @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1)); - background-color: rgb(47, 53, 63); + ol { + @include clearfix(); + } - a { - display: inline-block; - height: 20px; - padding: 5px 10px 6px; - color: rgb(163, 171, 184); - } + .nav-item { + display: inline-block; + vertical-align: bottom; + margin: 0 ($baseline/2) 0 0; - .home { - position: relative; - top: 1px; - } + &:last-child { + margin-right: 0; + } - .log-out { - position: relative; - top: 3px; - } - } + .title { + display: block; + padding: 5px; + text-transform: uppercase; + + &:hover, &:active { + color: $blue; + } + + .label-prefix { + display: block; + font-size: 11px; + } + + .ss-icon { + + } + + &.is-selected { + color: $blue; + } + } + + // current state + &.is-current { + + .title { + color: $blue; + } + } + + // specific nav items + &.nav-course-courseware { + } + + &.nav-course-settings { + } + + &.nav-course-tools { + } + } +} + +.nav-account { + float: right; + max-width: 300px; + min-width: 175px; + width: 20%; + margin-top: 10px; + font-size: 14px; + text-align: right; + + .nav-account-username { + .ss-icon { + display: inline-block; + vertical-align: middle; + margin-right: 3px; + font-size: 12px; + } + + .account-username { + display: inline-block; + width: 80%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } +} + +// dropdown UI +.nav-dropdown { + + .nav-item { + position: relative; + } + + .nav-sub { + @include border-radius(2px); + position: absolute; + top: 30px; + width: 125px; + border: 1px solid tint($m-gray, 50%); + padding: ($baseline/4) ($baseline/2); + @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); + background: $white; + + li { + margin: 0 0 ($baseline/4) 0; + border-bottom: 1px solid tint($m-gray, 75%); + padding: 0 0($baseline/4) 0; + font-size: 13px; + + &:last-child { + margin-bottom: 0; + border-bottom: none; + padding-bottom: 0; + } + + a { + display: block; + } + } + + // arrows + &:after, &:before { + + } + + &:after { + + } + + &:before { + + } + } + + // vendor + .arrow_box { + position: relative; + background: #fff; + border: 1px solid #a1a1a1; + } + .arrow_box:after, .arrow_box:before { + bottom: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .arrow_box:after { + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #fff; + border-width: 10px; + left: 50%; + margin-left: -10px; + } + .arrow_box:before { + border-color: rgba(161, 161, 161, 0); + border-bottom-color: #a1a1a1; + border-width: 11px; + left: 50%; + margin-left: -11px; + } + + // specific navs + &.nav-account { + + .nav-sub { + right: 0; + text-align: left; + } + } + + &.nav-course { + + .nav-sub { + left: -5px; + } + + .nav-course-courseware { + + .nav-sub { + top: 50px; + } + } + + .nav-course-settings { + + .nav-sub { + top: 50px; + } + } + + .nav-course-tools { + + .nav-sub { + + } + } + } +} + +// js enabled +.js { + + .nav-dropdown { + + .nav-item .title { + cursor: pointer; + } + } + + .nav-sub { + @include transition (opacity 1.0s ease-in-out 0s); + opacity: 0; + pointer-events: none; + + &.is-shown { + opacity: 1.0; + pointer-events: auto; + } + } } \ No newline at end of file diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index a783abeaeb..18f2f5b22d 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -1,3 +1,5 @@ +$baseline: 20px; + $gw-column: 80px; $gw-gutter: 20px; @@ -35,3 +37,7 @@ $disabledGreen: rgb(124, 206, 153); $darkGreen: rgb(52, 133, 76); $lightBluishGrey: rgb(197, 207, 223); $lightBluishGrey2: rgb(213, 220, 228); + +// new colors - progress for re-org +$m-gray-l: rgb(247, 247, 247); +$m-gray: rgb(67,67,67); diff --git a/cms/templates/base.html b/cms/templates/base.html index 5b25746a0f..7c51fd15e2 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -9,8 +9,8 @@ <%static:css group='base-style'/> - + <%block name="title"></%block> @@ -29,8 +29,8 @@ - + <%static:js group='main'/> <%static:js group='module-js'/> diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index 5f41452339..d0f172ad55 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -1,40 +1,94 @@ <%! from django.core.urlresolvers import reverse %> -<% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %> -
-
-
-
- % if context_course: - <% ctx_loc = context_course.location %> - › - ${context_course.display_name} › - % endif -
- -
- ${ user.username } - % if user.is_authenticated(): - - % else: - Log in - % endif -
-
-
- -
+ + % if user.is_authenticated(): + + % else: + + % endif + + \ No newline at end of file diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 375ce20b92..a10d4bdcdd 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -7,12 +7,25 @@ @return $body-line-height * $amount; } -@mixin hide-text() { +// image-replacement hidden text +@mixin text-hide() { text-indent: -100%; white-space: nowrap; overflow: hidden; } +// hidden elems - screenreaders +@mixin text-sr() { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + @mixin vertically-and-horizontally-centered ( $height, $width ) { left: 50%; margin-left: -$width / 2; @@ -21,4 +34,4 @@ min-width: $width; position: absolute; top: 150px; -} +} \ No newline at end of file