Skip to content

E
edx-platform
Commit c8ab45cc by Brian Talbot
Options

studio - footer help ui revamp - animation, structure, styling - WIP

parent 756f7595
Showing with 301 additions and 164 deletions
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');
......
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;
......
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;
......
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;
......
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';
......
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
cms/static/sass/elements/_icons.scss 0 → 100644
// studio - elements - icons
// ====================
.icon {
}
.ss-icon {
}
.icon-inline {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
\ No newline at end of file
cms/static/sass/elements/_sock.scss deleted 100644 → 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
cms/static/sass/elements/_typography.scss 0 → 100644
// 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
cms/templates/base.html
......@@ -53,8 +53,9 @@
<div class="wrapper-view wrapper">
<%include file="widgets/header.html" />
<div class="wrapper-main wrapper">
<%block name="content"></%block>
<%include file="widgets/sock.html" />
</div>
<%include file="widgets/footer.html" />
</div>
......
cms/templates/widgets/footer.html
<%! from django.core.urlresolvers import reverse %>
<div class="wrapper-footer wrapper">
<section class="sock">
<header>
<h2 class="title"><i class="ss-icon ss-symbolicons-block icon-help">&#xEE11;</i> edX Studio Help</h2>
</header>
<div class="support">
<h3 class="sr title">Studio Support</h3>
<div class="copy">
<p>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.</p>
</div>
<ul class="list-actions">
<li class="action-item">
<a href="" class="action action-primary"><i class="ss-icon ss-symbolicons-block icon-download">&#xEB02;</i> Download Studio Documentation</a>
<span class="tip">How to use Studio to build your course</span>
</li>
<li class="action-item">
<a href="http://help.edge.edx.org/" rel="external" class="action action-primary"><i class="ss-icon ss-symbolicons-block icon-help">&#xEE11;</i> Studio Help Center</a>
<span class="tip"><i class="ss-icon ss-symbolicons-block icon-help">&#xEE11;</i> Studio Help Center</span>
</li>
<li class="action-item">
<a href="" class="action action-primary"><i class="ss-icon ss-symbolicons-block icon-enroll">&#x1F393;</i> Enroll in edX101</a>
<span class="tip">How to use Studio to build your course</span>
</li>
</ul>
</div>
<div class="feedback">
<h3 class="sr title">Share Feedback on Studio</h3>
<div class="copy">
<p>Have questions or thoughts about using Studio? We're here to help and listen to feedback you want to share.</p>
</div>
<ul class="list-actions">
<li class="action-item">
<a href="" class="action action-primary"><i class="ss-icon ss-symbolicons-block icon-feedback">&#xE398;</i> Share Studio Feedback</a>
</li>
</ul>
</div>
</section>
<footer class="primary" role="contentinfo">
<div class="colophon">
<p>&copy; 2013 <a href="http://www.edx.org" rel="external">edX</a>. All rights reserved.</p>
......@@ -16,7 +59,7 @@
</li> -->
<li class="nav-item nav-peripheral-help">
<a href="http://help.edge.edx.org/" rel="external"><i class="ss-icon ss-symbolicons-block icon-help">&#xEE11;</i> edX Studio Help</a>
<a class="show-support" href=""><i class="ss-icon ss-symbolicons-block icon-help">&#xEE11;</i> edX Studio Help</a>
</li>
% if user.is_authenticated():
<li class="nav-item nav-peripheral-feedback">
......
cms/templates/widgets/sock.html deleted 100644 → 0
<%! from django.core.urlresolvers import reverse %>
% if user.is_authenticated():
<div class="wrapper-sock wrapper">
<section class="sock">
<header>
<h2 class="title"><i class="ss-icon ss-symbolicons-block icon-help">&#xEE11;</i> Studio Support</h2>
</header>
<div class="support">
<h3 class="sr title">Studio Support</h3>
<div class="copy">
<p>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.</p>
</div>
<ul class="list-actions">
<li class="action-item">
<a href="" class="action action-primary"><i class="ss-icon ss-symbolicons-block icon-download">&#xEB02;</i> Download Studio Documentation</a>
<span class="tip">How to use Studio to build your course</span>
</li>
<li class="action-item">
<a href="" class="action action-primary"><i class="ss-icon ss-symbolicons-block icon-enroll">&#x1F393;</i> Studio Help Center</a>
<span class="tip"><i class="ss-icon ss-symbolicons-block icon-help">&#xEE11;</i> Studio Help Center</span>
</li>
<li class="action-item">
<a href="" class="action action-primary"><i class="ss-icon ss-symbolicons-block icon-enroll">&#x1F393;</i> Enroll in edX101</a>
<span class="tip">How to use Studio to build your course</span>
</li>
</ul>
</div>
<div class="feedback">
<h3 class="sr title">Share Feedback on Studio</h3>
<div class="copy">
<p>Have questions or thoughts about using Studio? We're here to help and listen to feedback you want to share.</p>
</div>
<ul class="list-actions">
<li class="action-item">
<a href="" class="action action-primary"><i class="ss-icon ss-symbolicons-block icon-feedback">&#xE398;</i> Share Studio Feedback</a>
</li>
</ul>
</div>
</section>
</div>
% endif
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment