diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 211981b05a..d93d2fd8d4 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -34,11 +34,11 @@ $(document).ready(function () { $(this).select(); }); + $('body').addClass('js'); + $('.unit .item-actions .delete-button').bind('click', deleteUnit); $('.new-unit-item').bind('click', createNewUnit); - $('body').addClass('js'); - // lean/simple modal $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' }); $('a.action-modal-close').click(function(e){ @@ -86,6 +86,8 @@ $(document).ready(function () { // tender feedback window scrolling $('a.show-tender').bind('click', smoothScrollTop); + // toggling footer additional support + $('.show-support').bind('click', toggleSupport); // toggling overview section details $(function () { @@ -456,6 +458,11 @@ function onKeyUp(e) { } } +function toggleSupport(e) { + e.preventDefault(); + $body.toggleClass('footer-is-expanded'); +} + function toggleSubmodules(e) { e.preventDefault(); $(this).toggleClass('expand').toggleClass('collapse'); diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 5ce131288e..328c7e99c3 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -56,6 +56,14 @@ h1 { min-height: 100%; } +.wrapper-main { + padding-bottom: $footer-primary-height; +} + +.js.footer-is-expanded .wrapper-main { + padding-bottom: ($footer-primary-height*4); +} + // layout - basic page header .wrapper-mast { margin: 0; diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss index 015a94b762..d837000a24 100644 --- a/cms/static/sass/_cms_mixins.scss +++ b/cms/static/sass/_cms_mixins.scss @@ -110,6 +110,21 @@ } } +@mixin gray-button { + @include button; + border: 1px solid $gray-d1; + border-radius: 3px; + @include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0)); + background-color: $gray-d2; + @include box-shadow(0 1px 0 $white-t1 inset); + color: $gray-l3; + + &:hover { + background-color: $gray-d3; + color: $white; + } +} + @mixin green-button { @include button; border: 1px solid $darkGreen; diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index ffa99e3fc6..806fbc8c57 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: ($baseline*3); +$footer-primary-height: (60px); // type $sans-serif: 'Open Sans', $verdana; diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index e1afa45804..3015c3592d 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -24,7 +24,6 @@ @import 'elements/typography'; @import 'elements/icons'; @import 'elements/header'; -@import 'elements/sock'; @import 'elements/footer'; @import 'elements/navigation'; @import 'elements/forms'; diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss index dfebc6d44c..f2941e11be 100644 --- a/cms/static/sass/elements/_footer.scss +++ b/cms/static/sass/elements/_footer.scss @@ -75,4 +75,125 @@ } } } + + // 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; + } + } + + .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/_icons.scss b/cms/static/sass/elements/_icons.scss new file mode 100644 index 0000000000..2bc73d8b8d --- /dev/null +++ b/cms/static/sass/elements/_icons.scss @@ -0,0 +1,16 @@ +// studio - elements - icons +// ==================== + +.icon { + +} + +.ss-icon { + +} + +.icon-inline { + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); +} \ No newline at end of file diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss deleted file mode 100644 index e8fbcc3ef2..0000000000 --- a/cms/static/sass/elements/_sock.scss +++ /dev/null @@ -1,109 +0,0 @@ -// studio - elements - sock -// ==================== - -.wrapper-sock { - margin: 0; - padding: $baseline $baseline $footer-primary-height $baseline; - position: relative; - width: 100%; - - .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; - - header { - - .title { - @extend .t-title-3; - } - - .ss-icon { - @extend .t-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 transition(color .25s ease-in-out); - @include font-size(15); - @extend .t-icon-inline; - @extend .icon-inline; - margin-right: ($baseline/4); - color: $blue-l2; - } - - &:hover, &:active { - - .ss-icon { - color: $white; - } - } - } - - .tip { - @extend .sr; - } - } - - .action-primary { - @include blue-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); - } - } - } -} \ No newline at end of file diff --git a/cms/static/sass/elements/_typography.scss b/cms/static/sass/elements/_typography.scss new file mode 100644 index 0000000000..a9b3d362ee --- /dev/null +++ b/cms/static/sass/elements/_typography.scss @@ -0,0 +1,82 @@ +// studio - elements - typography +// ==================== + +// headings/titles +.t-title-1, .t-title-2, .t-title-3, .t-title-4, .t-title-5, .t-title-5 { + color: $gray-d3; +} + +.t-title-1 { + @include font-size(32); +} + +.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; +} + +.t-title-4 { + +} + +.t-title-5 { + +} + +// ==================== + +// copy +.t-copy-base { + @include font-size(16); +} + +.t-copy-lead1 { + @include font-size(18); +} + +.t-copy-lead2 { + @include font-size(20); +} + +.t-copy-sub1 { + @include font-size(14); +} + +.t-copy-sub2 { + @include font-size(13); +} + +.t-copy-sub3 { + @include font-size(12); +} + +// ==================== + +// actions/labels +.t-action { + @include font-size(14); + font-weight: 600; +} + +.t-action-primary { + @include font-size(14); + font-weight: 600; +} + +.t-action-primary-s { + @include font-size(13); +} + +// ==================== + +// misc +.t-icon { + line-height: 0; +} \ No newline at end of file diff --git a/cms/templates/base.html b/cms/templates/base.html index 44847c1da4..e587619bae 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -53,8 +53,9 @@
<%include file="widgets/header.html" /> - <%block name="content"> - <%include file="widgets/sock.html" /> +
+ <%block name="content"> +
<%include file="widgets/footer.html" />
diff --git a/cms/templates/widgets/footer.html b/cms/templates/widgets/footer.html index c00bf0187a..b6a3b84272 100644 --- a/cms/templates/widgets/footer.html +++ b/cms/templates/widgets/footer.html @@ -1,6 +1,49 @@ <%! 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.

+
+ + +
+ + +
+