Skip to content

E
edx-platform
Commit 57e5eb68 by Brian Talbot
Options

studio - basic design, interaction, and content for static in-page help

parent 2cd8f448
Showing with 500 additions and 223 deletions
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) {
......
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 {
......
cms/static/sass/_cms_mixins.scss
// 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
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
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';
......
cms/static/sass/elements/_controls.scss 0 → 100644
// 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
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
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));
......
cms/static/sass/elements/_sock.scss 0 → 100644
// 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
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,20 +58,25 @@
// ====================
// actions/labels
.t-action {
.t-action1 {
@include font-size(14);
font-weight: 600;
}
.t-action-primary {
@include font-size(14);
.t-action2 {
@include font-size(13);
font-weight: 600;
text-transform: uppercase;
}
.t-action-primary-s {
.t-action3 {
@include font-size(13);
}
.t-action4 {
@include font-size(12);
}
// ====================
// misc
......
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;
}
......
cms/templates/base.html
......@@ -53,10 +53,17 @@
<div class="wrapper-view wrapper">
<%include file="widgets/header.html" />
<div class="wrapper-main wrapper">
<%block name="content"></%block>
<%block name="content"></%block>
% if user.is_authenticated():
<%include file="widgets/sock.html" />
% endif
</div>
<div class="wrapper-bottom wrapper">
<%include file="widgets/footer.html" />
</div>
<%include file="widgets/footer.html" />
</div>
<%include file="widgets/tender.html" />
......
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>
<div class="wrapper-footer wrapper">
<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>
......@@ -57,13 +13,9 @@
<li class="nav-item nav-peripheral-pp">
<a href="#">Privacy Policy</a>
</li> -->
<li class="nav-item nav-peripheral-help">
<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">
<a class="show-tender" href="http://help.edge.edx.org/discussion/new" title="Use our feedback tool, Tender, to share your feedback"><i class="ss-icon ss-symbolicons-block icon-feedback">&#xE398;</i> Contact Us</a>
<a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback"><i class="ss-icon ss-symbolicons-block icon-feedback">&#xE398;</i> Contact Us</a>
</li>
% endif
</ol>
......
cms/templates/widgets/sock.html 0 → 100644
<%! from django.core.urlresolvers import reverse %>
<div class="wrapper-sock wrapper">
<ul class="list-actions list-cta">
<li class="action-item">
<a href="#sock" class="cta cta-show-sock"><i class="ss-icon ss-symbolicons-block icon icon-inline icon-help">&#x2753;</i> Need Help with Studio?</a>
</li>
</ul>
<section class="sock" id="sock">
<header>
<h2 class="title sr"><i class="ss-icon ss-symbolicons-block icon icon-inline icon-help">&#x2753;</i> edX Studio Help</h2>
</header>
<div class="support">
<h3 class="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 icon ss-symbolicons-block icon icon-inline icon-pdf">&#xEC00;</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 icon ss-symbolicons-block icon icon-inline 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 icon ss-symbolicons-block icon icon-inline 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="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="http://help.edge.edx.org/discussion/new" class="action action-primary show-tender" title="Use our feedback tool, Tender, to share your feedback"><i class="ss-icon ss-symbolicons-block icon icon-inline icon-feedback">&#xE398;</i> Share Studio Feedback</a>
</li>
</ul>
</div>
</section>
</div>
\ 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