diff --git a/cms/static/img/edx-studio-large.png b/cms/static/img/edx-studio-large.png deleted file mode 100644 index d3ea3382a8..0000000000 Binary files a/cms/static/img/edx-studio-large.png and /dev/null differ diff --git a/cms/static/img/edx-studio-logo-small.png b/cms/static/img/edx-studio-logo-small.png deleted file mode 100644 index 728a3f81e0..0000000000 Binary files a/cms/static/img/edx-studio-logo-small.png and /dev/null differ diff --git a/cms/static/img/logo-edx-studio-white.png b/cms/static/img/logo-edx-studio-white.png deleted file mode 100644 index 3e3ee63622..0000000000 Binary files a/cms/static/img/logo-edx-studio-white.png and /dev/null differ diff --git a/cms/static/img/logo-edx-studio.png b/cms/static/img/logo-edx-studio.png index 006194a195..bad6af1697 100644 Binary files a/cms/static/img/logo-edx-studio.png and b/cms/static/img/logo-edx-studio.png differ diff --git a/cms/static/js/base.js b/cms/static/js/base.js index d1cffdc427..c2f401c77e 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -56,11 +56,11 @@ $(document).ready(function() { // nav - dropdown related $body.click(function(e) { - $('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown'); - $('.nav-dropdown .nav-item .title').removeClass('is-selected'); + $('.nav-dd .nav-item .wrapper-nav-sub').removeClass('is-shown'); + $('.nav-dd .nav-item .title').removeClass('is-selected'); }); - $('.nav-dropdown .nav-item .title').click(function(e) { + $('.nav-dd .nav-item .title').click(function(e) { $subnav = $(this).parent().find('.wrapper-nav-sub'); $title = $(this).parent().find('.title'); @@ -71,8 +71,8 @@ $(document).ready(function() { $subnav.removeClass('is-shown'); $title.removeClass('is-selected'); } else { - $('.nav-dropdown .nav-item .title').removeClass('is-selected'); - $('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown'); + $('.nav-dd .nav-item .title').removeClass('is-selected'); + $('.nav-dd .nav-item .wrapper-nav-sub').removeClass('is-shown'); $title.addClass('is-selected'); $subnav.addClass('is-shown'); } diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index bad87952d6..5994a8dbad 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -47,7 +47,7 @@ $gray-d2: shade($gray,40%); $gray-d3: shade($gray,60%); $gray-d4: shade($gray,80%); -$blue: rgb(85, 151, 221); +$blue: rgb(0, 159, 230); $blue-l1: tint($blue,20%); $blue-l2: tint($blue,40%); $blue-l3: tint($blue,60%); diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index e0b4a004ec..8c43934a44 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -135,7 +135,48 @@ // ==================== -// layout-based buttons +// simple dropdown button styling - should we move this elsewhere? +.btn-dd { + @extend .btn; + @extend .btn-pill; + padding:($baseline/4) ($baseline/2); + border-width: 1px; + border-style: solid; + border-color: transparent; + text-align: center; + + &:hover, &:active { + @extend .fake-link; + border-color: $gray-l3; + } + + &.current, &.active, &.is-selected { + @include box-shadow(inset 0 1px 2px 1px $shadow-l1); + border-color: $gray-l3; + } +} + +// layout-based buttons - nav dd +.btn-dd-nav-primary { + @extend .btn-dd; + background: $white; + border-color: $white; + color: $gray-d1; + + &:hover, &:active { + background: $white; + color: $blue-s1; + } + + &.current, &.active { + background: $white; + color: $gray-d4; + + &:hover, &:active { + color: $blue-s1; + } + } +} // ==================== diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss index 247bb35b81..026ca96274 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -3,448 +3,310 @@ .wrapper-header { @extend .depth3; - margin: 0; - padding: $baseline; - border-bottom: 1px solid $gray; - @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.2)); - background: $white; - height: 76px; + @include box-shadow(0 1px 2px 0 $shadow-l1); position: relative; width: 100%; - - a { - color: $baseFontColor; - display: block; - - &:hover, &:active { - color: $blue; - } - } + margin: 0; + padding: 0 $baseline; + background: $white; header.primary { + @include box-sizing(border-box); @include clearfix(); max-width: $fg-max-width; min-width: $fg-min-width; width: flex-grid(12); margin: 0 auto; - color: $gray-l1; } - nav .nav-item { - display: inline-block; - } -} + // ==================== -// ==================== + // basic layout -// basic layout -.wrapper-left, .wrapper-right { - @include box-sizing(border-box); -} - -.wrapper-left { - width: flex-grid(10, 12); - float: left; - margin-right: flex-gutter(); -} - -.wrapper-right { - width: flex-grid(2, 12); - float: right; -} - -// ==================== - -// specific elements - branding -.branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch { - display: inline-block; - vertical-align: top; -} - -.branding { - position: relative; - margin: 0 ($baseline/2) 0 0; - padding-right: ($baseline*0.75); - - a { - @extend .text-hide; - display: block; - width: 164px; - height: 32px; - background: transparent url('../img/logo-edx-studio.png') 0 0 no-repeat; - } -} - -// ==================== - -// specific elements - course name/info -.info-course { - @include font-size(14); - position: relative; - margin: -3px ($baseline/2) 0 0; - padding-right: ($baseline*0.75); - - &:before { - @extend .faded-vertical-divider; - content: ""; - display: block; - height: 50px; - position: absolute; - right: 1px; - top: -8px; - width: 1px; - } - - &:after { - @extend .faded-vertical-divider-light; - content: ""; - display: block; - height: 50px; - position: absolute; - right: 0px; - top: -12px; - width: 1px; - } - - .course-number, .course-org { - @include font-size(12); - display: inline-block; - max-width: 70px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - line-height: 1.3; - } - - .course-org { - margin-right: ($baseline/4); - max-width: 140px; - } - - .course-title { - display: block; - width: 100%; - max-width: 220px; - overflow: hidden; - margin-top: -4px; - white-space: nowrap; - text-overflow: ellipsis; - @include font-size(16); - font-weight: 600; - } -} - -// ==================== - -// specific elements - course nav -.nav-course { - width: 290px; - @extend .t-copy-sub1; - margin-top: -($baseline/4); - - > ol > .nav-item { - vertical-align: bottom; - margin: 0 ($baseline/2) 0 0; - - &:last-child { - margin-right: 0; - } - - .title { - display: block; - padding: 0 ($baseline/4); - text-transform: uppercase; - font-weight: 600; - color: $gray-d3; - - .label-prefix { - @include font-size(11); - display: block; - font-weight: 400; - } - } - - // specific nav items - &.nav-course-courseware { - } - - &.nav-course-settings { - } - - &.nav-course-tools { - } - } -} - -// ==================== - -// specific elements - account-based nav -.nav-account { - width: 100%; - margin-top: ($baseline*0.75); - @include font-size(14); - text-align: right; - - .nav-account-username { - width: 100%; - - .icon-user { - display: inline-block; - vertical-align: middle; - margin-right: 3px; - @include font-size(12); - } - - .account-username { - display: inline-block; - vertical-align: middle; - width: 80%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - .icon-expand { - display: inline-block; - vertical-align: middle; - } - } -} - -// ==================== - -// UI - dropdown -.nav-dropdown { - - .nav-item { - position: relative; - - .icon-caret-down { - @include font-size(14); - @include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out); - display: inline-block; - vertical-align: middle; - margin-left: 2px; - opacity: 0.5; - color: $gray-l2; - } - - &:hover { - - .icon-caret-down { - color: $blue; - opacity: 1.0; - } - } - } - - .wrapper-nav-sub { - position: absolute; - left: -7px; - top: 47px; - width: 140px; - opacity: 0.0; - pointer-events: none; - } - - .nav-sub { - @include border-radius(2px); - @include box-sizing(border-box); - @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); - position: relative; - width: 100%; - border: 1px solid $gray-l2; - padding: ($baseline/4) ($baseline/2); + .wrapper-l, .wrapper-r { background: $white; - - &:after, &:before { - bottom: 100%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - } - - &:after { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: #fff; - border-width: 5px; - right: 3px; - margin-left: -5px; - } - - &:before { - border-color: rgba(178, 178, 178, 0); - border-bottom-color: $gray-l2; - border-width: 6px; - right: 3px; - margin-left: -6px; - } - - .nav-item { - display: block; - margin: 0 0 ($baseline/4) 0; - border-bottom: 1px solid $gray-l5; - padding: 0 0($baseline/4) 0; - @include font-size(13); - - &:last-child { - margin-bottom: 0; - border-bottom: none; - padding-bottom: 0; - } - - a { - display: block; - } - } } - // UI - dropdown - specific navs - &.nav-account { - - .wrapper-nav-sub { - top: 27px; - left: auto; - right: -13px; - width: 110px; - } - - .nav-sub { - text-align: left; - - .icon-expand { - top: -2px; - } - } - - .nav-sub:after { - left: auto; - right: 11px; - } - - .nav-sub:before { - left: auto; - right: 10px; - } + .wrapper-l { + float: left; + width: flex-grid(7,12); } - &.nav-course { - - .nav-course-courseware { - - .nav-sub:after { - left: 88px; - } - - .nav-sub:before { - left: 88px; - } - } - - .nav-course-settings { - - .nav-sub:after { - left: 88px; - } - - .nav-sub:before { - left: 88px; - } - } - - .nav-course-tools { - - .wrapper-nav-sub { - top: ($baseline*1.5); - width: 100px; - } - - .nav-sub:after { - left: 68px; - } - - .nav-sub:before { - left: 68px; - } - } - } -} - -// ==================== - -// STATE: is-signed in -.is-signedin { - - &.course .branding { - - &:before { - @extend .faded-vertical-divider; - content: ""; - display: block; - height: 50px; - position: absolute; - right: 1px; - top: -8px; - width: 1px; - } - - &:after { - @extend .faded-vertical-divider-light; - content: ""; - display: block; - height: 50px; - position: absolute; - right: 0px; - top: -12px; - width: 1px; - } - } -} - -// ==================== - -// STATE: not signed in -.not-signedin { - - .wrapper-left { - width: flex-grid(4, 12); - } - - .wrapper-right { - width: flex-grid(8, 12); - } - - // STATE: not signed in - unauthenticated nav - .nav-not-signedin { + .wrapper-r { float: right; - margin-top: ($baseline/4); + width: flex-grid(4,12); + text-align: right; + } - .nav-item { - @include font-size(16); + .branding, .info-course, .nav-course, .nav-account, .nav-pitch { + @include box-sizing(border-box); + display: inline-block; + vertical-align: middle; + } + + .nav-account { + width: 100%; + } + + // basic layout - nav items + nav { + + > ol > .nav-item { + @extend .t-action3; + display: inline-block; vertical-align: middle; - margin: 0 $baseline 0 0; + font-weight: 600; &:last-child { margin-right: 0; } + } - .action { - margin-top: -($baseline/4); - display: inline-block; - padding: ($baseline/4) ($baseline/2); + .nav-item a { + color: $gray-d1; + + &:hover { + color: $blue-s1; + } + } + } + + // basic layout - dropdowns + .nav-dd { + + .title { + @extend .t-action2; + @extend .btn-dd-nav-primary; + @include transition(all 0.25s ease-in-out 0); + + .label, .icon-caret-down { + + } + + .label { + + } + + .icon-caret-down { + opacity: 0.25; + } + + &:hover { + + .icon-caret-down { + opacity: 1.0; + } + } + + .nav-sub .nav-item { + + [class^="icon-"] { + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); + } + } + } + } + + // ==================== + + // specific elements - branding + .branding { + padding: ($baseline*0.75) 0; + + a { + display: block; + + img { + width: 100%; + display: block; + } + } + } + + // ==================== + + // specific elements - course name/info + .info-course { + margin-right: flex-gutter(); + border-right: 1px solid $gray-l4; + padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0; + + .course-org, .course-number { + @extend .t-action4; + display: inline-block; + vertical-align: middle; + max-width: 45%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + opacity: 0.75; + } + + .course-org { + margin-right: ($baseline/4); + } + + .course-title { + @extend .t-action2; + display: block; + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-weight: 600; + } + + // entire link + .course-link { + @include transition(color 0.25s ease-in-out); + display: block; + color: $gray-d1; + + &:hover { + color: $blue-s1; + } + } + } + + // ==================== + + // specific elements - course nav + .nav-course { + padding: ($baseline*0.75) 0; + } + + // ==================== + + // specific elements - account-based nav + .nav-account { + position: relative; + padding: ($baseline*0.75) 0; + + .nav-sub { + text-align: left; + } + + .nav-account-help { + + .wrapper-nav-sub { + width: ($baseline*10); } } - // STATE: not signed in - specific items - .nav-not-signedin-help { + .nav-account-user { + .title { + max-width: ($baseline*6.5); + + > .label { + display: inline-block; + max-width: 85%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + } + } + + // ==================== + + // specific elements - pitch/how it works nav + .nav-pitch { + position: relative; + padding: ($baseline*0.75) 0; + + .nav-sub { + text-align: left; + } + } +} + +// ==================== + +// CASE: user signed in +.is-signedin { + + .wrapper-l { + width: flex-grid(9,12); + } + + .wrapper-r { + width: flex-grid(3,12); + } + + .branding { + width: 20%; + margin-right: 2%; + } + + .nav-account { + top: ($baseline/4); + } +} + +// ==================== + +// CASE: in course { +.is-signedin.course { + + .wrapper-header { + + .wrapper-l { + width: flex-grid(9,12); } - .nav-not-signedin-signup { - margin-right: ($baseline/2); + .wrapper-r { + width: flex-grid(3,12); + } + + .branding { + width: 20%; + margin-right: 2%; + } + + .info-course { + width: 25%; + margin-right: 2%; + } + + .nav-course { + width: 45%; + } + } +} + +// ==================== + +// CASE: user not signed in +.not-signedin { + + .wrapper-header { + + .wrapper-l { + width: flex-grid(2,12); + } + + .wrapper-r { + width: flex-grid(10,12); + } + + .branding { + width: 100%; + } + + .nav-pitch { + top: ($baseline/4); + + .nav-item { + margin-right: ($baseline/2); + + &:last-child { + margin-right: 0; + } + } .action-signup { @include blue-button; @@ -454,9 +316,6 @@ text-transform: uppercase; font-weight: 600; } - } - - .nav-not-signedin-signin { .action-signin { @include white-button; @@ -505,12 +364,13 @@ body.course.advanced .nav-course-settings-advanced, // course tools body.course.import .nav-course-tools .title, body.course.export .nav-course-tools .title, +body.course.checklists .nav-course-tools .title, body.course.import .nav-course-tools-import, body.course.export .nav-course-tools-export, +body.course.checklists .nav-course-tools-checklists, { - color: $blue; a { @@ -518,52 +378,3 @@ body.course.export .nav-course-tools-export, pointer-events: none; } } - -body.signup .nav-not-signedin-signin { - - a { - background-color: #d9e3ee; - color: #6d788b; - } -} - -body.signin .nav-not-signedin-signup { - - a { - background-color: #62aaf5; - color: #fff; - } -} - -// ==================== - -// STATE: js enabled -.js { - - .nav-dropdown { - - .nav-item .title { - outline: 0; - cursor: pointer; - - &:hover, &:active, &.is-selected { - color: $blue; - - .icon-expand { - color: $blue; - } - } - } - } - - .wrapper-nav-sub { - @include transition (opacity 1.0s ease-in-out 0s); - opacity: 0.0; - pointer-events: none; - - &.is-shown { - opacity: 1.0; - pointer-events: auto; - } - } -} diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss index 516a19c7ad..4a6aacc529 100644 --- a/cms/static/sass/elements/_navigation.scss +++ b/cms/static/sass/elements/_navigation.scss @@ -18,20 +18,161 @@ nav { // ==================== -// primary - -// ==================== - -// right hand side - -// ==================== - // tabs // ==================== // dropdown +.nav-dd { -// ==================== + .title { -// + .label, .icon-caret-down { + display: inline-block; + vertical-align: middle; + } + + .ui-toggle-dd { + @include transition(rotate .25s ease-in-out .25s); + margin-left: ($baseline/10); + display: inline-block; + vertical-align: middle; + } + + // dropped down state + &.is-selected { + + .ui-toggle-dd { + @include transform(rotate(-180deg)); + @include transform-origin(50% 50%); + } + } + } + + .nav-item { + position: relative; + + &:hover { + + } + } + + .wrapper-nav-sub { + @include transition (opacity 1.0s ease-in-out 0s); + position: absolute; + top: ($baseline*2.5); + opacity: 0.0; + pointer-events: none; + width: ($baseline*8); + + + // dropped down state + &.is-shown { + opacity: 1.0; + pointer-events: auto; + } + } + + .nav-sub { + @include border-radius(2px); + @include box-sizing(border-box); + @include box-shadow(0 1px 1px $shadow-l1); + position: relative; + width: 100%; + border: 1px solid $gray-l3; + padding: ($baseline/2) ($baseline*0.75); + background: $white; + + &:after, &:before { + bottom: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + // ui triangle/nub + &:after { + border-color: rgba(255, 255, 255, 0); + border-bottom-color: $white; + border-width: 10px; + } + + &:before { + border-color: rgba(178, 178, 178, 0); + border-bottom-color: $gray-l3; + border-width: 11px; + } + + .nav-item { + @extend .t-action3; + display: block; + margin: 0 0 ($baseline/4) 0; + border-bottom: 1px solid $gray-l5; + padding: 0 0($baseline/4) 0; + font-weight: 500; + + &:last-child { + margin-bottom: 0; + border-bottom: none; + padding-bottom: 0; + } + + a { + display: block; + + &:hover, &:active { + color: $blue-s1; + } + } + } + } + + // CASE: left-hand side arrow/dd + &.ui-left { + + .wrapper-nav-sub { + left: 0; + } + + .nav-sub { + text-align: left; + + // ui triangle/nub + &:after { + left: $baseline; + margin-left: -10px; + } + + &:before { + left: $baseline; + margin-left: -11px; + } + } + } + + // CASE: right-hand side arrow/dd + &.ui-right { + + .wrapper-nav-sub { + left: none; + right: 0; + } + + .nav-sub { + + // ui triangle/nub + &:after { + right: $baseline; + margin-right: -10px; + } + + &:before { + right: $baseline; + margin-right: -11px; + } + } + } +} diff --git a/cms/static/sass/elements/_tender-widget.scss b/cms/static/sass/elements/_tender-widget.scss index b4113732f0..b00d38f1ce 100644 --- a/cms/static/sass/elements/_tender-widget.scss +++ b/cms/static/sass/elements/_tender-widget.scss @@ -11,7 +11,7 @@ @include box-shadow(0 2px 3px $shadow); height: ($baseline*35) !important; background: $white !important; - border: 1px solid $gray; + border: 2px solid $blue; } #tender_window { @@ -23,11 +23,12 @@ } #tender_closer { - color: $blue-l2 !important; + color: $white-t2 !important; text-transform: uppercase; + top: 16px !important; &:hover { - color: $blue-l4 !important; + color: $white !important; } } @@ -42,15 +43,15 @@ font-family: 'Open Sans', sans-serif; } -.widget-layout .search, -.widget-layout .tabs, -.widget-layout .footer, +.widget-layout .search, +.widget-layout .tabs, +.widget-layout .footer, .widget-layout .header h1 a { display: none; } .widget-layout .header { - background: rgb(85, 151, 221); + background: rgb(0, 159, 230); padding: 10px 20px; } @@ -264,4 +265,4 @@ .widget-layout .form-actions .btn-post_topic:hover, .widget-layout .form-actions .btn-post_topic:active { background-color: #16ca57; color: #fff; -} \ No newline at end of file +} diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss index cb6df23c3c..fdd2eec6bf 100644 --- a/cms/static/sass/views/_index.scss +++ b/cms/static/sass/views/_index.scss @@ -72,14 +72,7 @@ body.index { } .logo { - @extend .text-hide; - position: relative; - top: 3px; - display: inline-block; - vertical-align: baseline; - width: 282px; - height: 57px; - background: transparent url('../img/logo-edx-studio-white.png') 0 0 no-repeat; + font-weight: 600; } .tagline { diff --git a/cms/templates/asset_index.html b/cms/templates/asset_index.html index abbc5bb1b4..56788ea399 100644 --- a/cms/templates/asset_index.html +++ b/cms/templates/asset_index.html @@ -40,7 +40,7 @@

- Course Content + Content > Files & Uploads

diff --git a/cms/templates/course_info.html b/cms/templates/course_info.html index b13a024fde..a1ab3e694c 100644 --- a/cms/templates/course_info.html +++ b/cms/templates/course_info.html @@ -44,7 +44,7 @@

- Course Content + Content > Course Updates

diff --git a/cms/templates/edit-tabs.html b/cms/templates/edit-tabs.html index 77eb1cb9b8..7fa1510065 100644 --- a/cms/templates/edit-tabs.html +++ b/cms/templates/edit-tabs.html @@ -19,7 +19,7 @@

- Course Content + Content > Static Pages

diff --git a/cms/templates/overview.html b/cms/templates/overview.html index a504d50019..8a52542a04 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -121,7 +121,7 @@

- Course Content + Content > Course Outline

@@ -165,9 +165,9 @@ This section has not been released. Schedule %else: - Will Release: + Will Release: ${date_utils.get_default_time_display(section.lms.start)} - Edit %endif
diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index 3c8a598b5e..a699b976cf 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -1,64 +1,85 @@ <%! from django.core.urlresolvers import reverse %> -