diff --git a/cms/static/js/base.js b/cms/static/js/base.js index d93d2fd8d4..7bea860531 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -87,7 +87,7 @@ $(document).ready(function () { $('a.show-tender').bind('click', smoothScrollTop); // toggling footer additional support - $('.show-support').bind('click', toggleSupport); + $('.cta-show-sock').bind('click', toggleSock); // toggling overview section details $(function () { @@ -458,9 +458,17 @@ function onKeyUp(e) { } } -function toggleSupport(e) { +function toggleSock(e) { e.preventDefault(); - $body.toggleClass('footer-is-expanded'); + $body.toggleClass('sock-is-shown'); + + $.smoothScroll({ + offset: -200, + easing: 'swing', + speed: 1000, + scrollElement: null, + scrollTarget: $('.wrapper-sock') + }); } function toggleSubmodules(e) { diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 328c7e99c3..10c046d22a 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -22,7 +22,7 @@ body, input { a { text-decoration: none; color: $blue; - @include transition(color .15s); + @include transition(color 0.25s ease-in-out); &:hover { color: #cb9c40; @@ -50,18 +50,22 @@ h1 { // ==================== -// layout - view +// layout - overall view .wrapper-view { - position: relative; min-height: 100%; + position: relative; } .wrapper-main { - padding-bottom: $footer-primary-height; + background: $gray-l5; + margin: ($baseline*1.5) 0 0 0; + padding-bottom: $bottom-height; } -.js.footer-is-expanded .wrapper-main { - padding-bottom: ($footer-primary-height*4); +.wrapper-bottom { + position: absolute; + bottom: 0; + height: $bottom-height; } // layout - basic page header @@ -286,19 +290,17 @@ h1 { } .title-1 { - + @extend .t-title-1; } .title-2 { - @include font-size(24); + @extend .t-title-2; margin: 0 0 ($baseline/2) 0; - font-weight: 600; } .title-3 { - @include font-size(16); + @extend .t-title-3; margin: 0 0 ($baseline/2) 0; - font-weight: 600; } .title-4 { @@ -365,8 +367,7 @@ h1 { // layout - grandfathered .main-wrapper { position: relative; - margin: ($baseline*2); - padding-bottom: $footer-primary-height; + margin: 0 ($baseline*2); } .inner-wrapper { diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss index d837000a24..a25a07cb73 100644 --- a/cms/static/sass/_cms_mixins.scss +++ b/cms/static/sass/_cms_mixins.scss @@ -1,6 +1,7 @@ // studio - utilities - mixins and extends // ==================== +// mixins - utility @mixin clearfix { &:after { content: ''; @@ -11,6 +12,7 @@ } } +// mixins - grandfathered @mixin button { display: inline-block; padding: 4px 20px 6px; @@ -294,20 +296,97 @@ } } -@mixin sr-text { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - @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); -} \ No newline at end of file +} + +// ==================== + +// extends - buttons +.btn { + @include box-sizing(border-box); + @include transition(color 0.25s ease-in-out, border-color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out); + display: inline-block; + cursor: pointer; + + &:hover, &:active { + + } + + &.disabled, &[disabled] { + cursor: default; + pointer-events: none; + opacity: 0.5; + } + + .icon-inline { + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); + } +} + +// pill button +.btn-pill { + @include border-radius($baseline/5); +} + +.btn-rounded { + @include border-radius($baseline/2); +} + +// primary button +.btn-primary { + @extend .btn; + @extend .btn-pill; + padding:($baseline/2) $baseline; + border-width: 1px; + border-style: solid; + line-height: 1.5em; + text-align: center; + + &:hover, &:active { + @include box-shadow(0 2px 1px $shadow-l1); + } + + &.current, &.active { + @include box-shadow(inset 1px 1px 2px $shadow-d1); + + &:hover, &:active { + @include box-shadow(inset 1px 1px 1px $shadow-d1); + } + } +} + +// secondary button +.btn-secondary { + @extend .btn; + @extend .btn-pill; + border-width: 1px; + border-style: solid; + padding:($baseline/2) $baseline; + background: transparent; + line-height: 1.5em; + text-align: center; + + &:hover, &:active { + + } + + &.current, &.active { + + } +} + +// ==================== + +// extends - depth levels +.depth0 { z-index: 0; } +.depth1 { z-index: 10; } +.depth2 { z-index: 100; } +.depth3 { z-index: 1000; } +.depth4 { z-index: 10000; } +.depth5 { z-index: 100000; } \ No newline at end of file diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 806fbc8c57..88143c2365 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -13,7 +13,7 @@ $fg-max-width: 1280px; $fg-min-width: 900px; // elements -$footer-primary-height: (60px); +$bottom-height: ($baseline*3); // type $sans-serif: 'Open Sans', $verdana; @@ -170,4 +170,4 @@ $disabledGreen: rgb(124, 206, 153); $darkGreen: rgb(52, 133, 76); $lightBluishGrey: rgb(197, 207, 223); $lightBluishGrey2: rgb(213, 220, 228); -$error-red: rgb(253, 87, 87); +$error-red: rgb(253, 87, 87); \ No newline at end of file diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index 3015c3592d..da17441c71 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -23,9 +23,11 @@ // elements @import 'elements/typography'; @import 'elements/icons'; +@import 'elements/controls'; +@import 'elements/navigation'; @import 'elements/header'; @import 'elements/footer'; -@import 'elements/navigation'; +@import 'elements/sock'; @import 'elements/forms'; @import 'elements/modal'; @import 'elements/alerts'; diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss new file mode 100644 index 0000000000..c4e96616a8 --- /dev/null +++ b/cms/static/sass/elements/_controls.scss @@ -0,0 +1,143 @@ +// studio - elements - UI controls +// ==================== + +// gray primary button +.btn-primary-gray { + @extend .btn-primary; + background: $gray-l1; + border-color: $gray-l2; + color: $white; + + &:hover, &:active { + border-color: $gray-l1; + background: $gray; + } + + &.current, &.active { + background: $gray-d1; + color: $gray-l1; + + &:hover, &:active { + background: $gray-d1; + } + } +} + +// blue primary button +.btn-primary-blue { + @extend .btn-primary; + background: $blue; + border-color: $blue-s1; + color: $white; + + &:hover, &:active { + background: $blue-s2; + border-color: $blue-s2; + } + + &.current, &.active { + background: $blue-d1; + color: $blue-l4; + border-color: $blue-d2; + + &:hover, &:active { + background: $blue-d1; + } + } +} + +// green primary button +.btn-primary-green { + @extend .btn-primary; + background: $green; + border-color: $green; + color: $white; + + &:hover, &:active { + background: $green-s1; + border-color: $green-s1; + } + + &.current, &.active { + background: $green-d1; + color: $green-l4; + border-color: $green-d2; + + &:hover, &:active { + background: $green-d1; + } + } +} + +// gray secondary button +.btn-secondary-gray { + @extend .btn-secondary; + border-color: $gray-l3; + color: $gray-l1; + + &:hover, &:active { + background: $gray-l3; + color: $gray-d2; + } + + &.current, &.active { + background: $gray-d2; + color: $gray-l5; + + &:hover, &:active { + background: $gray-d2; + } + } +} + +// blue secondary button +.btn-secondary-blue { + @extend .btn-secondary; + border-color: $blue-l3; + color: $blue; + + &:hover, &:active { + background: $blue-l3; + color: $blue-s2; + } + + &.current, &.active { + border-color: $blue-l3; + background: $blue-l3; + color: $blue-d1; + + &:hover, &:active { + + } + } +} + +// green secondary button +.btn-secondary-green { + @extend .btn-secondary; + border-color: $green-l4; + color: $green-l2; + + &:hover, &:active { + background: $green-l4; + color: $green-s1; + } + + &.current, &.active { + background: $green-s1; + color: $green-l4; + + &:hover, &:active { + background: $green-s1; + } + } +} + +// ==================== + +// layout-based buttons + +// ==================== + +// calls-to-action + diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss index f2941e11be..d0bb9b9dee 100644 --- a/cms/static/sass/elements/_footer.scss +++ b/cms/static/sass/elements/_footer.scss @@ -3,13 +3,10 @@ .wrapper-footer { @include box-shadow(inset 0 1px 2px $shadow-d1); - margin: ($baseline*1.5) 0 0 0; - padding: $baseline; - position: absolute; - bottom: 0; + position: relative; width: 100%; - height: $footer-primary-height; - background: $gray-l3; + padding: $baseline; + background: $gray-l4; footer.primary { @include clearfix(); @@ -55,8 +52,6 @@ .ss-icon { @include transition(top .25s ease-in-out .25s); @include font-size(15); - position: relative; - top: 0; display: inline-block; vertical-align: middle; margin-right: ($baseline/4); @@ -67,133 +62,15 @@ color: $gray-d2; .ss-icon { - top: -($baseline/10); color: $gray-d2; } } - } - } - } - } - // sock - additional help - .sock { - @include clearfix(); - @extend .t-copy-sub2; - max-width: $fg-max-width; - min-width: $fg-min-width; - width: flex-grid(12); - margin: 0 auto $baseline auto; - border-bottom: 1px solid $gray-l2; - padding-bottom: $baseline; - - header { - - .title { - @extend .t-title-3; - } - - .ss-icon { - @extend .t-icon; - @extend .icon-inline; - } - } - - // shared elements - .support, .feedback { - @include box-sizing(border-box); - - .title { - - } - - .copy { - margin: 0 0 $baseline 0; - } - - .list-actions { - @include clearfix(); - - .action-item { - float: left; - margin-right: ($baseline/2); - - &:last-child { - margin-right: 0; - } - - .action { - display: block; - - .ss-icon { - @include font-size(15); - @extend .t-icon; - @extend .icon-inline; - } - - &:hover, &:active { - - .ss-icon { - } - } - } - - .tip { - @extend .sr; + &.is-active { + color: $gray-d2; } } - - .action-primary { - @include gray-button; - @include transition(all .15s); - @include font-size(13); - font-weight: 500; - padding: ($baseline/4) ($baseline/2); - text-align: center; - } } } - - // studio support content - .support { - width: flex-grid(8,12); - float: left; - margin-right: flex-gutter(); - - .action-item { - width: flexgrid(4,8); - } - } - - // studio feedback content - .feedback { - width: flex-grid(4,12); - float: left; - - .action-item { - width: flexgrid(4,4); - } - } - } -} - - -// js-enabled styling -.js .wrapper-footer { - @include transition(height 2s ease-in-out); - height: $footer-primary-height; - overflow: hidden; - - .sock { - display: none; - } -} - - // expanded view -.js.footer-is-expanded .wrapper-footer { - height: ($footer-primary-height*4); - - .sock { - display: block; } } \ No newline at end of file diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss index e8df37f57f..12c736de7d 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -2,7 +2,7 @@ // ==================== .wrapper-header { - margin: 0 0 ($baseline*1.5) 0; + margin: 0; padding: $baseline; border-bottom: 1px solid $gray; @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss new file mode 100644 index 0000000000..27f43935f6 --- /dev/null +++ b/cms/static/sass/elements/_sock.scss @@ -0,0 +1,152 @@ +// studio - elements - support sock +// ==================== + +.wrapper-sock { + @include transition(background 0.25s ease-in-out); + @include clearfix(); + position: relative; + width: 100%; + margin: ($baseline*2.5) 0; + padding: 0 $baseline; + border-top: 1px solid $gray-l4; + + // actions + .list-cta { + position: relative; + top: -($baseline); + margin: 0 auto; + text-align: center; + + .cta-show-sock { + @extend .btn-secondary-gray; + @extend .t-action3; + background: $gray-l5; + padding: ($baseline/2) $baseline; + + .icon { + @include font-size(17); + } + } + } + + // sock - additional help + .sock { + @include clearfix(); + @extend .t-copy-sub2; + display: none; + opacity: 0.0; + pointer-events: none; + max-width: $fg-max-width; + min-width: $fg-min-width; + width: flex-grid(12); + margin: 0 auto; + color: $gray-l3; + + // support body + header { + + .title { + @extend .t-title-3; + margin-bottom: ($baseline/2); + } + + .ss-icon { + @extend .t-icon; + @extend .icon-inline; + } + } + + // shared elements + .support, .feedback { + @include box-sizing(border-box); + + .title { + @extend .t-title-3; + color: $white; + } + + .copy { + margin: 0 0 $baseline 0; + } + + .list-actions { + @include clearfix(); + + .action-item { + float: left; + margin-right: ($baseline/2); + + &:last-child { + margin-right: 0; + } + + .action { + display: block; + + .icon { + @include font-size(18); + } + + &:hover, &:active { + + } + } + + .tip { + @extend .sr; + } + } + + .action-primary { + @extend .btn-primary-blue; + @extend .t-action3; + } + } + } + + // studio support content + .support { + width: flex-grid(8,12); + float: left; + margin-right: flex-gutter(); + + .action-item { + width: flexgrid(4,8); + } + } + + // studio feedback content + .feedback { + width: flex-grid(4,12); + float: left; + + .action-item { + width: flexgrid(4,4); + } + } + } +} + +// case: sock content is shown +.sock-is-shown { + + .wrapper-sock { + @include linear-gradient($gray-d4 0%, $gray-d3 2%, $gray-d3 98%, $gray-d4 100%); + border-bottom: 1px solid $white; + border-top: 1px solid $white; + padding-bottom: ($baseline*2); + padding-top: ($baseline*2); + + .cta-show-sock { + display: none; + opacity: 0.0; + pointer-events: none; + } + + .sock { + display: block; + opacity: 1.0; + pointer-events: auto; + } + } +} \ No newline at end of file diff --git a/cms/static/sass/elements/_typography.scss b/cms/static/sass/elements/_typography.scss index a9b3d362ee..32c4b3928b 100644 --- a/cms/static/sass/elements/_typography.scss +++ b/cms/static/sass/elements/_typography.scss @@ -7,18 +7,16 @@ } .t-title-1 { - @include font-size(32); + @include font-size(36); } .t-title-2 { @include font-size(24); - margin: 0 0 ($baseline/2) 0; font-weight: 600; } .t-title-3 { @include font-size(16); - margin: 0 0 ($baseline/2) 0; font-weight: 600; } @@ -60,18 +58,23 @@ // ==================== // actions/labels -.t-action { +.t-action1 { @include font-size(14); font-weight: 600; } -.t-action-primary { - @include font-size(14); - font-weight: 600; -} - -.t-action-primary-s { +.t-action2 { @include font-size(13); + font-weight: 600; + text-transform: uppercase; +} + +.t-action3 { + @include font-size(13); +} + +.t-action4 { + @include font-size(12); } // ==================== diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss index 88beccc82d..7c45530339 100644 --- a/cms/static/sass/views/_index.scss +++ b/cms/static/sass/views/_index.scss @@ -296,8 +296,7 @@ body.index { // call to action content .wrapper-content-cta { position: relative; - padding-bottom: ($footer-primary-height*2); - padding-top: ($baseline*2); + padding: ($baseline*2) 0; background: $white; } diff --git a/cms/templates/base.html b/cms/templates/base.html index e587619bae..46d566116e 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -53,10 +53,17 @@
<%include file="widgets/header.html" /> +
- <%block name="content"> + <%block name="content"> + % if user.is_authenticated(): + <%include file="widgets/sock.html" /> + % endif +
+ +
+ <%include file="widgets/footer.html" />
- <%include file="widgets/footer.html" />
<%include file="widgets/tender.html" /> diff --git a/cms/templates/widgets/footer.html b/cms/templates/widgets/footer.html index b6a3b84272..eea155ce19 100644 --- a/cms/templates/widgets/footer.html +++ b/cms/templates/widgets/footer.html @@ -1,49 +1,5 @@ <%! from django.core.urlresolvers import reverse %> - -
-
-
-

edX Studio Help

-
- -
-

Studio Support

- -
-

Need help getting started with Studio? Want to know how to manage a particular part of your course using Studio? Take advantage of our documentation, help forums, as well as our edX101 introduction course for course authors.

-
- - -
- - -
- +