From 6889b2015b030b6a9d8ec0dcdcfe9d013faad324 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 27 Mar 2013 01:24:31 -0400 Subject: [PATCH 01/19] studio - added in revised footer styles and fix for smoothscroll --- cms/static/js/base.js | 4 +-- cms/static/sass/_base.scss | 6 ++++ cms/static/sass/_reset.scss | 5 +++ cms/static/sass/_variables.scss | 7 ++++ cms/static/sass/base-style.scss | 1 + cms/static/sass/elements/_footer.scss | 50 +++++++++++++++++++++------ cms/static/sass/elements/_sock.scss | 18 ++++++++++ cms/static/sass/views/_index.scss | 16 ++------- cms/templates/base.html | 15 ++++---- cms/templates/course_info.html | 1 - cms/templates/howitworks.html | 6 ++-- cms/templates/widgets/footer.html | 6 ++-- cms/templates/widgets/sock.html | 8 +++++ 13 files changed, 103 insertions(+), 40 deletions(-) create mode 100644 cms/static/sass/elements/_sock.scss create mode 100644 cms/templates/widgets/sock.html diff --git a/cms/static/js/base.js b/cms/static/js/base.js index eb9997622b..7135e2780c 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -81,7 +81,7 @@ $(document).ready(function () { }); // general link management - smooth scrolling page links - $('a[rel*="view"]').bind('click', smoothScrollLink); + $('a[rel*="view"][href|="#"]').bind('click', smoothScrollLink); // tender feedback window scrolling $('a.show-tender').bind('click', smoothScrollTop); @@ -159,7 +159,7 @@ function smoothScrollLink(e) { easing: 'swing', speed: 1000, scrollElement: null, - scrollTarget: $(this).attr('href') + scrollTarget: $(this).attr('href'), }); } diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index cadb442b7c..5901b19306 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -50,6 +50,12 @@ h1 { // ==================== +// layout - view +.wrapper-view { + position: relative; + min-height: 100%; +} + // layout - basic page header .wrapper-mast { margin: 0; diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss index 87a6e51232..963f04bb69 100644 --- a/cms/static/sass/_reset.scss +++ b/cms/static/sass/_reset.scss @@ -1,6 +1,7 @@ // studio - utilities - reset // ==================== +// not ready for this yet, but this should be done as things get cleaner // * { // @include box-sizing(border-box); // } @@ -26,6 +27,10 @@ time, mark, audio, video { vertical-align: baseline; } +html,body { + height: 100%; +} + article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 3bac14fdf4..ccbd3ed7b0 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -12,6 +12,9 @@ $fg-max-columns: 12; $fg-max-width: 1280px; $fg-min-width: 900px; +// elements +$footer-primary-height: ($baseline*3); + // type $sans-serif: 'Open Sans', $verdana; $body-line-height: golden-ratio(.875em, 1); @@ -57,6 +60,10 @@ $blue-s3: saturate($blue,45%); $blue-u1: desaturate($blue,15%); $blue-u2: desaturate($blue,30%); $blue-u3: desaturate($blue,45%); +$blue-t0: rgba(85, 151, 221,0.125); +$blue-t1: rgba(85, 151, 221,0.25); +$blue-t2: rgba(85, 151, 221,0.50); +$blue-t3: rgba(85, 151, 221,0.75); $pink: rgb(183, 37, 103); $pink-l1: tint($pink,20%); diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index 5c67789f72..bc6638bf14 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -22,6 +22,7 @@ // elements @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 b1c0f57bb2..dfebc6d44c 100644 --- a/cms/static/sass/elements/_footer.scss +++ b/cms/static/sass/elements/_footer.scss @@ -2,10 +2,14 @@ // ==================== .wrapper-footer { - margin: ($baseline*1.5) 0 $baseline 0; + @include box-shadow(inset 0 1px 2px $shadow-d1); + margin: ($baseline*1.5) 0 0 0; padding: $baseline; - position: relative; + position: absolute; + bottom: 0; width: 100%; + height: $footer-primary-height; + background: $gray-l3; footer.primary { @include clearfix(); @@ -14,9 +18,7 @@ min-width: $fg-min-width; width: flex-grid(12); margin: 0 auto; - padding-top: $baseline; - border-top: 1px solid $gray-l4; - color: $gray-l2; + color: $gray-l1; .colophon { width: flex-grid(4, 12); @@ -24,6 +26,14 @@ margin-right: flex-gutter(2); } + a { + color: $gray; + + &:hover, &:active { + color: $gray-d2; + } + } + .nav-peripheral { width: flex-grid(6, 12); float: right; @@ -36,14 +46,32 @@ &:last-child { margin-right: 0; } - } - } - a { - color: $gray-l1; + a { + @include border-radius(2px); + padding: ($baseline/2) ($baseline*0.75); + background: transparent; - &:hover, &:active { - color: $blue; + .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); + color: $gray-l1; + } + + &:hover, &:active { + color: $gray-d2; + + .ss-icon { + top: -($baseline/10); + color: $gray-d2; + } + } + } } } } diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss new file mode 100644 index 0000000000..e1b147b849 --- /dev/null +++ b/cms/static/sass/elements/_sock.scss @@ -0,0 +1,18 @@ +// studio - elements - sock +// ==================== + +.wrapper-sock { + margin: 0; + padding: $baseline $baseline $footer-primary-height $baseline; + position: relative; + width: 100%; + + .sock { + @include clearfix(); + @include font-size(13); + max-width: $fg-max-width; + min-width: $fg-min-width; + width: flex-grid(12); + margin: 0 auto ($baseline*2) auto; + } +} \ No newline at end of file diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss index f4087a8605..88beccc82d 100644 --- a/cms/static/sass/views/_index.scss +++ b/cms/static/sass/views/_index.scss @@ -9,17 +9,6 @@ body.index { margin-bottom: 0; } - .wrapper-footer { - margin: 0; - border-top: 2px solid $gray-l3; - - footer.primary { - border: none; - margin-top: 0; - padding-top: 0; - } - } - .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta { @include box-sizing(border-box); margin: 0; @@ -199,7 +188,7 @@ body.index { img { display: block; width: 100%; - height: 100%; + height: auto; } } @@ -306,7 +295,8 @@ body.index { // call to action content .wrapper-content-cta { - padding-bottom: ($baseline*2); + position: relative; + padding-bottom: ($footer-primary-height*2); padding-top: ($baseline*2); background: $white; } diff --git a/cms/templates/base.html b/cms/templates/base.html index fd2b96f03a..44847c1da4 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -27,9 +27,7 @@ - <%include file="widgets/header.html" /> <%include file="courseware_vendor_js.html"/> - @@ -53,11 +51,14 @@ document.location.protocol + '//www.youtube.com/player_api">\x3C/script>'); - <%block name="content"> - <%include file="widgets/footer.html" /> +
+ <%include file="widgets/header.html" /> + <%block name="content"> + <%include file="widgets/sock.html" /> + <%include file="widgets/footer.html" /> +
+ <%include file="widgets/tender.html" /> <%block name="jsextra"> - - - + \ No newline at end of file diff --git a/cms/templates/course_info.html b/cms/templates/course_info.html index f9166bf166..cbf436ecc5 100644 --- a/cms/templates/course_info.html +++ b/cms/templates/course_info.html @@ -80,5 +80,4 @@ - \ No newline at end of file diff --git a/cms/templates/howitworks.html b/cms/templates/howitworks.html index 1cf9b17710..7a819fceba 100644 --- a/cms/templates/howitworks.html +++ b/cms/templates/howitworks.html @@ -151,7 +151,7 @@
Simple two-level outline to organize your couse. Drag and drop, and see your course at a glance.
- + ␡ close modal @@ -164,7 +164,7 @@
Quickly create videos, text snippets, inline discussions, and a variety of problem types.
- + ␡ close modal @@ -177,7 +177,7 @@
Simply set the date of a section or subsection, and Studio will publish it to your students for you.
- + ␡ close modal diff --git a/cms/templates/widgets/footer.html b/cms/templates/widgets/footer.html index a3674cfe20..9ff98fa26b 100644 --- a/cms/templates/widgets/footer.html +++ b/cms/templates/widgets/footer.html @@ -16,13 +16,13 @@ -->
  • - edX Studio Help + edX Studio Help
  • - Provide Feedback + Provide Feedback
  • - Contact edX + ✉ Contact edX
    • diff --git a/cms/templates/widgets/sock.html b/cms/templates/widgets/sock.html new file mode 100644 index 0000000000..ff5f9c9ad4 --- /dev/null +++ b/cms/templates/widgets/sock.html @@ -0,0 +1,8 @@ +<%! from django.core.urlresolvers import reverse %> +% if user.is_authenticated(): +
    +
    +

    Sock!

    +
    +
    +% endif \ No newline at end of file From 25acab497e05ab6d9883726d0cba2ec5146fa6ae Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 27 Mar 2013 01:33:04 -0400 Subject: [PATCH 02/19] studio - corrected JQ selector for smoothscrolling in-page links --- cms/static/js/base.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 7135e2780c..211981b05a 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -81,7 +81,7 @@ $(document).ready(function () { }); // general link management - smooth scrolling page links - $('a[rel*="view"][href|="#"]').bind('click', smoothScrollLink); + $('a[rel*="view"][href^="#"]').bind('click', smoothScrollLink); // tender feedback window scrolling $('a.show-tender').bind('click', smoothScrollTop); From 74439746cc804fc2dfe9bc6b679f0a714093aa74 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 27 Mar 2013 01:38:36 -0400 Subject: [PATCH 03/19] studio - made provide feedback conditional for logged in users --- cms/templates/widgets/footer.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/cms/templates/widgets/footer.html b/cms/templates/widgets/footer.html index 9ff98fa26b..18ecf2bc39 100644 --- a/cms/templates/widgets/footer.html +++ b/cms/templates/widgets/footer.html @@ -18,9 +18,11 @@
  • edX Studio Help
    • + % if user.is_authenticated(): + + % endif
  • ✉ Contact edX
    • From 756f75951dca8311ff0d642af2ef3abddbf2c9b3 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 27 Mar 2013 16:28:49 -0400 Subject: [PATCH 04/19] studio - in progress work on help UI --- cms/static/client_templates/checklist.html | 2 +- cms/static/sass/_base.scss | 3 +- cms/static/sass/_variables.scss | 2 +- cms/static/sass/base-style.scss | 2 + cms/static/sass/elements/_sock.scss | 95 +++++++++++++++++++++- cms/static/sass/views/_account.scss | 2 +- cms/templates/howitworks.html | 4 +- cms/templates/widgets/footer.html | 5 +- cms/templates/widgets/sock.html | 41 +++++++++- 9 files changed, 143 insertions(+), 13 deletions(-) diff --git a/cms/static/client_templates/checklist.html b/cms/static/client_templates/checklist.html index ec6ff4e892..6884b0e9c9 100644 --- a/cms/static/client_templates/checklist.html +++ b/cms/static/client_templates/checklist.html @@ -44,7 +44,7 @@ <% if (item['action_text'] !== '' && item['action_url'] !== '') { %>
      -
    • +
    • rel="external" title="This link will open in a new browser window/tab" diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 5901b19306..5ce131288e 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -357,7 +357,8 @@ h1 { // layout - grandfathered .main-wrapper { position: relative; - margin: 40px; + margin: ($baseline*2); + padding-bottom: $footer-primary-height; } .inner-wrapper { diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index ccbd3ed7b0..ffa99e3fc6 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -155,7 +155,7 @@ $shadow-l1: rgba(0,0,0,0.1); $shadow-d1: rgba(0,0,0,0.4); // colors - inherited -$baseFontColor: #3c3c3c; +$baseFontColor: $gray-d2; $offBlack: #3c3c3c; $green: #108614; $lightGrey: #edf1f5; diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index bc6638bf14..e1afa45804 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -21,6 +21,8 @@ @import 'base'; // elements +@import 'elements/typography'; +@import 'elements/icons'; @import 'elements/header'; @import 'elements/sock'; @import 'elements/footer'; diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss index e1b147b849..e8fbcc3ef2 100644 --- a/cms/static/sass/elements/_sock.scss +++ b/cms/static/sass/elements/_sock.scss @@ -9,10 +9,101 @@ .sock { @include clearfix(); - @include font-size(13); + @extend .t-copy-sub2; max-width: $fg-max-width; min-width: $fg-min-width; width: flex-grid(12); - margin: 0 auto ($baseline*2) auto; + 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/views/_account.scss b/cms/static/sass/views/_account.scss index 1206db5e76..2be94a81ea 100644 --- a/cms/static/sass/views/_account.scss +++ b/cms/static/sass/views/_account.scss @@ -71,7 +71,7 @@ body.signup, body.signin { @include blue-button; @include transition(all .15s); @include font-size(15); - display:block; + display: block; width: 100%; padding: ($baseline*0.75) ($baseline/2); font-weight: 600; diff --git a/cms/templates/howitworks.html b/cms/templates/howitworks.html index 7a819fceba..6c0029c425 100644 --- a/cms/templates/howitworks.html +++ b/cms/templates/howitworks.html @@ -134,10 +134,10 @@ diff --git a/cms/templates/widgets/footer.html b/cms/templates/widgets/footer.html index 18ecf2bc39..c00bf0187a 100644 --- a/cms/templates/widgets/footer.html +++ b/cms/templates/widgets/footer.html @@ -20,12 +20,9 @@
      • % if user.is_authenticated(): % endif -
    • - ✉ Contact edX -
      • diff --git a/cms/templates/widgets/sock.html b/cms/templates/widgets/sock.html index ff5f9c9ad4..d8d191a773 100644 --- a/cms/templates/widgets/sock.html +++ b/cms/templates/widgets/sock.html @@ -2,7 +2,46 @@ % if user.is_authenticated():
      -

      Sock!

      +
      +

      Studio Support

      +
      + +
      +

      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.

      +
      + + +
      + +
      % endif \ No newline at end of file From c8ab45cc579c675265b0d9223d61eb2c3310614c Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 27 Mar 2013 17:40:24 -0400 Subject: [PATCH 05/19] studio - footer help ui revamp - animation, structure, styling - WIP --- cms/static/js/base.js | 11 +- cms/static/sass/_base.scss | 8 ++ cms/static/sass/_cms_mixins.scss | 15 +++ cms/static/sass/_variables.scss | 2 +- cms/static/sass/base-style.scss | 1 - cms/static/sass/elements/_footer.scss | 121 ++++++++++++++++++++++ cms/static/sass/elements/_icons.scss | 16 +++ cms/static/sass/elements/_sock.scss | 109 ------------------- cms/static/sass/elements/_typography.scss | 82 +++++++++++++++ cms/templates/base.html | 5 +- cms/templates/widgets/footer.html | 45 +++++++- cms/templates/widgets/sock.html | 47 --------- 12 files changed, 299 insertions(+), 163 deletions(-) create mode 100644 cms/static/sass/elements/_icons.scss delete mode 100644 cms/static/sass/elements/_sock.scss create mode 100644 cms/static/sass/elements/_typography.scss delete mode 100644 cms/templates/widgets/sock.html 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.

      +
      + + +
      + + +
      +

      © 2013 edX. All rights reserved.

      @@ -16,7 +59,7 @@ -->
    • - edX Studio Help + edX Studio Help
      • % if user.is_authenticated(): --> % if user.is_authenticated(): % endif diff --git a/cms/templates/widgets/sock.html b/cms/templates/widgets/sock.html index 098935f1aa..e2e888fb95 100644 --- a/cms/templates/widgets/sock.html +++ b/cms/templates/widgets/sock.html @@ -2,51 +2,53 @@
      -
      -
      -

      ❓ 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.

      -
      - - -
      - -
      +
      \ No newline at end of file From 2b749b972889b5aeae2f296772bf21a120120cde Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 3 Apr 2013 09:00:56 -0400 Subject: [PATCH 13/19] studio - tweaking the depth/shadow on the help sock UI --- cms/static/sass/elements/_sock.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss index b9ffa26057..b83bd941a2 100644 --- a/cms/static/sass/elements/_sock.scss +++ b/cms/static/sass/elements/_sock.scss @@ -9,7 +9,7 @@ width: 100%; .wrapper-inner { - @include linear-gradient($gray-d3 0%, $gray-d3 94%, $black 100%); + @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%); @extend .depth0; display: none; width: 100% !important; From 1c7e13e1e8ea5986cc7ee22d64c4bb86fed27578 Mon Sep 17 00:00:00 2001 From: "Mark L. Chang" Date: Thu, 4 Apr 2013 11:54:37 -0400 Subject: [PATCH 14/19] copy change --- cms/templates/widgets/sock.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/cms/templates/widgets/sock.html b/cms/templates/widgets/sock.html index e2e888fb95..b47b88a0ee 100644 --- a/cms/templates/widgets/sock.html +++ b/cms/templates/widgets/sock.html @@ -16,7 +16,7 @@

      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.

      +

      Need help with Studio? Creating a course is complex, so we're here to help? Take advantage of our documentation, help center, as well as our edX101 introduction course for course authors.

        @@ -36,10 +36,10 @@