Skip to content

E
edx-platform
Commit 33d39a85 by Christina Roberts
Options

Merge pull request #1809 from MITx/feature/btalbot/studio-helpsock 

Studio Help Sock
parents aca6cdba 275826d4
Showing with 690 additions and 85 deletions
cms/static/client_templates/checklist.html
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<% if (item['action_text'] !== '' && item['action_url'] !== '') { %> <% if (item['action_text'] !== '' && item['action_url'] !== '') { %>
<ul class="list-actions task-actions"> <ul class="list-actions task-actions">
<li> <li class="action-item">
<a href="<%= item['action_url'] %>" class="action action-primary" <a href="<%= item['action_url'] %>" class="action action-primary"
<% if (item['action_external']) { %> <% if (item['action_external']) { %>
rel="external" title="This link will open in a new browser window/tab" rel="external" title="This link will open in a new browser window/tab"
......
cms/static/js/base.js
...@@ -37,11 +37,11 @@ $(document).ready(function () { ...@@ -37,11 +37,11 @@ $(document).ready(function () {
$(this).select(); $(this).select();
}); });
$('body').addClass('js');
$('.unit .item-actions .delete-button').bind('click', deleteUnit); $('.unit .item-actions .delete-button').bind('click', deleteUnit);
$('.new-unit-item').bind('click', createNewUnit); $('.new-unit-item').bind('click', createNewUnit);
$('body').addClass('js');
// lean/simple modal // lean/simple modal
$('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' }); $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' });
$('a.action-modal-close').click(function(e){ $('a.action-modal-close').click(function(e){
...@@ -89,6 +89,9 @@ $(document).ready(function () { ...@@ -89,6 +89,9 @@ $(document).ready(function () {
// tender feedback window scrolling // tender feedback window scrolling
$('a.show-tender').bind('click', smoothScrollTop); $('a.show-tender').bind('click', smoothScrollTop);
// toggling footer additional support
$('.cta-show-sock').bind('click', toggleSock);
// toggling overview section details // toggling overview section details
$(function () { $(function () {
if ($('.courseware-section').length > 0) { if ($('.courseware-section').length > 0) {
...@@ -470,6 +473,33 @@ function onKeyUp(e) { ...@@ -470,6 +473,33 @@ function onKeyUp(e) {
} }
} }
function toggleSock(e) {
e.preventDefault();
var $btnLabel = $(this).find('.copy');
var $sock = $('.wrapper-sock');
var $sockContent = $sock.find('.wrapper-inner');
$sock.toggleClass('is-shown');
$sockContent.toggle('fast');
$.smoothScroll({
offset: -200,
easing: 'swing',
speed: 1000,
scrollElement: null,
scrollTarget: $sock
});
if($sock.hasClass('is-shown')) {
$btnLabel.text('Hide Studio Help');
}
else {
$btnLabel.text('Looking for Help with Studio?');
}
}
function toggleSubmodules(e) { function toggleSubmodules(e) {
e.preventDefault(); e.preventDefault();
$(this).toggleClass('expand').toggleClass('collapse'); $(this).toggleClass('expand').toggleClass('collapse');
......
cms/static/sass/_base.scss
...@@ -22,7 +22,7 @@ body, input { ...@@ -22,7 +22,7 @@ body, input {
a { a {
text-decoration: none; text-decoration: none;
color: $blue; color: $blue;
@include transition(color .15s); @include transition(color 0.25s ease-in-out);
&:hover { &:hover {
color: #cb9c40; color: #cb9c40;
...@@ -52,7 +52,6 @@ h1 { ...@@ -52,7 +52,6 @@ h1 {
// layout - basic page header // layout - basic page header
.wrapper-mast { .wrapper-mast {
margin: 0;
padding: 0 $baseline; padding: 0 $baseline;
position: relative; position: relative;
...@@ -63,7 +62,7 @@ h1 { ...@@ -63,7 +62,7 @@ h1 {
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
width: flex-grid(12); width: flex-grid(12);
margin: 0 auto $baseline auto; margin: ($baseline*1.5) auto $baseline auto;
color: $gray-d2; color: $gray-d2;
} }
...@@ -272,19 +271,17 @@ h1 { ...@@ -272,19 +271,17 @@ h1 {
} }
.title-1 { .title-1 {
@extend .t-title-1;
} }
.title-2 { .title-2 {
@include font-size(24); @extend .t-title-2;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
font-weight: 600;
} }
.title-3 { .title-3 {
@include font-size(16); @extend .t-title-3;
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
font-weight: 600;
} }
.title-4 { .title-4 {
...@@ -351,7 +348,7 @@ h1 { ...@@ -351,7 +348,7 @@ h1 {
// layout - grandfathered // layout - grandfathered
.main-wrapper { .main-wrapper {
position: relative; position: relative;
margin: 40px; margin: 0 ($baseline*2);
} }
.inner-wrapper { .inner-wrapper {
......
cms/static/sass/_cms_mixins.scss
// studio - utilities - mixins and extends // studio - utilities - mixins and extends
// ==================== // ====================
// mixins - utility
@mixin clearfix { @mixin clearfix {
&:after { &:after {
content: ''; content: '';
...@@ -11,6 +12,7 @@ ...@@ -11,6 +12,7 @@
} }
} }
// mixins - grandfathered
@mixin button { @mixin button {
display: inline-block; display: inline-block;
padding: 4px 20px 6px; padding: 4px 20px 6px;
...@@ -110,6 +112,21 @@ ...@@ -110,6 +112,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 { @mixin green-button {
@include button; @include button;
border: 1px solid $darkGreen; border: 1px solid $darkGreen;
...@@ -279,20 +296,97 @@ ...@@ -279,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 { @mixin active {
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: rgba(255, 255, 255, .3); background-color: rgba(255, 255, 255, .3);
@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset); @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); 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/_reset.scss
// studio - utilities - reset // studio - utilities - reset
// ==================== // ====================
// not ready for this yet, but this should be done as things get cleaner
// * { // * {
// @include box-sizing(border-box); // @include box-sizing(border-box);
// } // }
...@@ -26,6 +27,10 @@ time, mark, audio, video { ...@@ -26,6 +27,10 @@ time, mark, audio, video {
vertical-align: baseline; vertical-align: baseline;
} }
html,body {
height: 100%;
}
article, aside, details, figcaption, figure, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { footer, header, hgroup, menu, nav, section {
display: block; display: block;
......
cms/static/sass/_variables.scss
...@@ -57,6 +57,10 @@ $blue-s3: saturate($blue,45%); ...@@ -57,6 +57,10 @@ $blue-s3: saturate($blue,45%);
$blue-u1: desaturate($blue,15%); $blue-u1: desaturate($blue,15%);
$blue-u2: desaturate($blue,30%); $blue-u2: desaturate($blue,30%);
$blue-u3: desaturate($blue,45%); $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: rgb(183, 37, 103);
$pink-l1: tint($pink,20%); $pink-l1: tint($pink,20%);
...@@ -148,7 +152,7 @@ $shadow-l1: rgba(0,0,0,0.1); ...@@ -148,7 +152,7 @@ $shadow-l1: rgba(0,0,0,0.1);
$shadow-d1: rgba(0,0,0,0.4); $shadow-d1: rgba(0,0,0,0.4);
// colors - inherited // colors - inherited
$baseFontColor: #3c3c3c; $baseFontColor: $gray-d2;
$offBlack: #3c3c3c; $offBlack: #3c3c3c;
$green: #108614; $green: #108614;
$lightGrey: #edf1f5; $lightGrey: #edf1f5;
...@@ -163,4 +167,4 @@ $disabledGreen: rgb(124, 206, 153); ...@@ -163,4 +167,4 @@ $disabledGreen: rgb(124, 206, 153);
$darkGreen: rgb(52, 133, 76); $darkGreen: rgb(52, 133, 76);
$lightBluishGrey: rgb(197, 207, 223); $lightBluishGrey: rgb(197, 207, 223);
$lightBluishGrey2: rgb(213, 220, 228); $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
...@@ -21,9 +21,13 @@ ...@@ -21,9 +21,13 @@
@import 'base'; @import 'base';
// elements // elements
@import 'elements/typography';
@import 'elements/icons';
@import 'elements/controls';
@import 'elements/navigation';
@import 'elements/header'; @import 'elements/header';
@import 'elements/footer'; @import 'elements/footer';
@import 'elements/navigation'; @import 'elements/sock';
@import 'elements/forms'; @import 'elements/forms';
@import 'elements/modal'; @import 'elements/modal';
@import 'elements/alerts'; @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
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
// ==================== // ====================
.wrapper-footer { .wrapper-footer {
margin: ($baseline*1.5) 0 $baseline 0;
padding: $baseline;
position: relative; position: relative;
width: 100%; width: 100%;
margin: 0 0 $baseline 0;
padding: $baseline;
footer.primary { footer.primary {
@include clearfix(); @include clearfix();
...@@ -14,9 +14,7 @@ ...@@ -14,9 +14,7 @@
min-width: $fg-min-width; min-width: $fg-min-width;
width: flex-grid(12); width: flex-grid(12);
margin: 0 auto; margin: 0 auto;
padding-top: $baseline; color: $gray-l1;
border-top: 1px solid $gray-l4;
color: $gray-l2;
.colophon { .colophon {
width: flex-grid(4, 12); width: flex-grid(4, 12);
...@@ -24,6 +22,14 @@ ...@@ -24,6 +22,14 @@
margin-right: flex-gutter(2); margin-right: flex-gutter(2);
} }
a {
color: $gray;
&:hover, &:active {
color: $gray-d2;
}
}
.nav-peripheral { .nav-peripheral {
width: flex-grid(6, 12); width: flex-grid(6, 12);
float: right; float: right;
...@@ -36,14 +42,33 @@ ...@@ -36,14 +42,33 @@
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
}
}
a { a {
color: $gray-l1; @include border-radius(2px);
padding: ($baseline/2) ($baseline*0.75);
background: transparent;
&:hover, &:active { .ss-icon {
color: $blue; @include transition(top .25s ease-in-out .25s);
@include font-size(15);
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
color: $gray-l1;
}
&:hover, &:active {
color: $gray-d2;
.ss-icon {
color: $gray-d2;
}
}
&.is-active {
color: $gray-d2;
}
}
} }
} }
} }
......
cms/static/sass/elements/_header.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
// ==================== // ====================
.wrapper-header { .wrapper-header {
margin: 0 0 ($baseline*1.5) 0; margin: 0;
padding: $baseline; padding: $baseline;
border-bottom: 1px solid $gray; border-bottom: 1px solid $gray;
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
......
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 0 → 100644
// studio - elements - support sock
// ====================
.wrapper-sock {
@include clearfix();
position: relative;
margin: ($baseline*2) 0 0 0;
border-top: 1px solid $gray-l4;
width: 100%;
.wrapper-inner {
@include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
@extend .depth0;
display: none;
width: 100% !important;
border-bottom: 1px solid $white;
padding: 0 $baseline !important;
}
// sock - actions
.list-cta {
@extend .depth1;
position: absolute;
top: -($baseline*0.75);
width: 100%;
margin: 0 auto;
text-align: center;
.cta-show-sock {
@extend .btn-pill;
@extend .t-action3;
background: $gray-l5;
padding: ($baseline/2) $baseline;
color: $gray;
.icon {
@include font-size(16);
}
&:hover {
background: $blue;
color: $white;
}
}
}
// 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;
padding: ($baseline*2) 0;
color: $gray-l3;
// support body
header {
.title {
@extend .t-title-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;
margin-bottom: ($baseline/2);
}
.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
&.is-shown {
border-color: $gray-d3;
.list-cta .cta-show-sock {
background: $gray-d3;
border-color: $gray-d3;
color: $white;
}
}
}
\ 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(36);
}
.t-title-2 {
@include font-size(24);
font-weight: 600;
}
.t-title-3 {
@include font-size(16);
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-action1 {
@include font-size(14);
font-weight: 600;
}
.t-action2 {
@include font-size(13);
font-weight: 600;
text-transform: uppercase;
}
.t-action3 {
@include font-size(13);
}
.t-action4 {
@include font-size(12);
}
// ====================
// misc
.t-icon {
line-height: 0;
}
\ No newline at end of file
cms/static/sass/views/_account.scss
...@@ -71,7 +71,7 @@ body.signup, body.signin { ...@@ -71,7 +71,7 @@ body.signup, body.signin {
@include blue-button; @include blue-button;
@include transition(all .15s); @include transition(all .15s);
@include font-size(15); @include font-size(15);
display:block; display: block;
width: 100%; width: 100%;
padding: ($baseline*0.75) ($baseline/2); padding: ($baseline*0.75) ($baseline/2);
font-weight: 600; font-weight: 600;
......
cms/static/sass/views/_index.scss
...@@ -9,17 +9,6 @@ body.index { ...@@ -9,17 +9,6 @@ body.index {
margin-bottom: 0; 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 { .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta {
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0; margin: 0;
...@@ -199,7 +188,7 @@ body.index { ...@@ -199,7 +188,7 @@ body.index {
img { img {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: auto;
} }
} }
...@@ -306,8 +295,8 @@ body.index { ...@@ -306,8 +295,8 @@ body.index {
// call to action content // call to action content
.wrapper-content-cta { .wrapper-content-cta {
padding-bottom: ($baseline*2); position: relative;
padding-top: ($baseline*2); padding: ($baseline*2) 0;
background: $white; background: $white;
} }
......
cms/templates/base.html
...@@ -29,9 +29,7 @@ ...@@ -29,9 +29,7 @@
</head> </head>
<body class="<%block name='bodyclass'></%block> hide-wip"> <body class="<%block name='bodyclass'></%block> hide-wip">
<%include file="widgets/header.html" />
<%include file="courseware_vendor_js.html"/> <%include file="courseware_vendor_js.html"/>
<script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/underscore-min.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/underscore-min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script>
...@@ -55,7 +53,14 @@ ...@@ -55,7 +53,14 @@
document.location.protocol + '//www.youtube.com/player_api">\x3C/script>'); document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
</script> </script>
<%include file="widgets/header.html" />
<%block name="content"></%block> <%block name="content"></%block>
% if user.is_authenticated():
<%include file="widgets/sock.html" />
% endif
<%include file="widgets/footer.html" /> <%include file="widgets/footer.html" />
<%include file="widgets/tender.html" /> <%include file="widgets/tender.html" />
<%block name="jsextra"></%block> <%block name="jsextra"></%block>
...@@ -63,5 +68,3 @@ ...@@ -63,5 +68,3 @@
<%include file="widgets/qualaroo.html" /> <%include file="widgets/qualaroo.html" />
</html> </html>
cms/templates/course_info.html
...@@ -80,5 +80,4 @@ ...@@ -80,5 +80,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</%block> </%block>
\ No newline at end of file
cms/templates/howitworks.html
...@@ -134,10 +134,10 @@ ...@@ -134,10 +134,10 @@
</header> </header>
<ul class="list-actions"> <ul class="list-actions">
<li> <li class="action-item">
<a href="${reverse('signup')}" class="action action-primary">Sign Up &amp; Start Making an edX Course</a> <a href="${reverse('signup')}" class="action action-primary">Sign Up &amp; Start Making an edX Course</a>
</li> </li>
<li> <li class="action-item">
<a href="${reverse('login')}" class="action action-secondary">Already have a Studio Account? Sign In</a> <a href="${reverse('login')}" class="action action-secondary">Already have a Studio Account? Sign In</a>
</li> </li>
</ul> </ul>
......
cms/templates/overview.html
...@@ -104,20 +104,6 @@ ...@@ -104,20 +104,6 @@
</%block> </%block>
<%block name="content"> <%block name="content">
<div class="edit-subsection-publish-settings">
<div class="settings">
<h3>Section Release Date</h3>
<div class="picker datepair">
<input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
<input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
<div class="description">
<p>On the date set above, this section – <strong class="section-name"></strong> – will be released to students. Any units marked private will only be visible to admins.</p>
</div>
</div>
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
</div>
</div>
<div class="wrapper-mast wrapper"> <div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle"> <header class="mast has-actions has-subtitle">
<div class="title"> <div class="title">
...@@ -216,4 +202,18 @@ ...@@ -216,4 +202,18 @@
</div> </div>
</div> </div>
<footer></footer> <footer></footer>
<div class="edit-subsection-publish-settings">
<div class="settings">
<h3>Section Release Date</h3>
<div class="picker datepair">
<input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
<input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
<div class="description">
<p>On the date set above, this section – <strong class="section-name"></strong> – will be released to students. Any units marked private will only be visible to admins.</p>
</div>
</div>
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
</div>
</div>
</%block> </%block>
cms/templates/settings_advanced.html
...@@ -19,6 +19,12 @@ from contentstore import utils ...@@ -19,6 +19,12 @@ from contentstore import utils
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("is-focused");
}).blur(function() {
$("label").removeClass("is-focused");
});
// proactively populate advanced b/c it has the filtered list and doesn't really follow the model pattern // proactively populate advanced b/c it has the filtered list and doesn't really follow the model pattern
var advancedModel = new CMS.Models.Settings.Advanced(${advanced_dict | n}, {parse: true}); var advancedModel = new CMS.Models.Settings.Advanced(${advanced_dict | n}, {parse: true});
advancedModel.url = "${reverse('course_advanced_settings_updates', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}"; advancedModel.url = "${reverse('course_advanced_settings_updates', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}";
......
cms/templates/widgets/footer.html
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<div class="wrapper-footer wrapper">
<div class="wrapper-footer wrapper">
<footer class="primary" role="contentinfo"> <footer class="primary" role="contentinfo">
<div class="colophon"> <div class="colophon">
<p>&copy; 2013 <a href="http://www.edx.org" rel="external">edX</a>. All rights reserved.</p> <p>&copy; 2013 <a href="http://www.edx.org" rel="external">edX</a>. All rights reserved.</p>
...@@ -14,15 +13,11 @@ ...@@ -14,15 +13,11 @@
<li class="nav-item nav-peripheral-pp"> <li class="nav-item nav-peripheral-pp">
<a href="#">Privacy Policy</a> <a href="#">Privacy Policy</a>
</li> --> </li> -->
<li class="nav-item nav-peripheral-help">
<a href="http://help.edge.edx.org/" rel="external">edX Studio Help</a>
</li>
% if user.is_authenticated(): % if user.is_authenticated():
<li class="nav-item nav-peripheral-feedback"> <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">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">Contact Us</a>
</li> </li>
% endif % endif
</ol> </ol>
</nav> </nav>
</footer> </footer>
......
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> <span class="copy">Looking for Help with Studio?</span></a>
</li>
</ul>
<div class="wrapper-inner wrapper">
<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 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.</p>
</div>
<ul class="list-actions">
<li class="action-item">
<a href="http://files.edx.org/Getting_Started_with_Studio.pdf" class="action action-primary" title="This is a PDF Document"><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="https://edge.edx.org/courses/edX/edX101/How_to_Create_an_edX_Course/about" rel="external" 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">Contact us about Studio</h3>
<div class="copy">
<p>Have problems, questions, or suggestions about Studio? We're here to help and listen to any 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> Contact Us</a>
</li>
</ul>
</div>
</section>
</div>
</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