From f98f500c6ffe3509a5d94943bf9a7c5c5b4d0ba1 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 26 Jun 2013 15:22:06 -0400 Subject: [PATCH 01/19] studio - sets initial studio nav revisions (WIP) --- cms/static/img/logo-edx-studio.png | Bin 2461 -> 4782 bytes cms/static/img/old-edx-studio-logo-small.png | Bin 0 -> 3689 bytes cms/static/img/old-logo-edx-studio.png | Bin 0 -> 2461 bytes cms/static/sass/elements/_header.scss | 650 ++++--------------- cms/static/sass/elements/_navigation.scss | 26 +- cms/templates/widgets/header.html | 232 ++++--- 6 files changed, 296 insertions(+), 612 deletions(-) create mode 100644 cms/static/img/old-edx-studio-logo-small.png create mode 100644 cms/static/img/old-logo-edx-studio.png diff --git a/cms/static/img/logo-edx-studio.png b/cms/static/img/logo-edx-studio.png index 006194a195d546fb40564b6bb07cf926c25cff7a..bad6af1697bc66473c74717cdcfa3f20d0af6723 100644 GIT binary patch literal 4782 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 IM6N<$f=CrXDF6Tf literal 2461 zcma)7dpK0x9^NjwjC>dpVj7x}M4a4(lItK%BzKKta*vREBE&E=W{e5rk}x8Cd?gGs zlf>sv;S(xyJt7h!Q8~La=W)(+{yO_v``zz)*ZceZ*7`l`d3GAw)^61lR#aD z+ynJ1g_XPmZ5b!6SjYSuR06@MGzz8cm}9KDZGm?p6A{3I`&OESfqFbrFDZ=#5(d(@ z`h1vX_McwVsreKsrAi_xZpP;-*}f}>CBMars3 z2bSh2SV6CsCx=E5Gsx*U{I9DU{3t?3S(@C-LI!|$wHe_D_CE}!Ovt(??Emn1NU_|5 zH(~*0P(OM)ksNvS6sJqz(R^x965!U`Z`#?~d#r%Z_=nb&GYh|-?KyN&@Yc@Rbt=Mc z>xV8RX4$i2Fs!0@=S&nWB(B90eHWskm+G!SaJ{67Xg-`%z8HSBOXVGn<@stf`R7{g z&uM$Pdc(*HZ$0y%4HvB8oR)avCW1G(F3h3Mt}RZHVlB(s?v3Z0lsIM0`>^Dj=&00T zCBCh0;83Q<`_OA(LBiiw@$hHk#UjN`He0&P-%5HI@TCr@L~jXZGUMnIcA8 zEi|3rNhpt)Q+BiI?038xYpSF^ITDzfs8$sMgBr=2Kc1K`VvD1XI>f-RQQ=c`t>1^VG7UXL~?Yq@1XXUCQr z&ipZAv6kSRys8T;Nl`GT6b!b6U-I-Ee6FWKxONJbr?2f7T2&7=+H&F5 zzc}?V*;v$&Y}bM{k8xw9Fuojo)fHSL^R#P~E+USRf58#~E-DasFJ)uP^pX55Xajm% zVD8$ZE1@`qLAtuobd$$TyV8@79yB9%Q&w1;&rSTVr}vx6Y7*%_#>ukyk~zR6s9)yv z&-IUYtd_OTgwfsY+!Aa;7tCUOzhpDr6|@61ntPW<++8G7+AOwyu)>CeE8nQaci~Oe zcb$>bMCcOZmQ#DGdGIXVtFzmlYq;jepm6bZ*V`3+fkMgOgCtQ>*$E$7XZdPB$J^Uo zme|?N(7o4(Ysd$)I_qrVLV$@$Ww8qA>Idr@oA-Ks){mYt>KRK9Bv9)KXC#5%~^ zlAwuI%dVDl#9`wn9{V0d*D#9}B$VSsZBks2skLxC8|ptji|{y%5q)jUl~%%!6;y&K z)Fe*%)SpS&z&Q;Oc1;aU^ql`f@-IB|K92=5xV%%3712D&cS(^mz(8<1n-{P>1 z8WvPuL>DFJdM^EHgk;z#1Gk;4Hvr}JS$R`mwGL5_b{ScOM0(bJGvvZFPu-5GOP>=X zSL-5?4Gr`;g+&-?(a@~XMhE}x+QRZAd-r+1&Y-2ETVD(Ft8FR&&>||YH>dT0cEYXS zQ1tJmwB&Bj!d*u$#j?#o;rV%2qgoqfz87`0yqVUd-#173ZIlpW&=S`83Yw!5B7#9hsrE1Bj>&agdyBAGqI8lR z12mjp#;Z%+DHp%HAW+2I&h|p_yf|{mL3_O$3<>MV7^u-reqTQ#{eiZThp5Jn8beq47#NK diff --git a/cms/static/img/old-edx-studio-logo-small.png b/cms/static/img/old-edx-studio-logo-small.png new file mode 100644 index 0000000000000000000000000000000000000000..728a3f81e076c912ec65f015173046ce8d93324b GIT binary patch literal 3689 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 C+lO2L literal 0 HcmV?d00001 diff --git a/cms/static/img/old-logo-edx-studio.png b/cms/static/img/old-logo-edx-studio.png new file mode 100644 index 0000000000000000000000000000000000000000..006194a195d546fb40564b6bb07cf926c25cff7a GIT binary patch literal 2461 zcma)7dpK0x9^NjwjC>dpVj7x}M4a4(lItK%BzKKta*vREBE&E=W{e5rk}x8Cd?gGs zlf>sv;S(xyJt7h!Q8~La=W)(+{yO_v``zz)*ZceZ*7`l`d3GAw)^61lR#aD z+ynJ1g_XPmZ5b!6SjYSuR06@MGzz8cm}9KDZGm?p6A{3I`&OESfqFbrFDZ=#5(d(@ z`h1vX_McwVsreKsrAi_xZpP;-*}f}>CBMars3 z2bSh2SV6CsCx=E5Gsx*U{I9DU{3t?3S(@C-LI!|$wHe_D_CE}!Ovt(??Emn1NU_|5 zH(~*0P(OM)ksNvS6sJqz(R^x965!U`Z`#?~d#r%Z_=nb&GYh|-?KyN&@Yc@Rbt=Mc z>xV8RX4$i2Fs!0@=S&nWB(B90eHWskm+G!SaJ{67Xg-`%z8HSBOXVGn<@stf`R7{g z&uM$Pdc(*HZ$0y%4HvB8oR)avCW1G(F3h3Mt}RZHVlB(s?v3Z0lsIM0`>^Dj=&00T zCBCh0;83Q<`_OA(LBiiw@$hHk#UjN`He0&P-%5HI@TCr@L~jXZGUMnIcA8 zEi|3rNhpt)Q+BiI?038xYpSF^ITDzfs8$sMgBr=2Kc1K`VvD1XI>f-RQQ=c`t>1^VG7UXL~?Yq@1XXUCQr z&ipZAv6kSRys8T;Nl`GT6b!b6U-I-Ee6FWKxONJbr?2f7T2&7=+H&F5 zzc}?V*;v$&Y}bM{k8xw9Fuojo)fHSL^R#P~E+USRf58#~E-DasFJ)uP^pX55Xajm% zVD8$ZE1@`qLAtuobd$$TyV8@79yB9%Q&w1;&rSTVr}vx6Y7*%_#>ukyk~zR6s9)yv z&-IUYtd_OTgwfsY+!Aa;7tCUOzhpDr6|@61ntPW<++8G7+AOwyu)>CeE8nQaci~Oe zcb$>bMCcOZmQ#DGdGIXVtFzmlYq;jepm6bZ*V`3+fkMgOgCtQ>*$E$7XZdPB$J^Uo zme|?N(7o4(Ysd$)I_qrVLV$@$Ww8qA>Idr@oA-Ks){mYt>KRK9Bv9)KXC#5%~^ zlAwuI%dVDl#9`wn9{V0d*D#9}B$VSsZBks2skLxC8|ptji|{y%5q)jUl~%%!6;y&K z)Fe*%)SpS&z&Q;Oc1;aU^ql`f@-IB|K92=5xV%%3712D&cS(^mz(8<1n-{P>1 z8WvPuL>DFJdM^EHgk;z#1Gk;4Hvr}JS$R`mwGL5_b{ScOM0(bJGvvZFPu-5GOP>=X zSL-5?4Gr`;g+&-?(a@~XMhE}x+QRZAd-r+1&Y-2ETVD(Ft8FR&&>||YH>dT0cEYXS zQ1tJmwB&Bj!d*u$#j?#o;rV%2qgoqfz87`0yqVUd-#173ZIlpW&=S`83Yw!5B7#9hsrE1Bj>&agdyBAGqI8lR z12mjp#;Z%+DHp%HAW+2I&h|p_yf|{mL3_O$3<>MV7^u-reqTQ#{eiZThp5Jn8beq47#NK literal 0 HcmV?d00001 diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss index 247bb35b81..cfc1778123 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -4,22 +4,11 @@ .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)); + @include box-shadow(0 1px 2px 0 $shadow-l1); background: $white; - height: 76px; position: relative; width: 100%; - - a { - color: $baseFontColor; - display: block; - - &:hover, &:active { - color: $blue; - } - } + padding: $baseline; header.primary { @include clearfix(); @@ -27,543 +16,192 @@ min-width: $fg-min-width; width: flex-grid(12); margin: 0 auto; - color: $gray-l1; } - nav .nav-item { + // ==================== + + // basic layout + .branding, .info-course, .nav-course, .nav-account, .nav-pitch { + @include box-sizing(border-box); display: inline-block; - } -} - -// ==================== - -// 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; + vertical-align: middle; } - &:after { - @extend .faded-vertical-divider-light; - content: ""; - display: block; - height: 50px; - position: absolute; - right: 0px; - top: -12px; - width: 1px; + .branding, .info-course, .nav-course { + margin-right: $baseline; } - .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; - } + // basic layout - nav items + .nav-item { .title { - display: block; - padding: 0 ($baseline/4); - text-transform: uppercase; + + } + } + + nav { + + > ol > .nav-item { + @extend .t-action2; + display: inline-block; + vertical-align: middle; + margin-right: ($baseline); 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); - 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; - } - } - - &.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 { - float: right; - margin-top: ($baseline/4); - - .nav-item { - @include font-size(16); - vertical-align: middle; - margin: 0 $baseline 0 0; &:last-child { margin-right: 0; } + } + } - .action { - margin-top: -($baseline/4); - display: inline-block; - padding: ($baseline/4) ($baseline/2); + // basic layout - dropdowns + .nav-dd { + + .title { + @extend .t-action2; + + .label, .icon-caret-down { + + } + + .icon-caret-down { + @include transition(opacity 0.25s ease-in-out 0); + opacity: 0.25; + } + + &:hover { + + .icon-caret-down { + opacity: 1.0; + } } } + } - // STATE: not signed in - specific items - .nav-not-signedin-help { + // ==================== - } + // specific elements - branding + .branding { - .nav-not-signedin-signup { - margin-right: ($baseline/2); + a { + display: block; - .action-signup { - @include blue-button; - @include transition(all .15s); - @include font-size(14); - padding: ($baseline/4) ($baseline/2); - text-transform: uppercase; - font-weight: 600; - } - } - - .nav-not-signedin-signin { - - .action-signin { - @include white-button; - @include transition(all .15s); - @include font-size(14); - padding: ($baseline/4) ($baseline/2); - text-transform: uppercase; - font-weight: 600; + img { + width: 100%; + display: block; } } } -} -// ==================== + // ==================== -// STATE: active/current nav states + // specific elements - course name/info + .info-course { -.nav-item.is-current, -body.howitworks .nav-not-signedin-hiw, + .course-org, .course-number { + @extend .text-sr; + } -// dashboard -body.dashboard .nav-account-dashboard, + .course-title { + @extend .t-title7; + display: block; + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-weight: 600; + color: $gray-d1; -// 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, + // entire link + a { -// 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, + &:hover { -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.import .nav-course-tools-import, -body.course.export .nav-course-tools-export, - -{ - - color: $blue; - - a { - color: $blue; - pointer-events: none; + } + } } -} -body.signup .nav-not-signedin-signin { + // ==================== - a { - background-color: #d9e3ee; - color: #6d788b; - } -} + // specific elements - course nav + .nav-course { -body.signin .nav-not-signedin-signup { + .nav-item { - a { - background-color: #62aaf5; - color: #fff; - } -} + .title { + @extend .t-action2; -// ==================== - -// STATE: js enabled -.js { - - .nav-dropdown { - - .nav-item .title { - outline: 0; - cursor: pointer; - - &:hover, &:active, &.is-selected { - color: $blue; - - .icon-expand { - color: $blue; + &:hover { + @extend .fake-link; } } } } - .wrapper-nav-sub { - @include transition (opacity 1.0s ease-in-out 0s); - opacity: 0.0; - pointer-events: none; + // ==================== + + // specific elements - account-based nav + .nav-account { + text-align: right; + + .nav-account-help { + + } + + .nav-account-user { - &.is-shown { - opacity: 1.0; - pointer-events: auto; } } + + // ==================== + + // specific elements - pitch/how it works nav + .nav-pitch { + text-align: right; + } +} +// CASE: user signed in +.is-signedin { + + .branding { + width: flex-grid(2, 12); + margin-right: flex-gutter(); + background: purple; + } + + .info-course { + width: flex-grid(4, 12); + margin-right: flex-gutter(); + background: red; + } + + .nav-course { + width: flex-grid(4, 12); + margin-right: flex-gutter(); + background: blue; + } + + .nav-account { + width: flex-grid(2, 12); + background: green; + } +} + +// ==================== + +// CASE: user not signed in +.not-signedin { + + .branding { + width: flex-grid(2, 12); + margin-right: flex-gutter(); + background: purple; + } + + .nav-pitch { + width: flex-grid(10, 12); + background: green; + } } diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss index 516a19c7ad..3a7beb0c50 100644 --- a/cms/static/sass/elements/_navigation.scss +++ b/cms/static/sass/elements/_navigation.scss @@ -18,20 +18,26 @@ nav { // ==================== -// primary - -// ==================== - -// right hand side - -// ==================== - // tabs // ==================== // dropdown +.nav-dd { -// ==================== + .title { -// + .label, .icon-caret-down { + display: inline-block; + vertical-align: middle; + } + + .icon-caret-down { + margin-left: ($baseline/10); + } + } + + .wrapper-nav-sub { + display: none !important; + } +} diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index 3c8a598b5e..085030780d 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -1,118 +1,158 @@ <%! from django.core.urlresolvers import reverse %> -
+ -
  • -

    Tools

    +
  • +

    Tools

    -
    -
    - -
    +
    +
    +
    -
    • - - - % endif - + + + + + % endif -
    - % if user.is_authenticated(): -
    + + + + + + + + % else: + + % endif From 33d0302f22f650e85db88382573a70cf2bb04648 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 26 Jun 2013 15:55:01 -0400 Subject: [PATCH 02/19] studio - proofs nav's flex grid widths/alignment --- cms/static/sass/elements/_header.scss | 27 ++++++++------------------- 1 file changed, 8 insertions(+), 19 deletions(-) diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss index cfc1778123..f6a9805818 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -11,6 +11,7 @@ padding: $baseline; header.primary { + @include box-sizing(border-box); @include clearfix(); max-width: $fg-max-width; min-width: $fg-min-width; @@ -27,10 +28,6 @@ vertical-align: middle; } - .branding, .info-course, .nav-course { - margin-right: $baseline; - } - // basic layout - nav items .nav-item { @@ -60,6 +57,10 @@ .title { @extend .t-action2; + &:hover { + @extend .fake-link; + } + .label, .icon-caret-down { } @@ -103,7 +104,7 @@ } .course-title { - @extend .t-title7; + @extend .t-action3; display: block; width: 100%; overflow: hidden; @@ -131,11 +132,7 @@ .nav-item { .title { - @extend .t-action2; - &:hover { - @extend .fake-link; - } } } } @@ -168,24 +165,19 @@ .branding { width: flex-grid(2, 12); margin-right: flex-gutter(); - background: purple; } .info-course { - width: flex-grid(4, 12); + width: flex-grid(3, 12); margin-right: flex-gutter(); - background: red; } .nav-course { width: flex-grid(4, 12); - margin-right: flex-gutter(); - background: blue; } .nav-account { - width: flex-grid(2, 12); - background: green; + width: flex-grid(3, 12); } } @@ -196,12 +188,9 @@ .branding { width: flex-grid(2, 12); - margin-right: flex-gutter(); - background: purple; } .nav-pitch { width: flex-grid(10, 12); - background: green; } } From 51f96ad77c47a93971141ade60953b53517fa2c2 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 26 Jun 2013 17:01:35 -0400 Subject: [PATCH 03/19] studio - revises button styling/states for primary nav --- cms/static/sass/elements/_controls.scss | 20 +++++++ cms/static/sass/elements/_header.scss | 67 ++++++++++++++--------- cms/static/sass/elements/_navigation.scss | 3 +- cms/templates/widgets/header.html | 5 +- common/static/sass/_mixins.scss | 21 +++++++ 5 files changed, 85 insertions(+), 31 deletions(-) diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index e0b4a004ec..df09183123 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -136,6 +136,26 @@ // ==================== // layout-based buttons +.btn-nav-primary { + @extend .btn-nav-simple; + background: $white; + border-color: $white; + color: $gray; + + &: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 f6a9805818..88a9ef8bd2 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -42,7 +42,6 @@ @extend .t-action2; display: inline-block; vertical-align: middle; - margin-right: ($baseline); font-weight: 600; &:last-child { @@ -56,17 +55,18 @@ .title { @extend .t-action2; - - &:hover { - @extend .fake-link; - } + @extend .btn-nav-primary; + @include transition(all 0.25s ease-in-out 0); .label, .icon-caret-down { } + .label { + + } + .icon-caret-down { - @include transition(opacity 0.25s ease-in-out 0); opacity: 0.25; } @@ -98,6 +98,9 @@ // specific elements - course name/info .info-course { + margin-right: ($baseline/4); + border-right: 1px solid $gray-l3; + padding: ($baseline/2) $baseline ($baseline/2) 0; .course-org, .course-number { @extend .text-sr; @@ -111,8 +114,7 @@ white-space: nowrap; text-overflow: ellipsis; font-weight: 600; - color: $gray-d1; - + color: $gray; } // entire link @@ -162,22 +164,24 @@ // CASE: user signed in .is-signedin { - .branding { - width: flex-grid(2, 12); - margin-right: flex-gutter(); - } + .wrapper-header { - .info-course { - width: flex-grid(3, 12); - margin-right: flex-gutter(); - } + .branding { + width: flex-grid(2, 12); + margin-right: flex-gutter(); + } - .nav-course { - width: flex-grid(4, 12); - } + .info-course { + width: flex-grid(3, 12); + } - .nav-account { - width: flex-grid(3, 12); + .nav-course { + width: flex-grid(4, 12); + } + + .nav-account { + width: flex-grid(3, 12); + } } } @@ -186,11 +190,22 @@ // CASE: user not signed in .not-signedin { - .branding { - width: flex-grid(2, 12); - } + .wrapper-header { - .nav-pitch { - width: flex-grid(10, 12); + 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); + } } } diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss index 3a7beb0c50..69445c353b 100644 --- a/cms/static/sass/elements/_navigation.scss +++ b/cms/static/sass/elements/_navigation.scss @@ -28,8 +28,7 @@ nav { .title { .label, .icon-caret-down { - display: inline-block; - vertical-align: middle; + } .icon-caret-down { diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index 085030780d..768c895fd4 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -93,7 +93,7 @@
      -
    1. +

    2. Tools

      @@ -88,31 +88,31 @@ % endif % if user.is_authenticated(): -
      - % if user.is_authenticated(): -
      3. +
    + - % else: - - % endif + % else: + + % endif + From 1e5fa875ddf39187b05796b38f69927a80e3c6d6 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 1 Jul 2013 15:15:11 -0400 Subject: [PATCH 12/19] studio - syncs up Sass variable with edX's official blue --- cms/static/sass/_variables.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index bad87952d6..925f9e9d7a 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -47,7 +47,8 @@ $gray-d2: shade($gray,40%); $gray-d3: shade($gray,60%); $gray-d4: shade($gray,80%); -$blue: rgb(85, 151, 221); +// $blue: rgb(85, 151, 221); +$blue: rgb(0, 143, 213); $blue-l1: tint($blue,20%); $blue-l2: tint($blue,40%); $blue-l3: tint($blue,60%); From 2a5c55189e5b118d88bd983f46d0b74c40c64777 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 1 Jul 2013 18:46:12 -0400 Subject: [PATCH 13/19] studio - plans for/truncates long usernames in main nav --- cms/static/sass/elements/_header.scss | 22 +++++++++++++++------- cms/static/sass/elements/_navigation.scss | 3 ++- cms/templates/widgets/header.html | 2 +- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss index fca20860f0..e1c12c9131 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -29,7 +29,6 @@ .wrapper-l { float: left; - margin-right: flex-gutter(); width: flex-grid(7,12); } @@ -45,11 +44,15 @@ vertical-align: middle; } + .nav-account { + width: 100%; + } + // basic layout - nav items nav { > ol > .nav-item { - @extend .t-action2; + @extend .t-action3; display: inline-block; vertical-align: middle; font-weight: 600; @@ -193,11 +196,16 @@ .nav-account-user { - .account-username { - width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + .title { + max-width: ($baseline*6.5); + + > .label { + display: inline-block; + max-width: 85%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } } } } diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss index 741ddb3ee4..4a6aacc529 100644 --- a/cms/static/sass/elements/_navigation.scss +++ b/cms/static/sass/elements/_navigation.scss @@ -28,7 +28,8 @@ nav { .title { .label, .icon-caret-down { - + display: inline-block; + vertical-align: middle; } .ui-toggle-dd { diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index 2ad4b654e1..ea373bbb83 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -116,7 +116,7 @@