From 6889b2015b030b6a9d8ec0dcdcfe9d013faad324 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 27 Mar 2013 01:24:31 -0400 Subject: [PATCH] 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