From 2a04eeec4651be3cf0bb9a1a52400f97ec98e6cb Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 27 Jun 2013 16:11:56 -0400 Subject: [PATCH] studio - revises studio nav visually and adds help links --- cms/static/sass/elements/_controls.scss | 29 +++- cms/static/sass/elements/_header.scss | 191 ++++++++++++++++++---- cms/static/sass/elements/_navigation.scss | 138 +++++++++++++++- cms/templates/widgets/header.html | 28 ++-- common/static/sass/_mixins.scss | 21 --- 5 files changed, 337 insertions(+), 70 deletions(-) diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index df09183123..8c43934a44 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -135,12 +135,33 @@ // ==================== -// layout-based buttons -.btn-nav-primary { - @extend .btn-nav-simple; +// 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; + color: $gray-d1; &:hover, &:active { background: $white; diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss index 88a9ef8bd2..1e40555853 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -3,12 +3,12 @@ .wrapper-header { @extend .depth3; - margin: 0; @include box-shadow(0 1px 2px 0 $shadow-l1); - background: $white; position: relative; width: 100%; - padding: $baseline; + margin: 0; + padding: 0 $baseline; + background: $white; header.primary { @include box-sizing(border-box); @@ -48,14 +48,22 @@ margin-right: 0; } } + + .nav-item a { + color: $gray-d1; + + &:hover { + color: $blue-s1; + } + } } - // basic layout - dropdowns - .nav-dd { + // basic layout - dropdowns + .nav-dd { .title { @extend .t-action2; - @extend .btn-nav-primary; + @extend .btn-dd-nav-primary; @include transition(all 0.25s ease-in-out 0); .label, .icon-caret-down { @@ -76,13 +84,23 @@ 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; @@ -98,30 +116,42 @@ // specific elements - course name/info .info-course { - margin-right: ($baseline/4); - border-right: 1px solid $gray-l3; - padding: ($baseline/2) $baseline ($baseline/2) 0; + margin-right: ($baseline*0.75); + border-right: 1px solid $gray-l4; + padding: ($baseline*0.75) $baseline ($baseline*0.75) 0; .course-org, .course-number { - @extend .text-sr; + @extend .t-action4; + display: inline-block; + vertical-align: middle; + opacity: 0.75; + } + + .course-org { + width: 50%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-right: ($baseline/4); } .course-title { - @extend .t-action3; + @extend .t-action2; display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; - color: $gray; } // entire link a { + @include transition(color 0.25s ease-in-out); + color: $gray-d1; &:hover { - + color: $blue-s1; } } } @@ -130,23 +160,26 @@ // specific elements - course nav .nav-course { - - .nav-item { - - .title { - - } - } + padding: ($baseline*0.75) 0; } // ==================== // specific elements - account-based nav .nav-account { + position: relative; + padding: ($baseline*0.75) 0; text-align: right; + .nav-sub { + text-align: left; + } + .nav-account-help { + .wrapper-nav-sub { + width: ($baseline*10); + } } .nav-account-user { @@ -158,12 +191,40 @@ // specific elements - pitch/how it works nav .nav-pitch { + position: relative; + padding: ($baseline*0.75) 0; text-align: right; + + .nav-sub { + text-align: left; + } } } + +// ==================== + // CASE: user signed in .is-signedin { + .wrapper-header { + + .branding { + width: flex-grid(2, 12); + margin-right: flex-gutter(); + } + + .nav-account { + width: flex-grid(9, 12); + right: -($baseline*6); + } + } +} + +// ==================== + +// CASE: in course { +.is-signedin.course { + .wrapper-header { .branding { @@ -181,6 +242,7 @@ .nav-account { width: flex-grid(3, 12); + right: -($baseline*1.5); } } } @@ -192,20 +254,89 @@ .wrapper-header { - nav > ol > .nav-item { - margin-right: $baseline; - - &:last-child { - margin-right: 0; - } - } - .branding { width: flex-grid(2, 12); } .nav-pitch { - width: flex-grid(10, 12); + width: flex-grid(9, 12); + right: -($baseline*6); + + .nav-item { + margin-right: ($baseline/2); + + &:last-child { + margin-right: 0; + } + } + + .action-signup { + @include blue-button; + @include transition(all .15s); + @include font-size(14); + padding: ($baseline/4) ($baseline/2); + text-transform: uppercase; + font-weight: 600; + } + + .action-signin { + @include white-button; + @include transition(all .15s); + @include font-size(14); + padding: ($baseline/4) ($baseline/2); + text-transform: uppercase; + font-weight: 600; + } } } } + +// ==================== + +// STATE: active/current nav states + +.nav-item.is-current, +body.howitworks .nav-not-signedin-hiw, + +// dashboard +body.dashboard .nav-account-dashboard, + +// course content +body.course.outline .nav-course-courseware .title, +body.course.updates .nav-course-courseware .title, +body.course.pages .nav-course-courseware .title, +body.course.uploads .nav-course-courseware .title, + +body.course.outline .nav-course-courseware-outline, +body.course.updates .nav-course-courseware-updates, +body.course.pages .nav-course-courseware-pages, +body.course.uploads .nav-course-courseware-uploads, + +// course settings +body.course.schedule .nav-course-settings .title, +body.course.grading .nav-course-settings .title, +body.course.team .nav-course-settings .title, +body.course.advanced .nav-course-settings .title, + +body.course.schedule .nav-course-settings-schedule, +body.course.grading .nav-course-settings-grading, +body.course.team .nav-course-settings-team, +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 { + color: $blue; + pointer-events: none; + } +} diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss index 69445c353b..11e674aafb 100644 --- a/cms/static/sass/elements/_navigation.scss +++ b/cms/static/sass/elements/_navigation.scss @@ -32,11 +32,147 @@ nav { } .icon-caret-down { + // @include transition(rotate .15s ease-in-out .25s); margin-left: ($baseline/10); + + &:hover { + @include transform(rotate(180deg)); + } + } + + // dropped down state + &.is-selected { + + .icon-caret-down { + @include transform(rotate(180deg)); + } + } + } + + .nav-item { + position: relative; + + &:hover { + } } .wrapper-nav-sub { - display: none !important; + @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/templates/widgets/header.html b/cms/templates/widgets/header.html index 768c895fd4..3349e248b1 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -14,11 +14,11 @@ -