Skip to content

E
edx-platform
Commit 6952b8e6 by Brian Talbot
Options

studio - revising design, interaction, and FED of help sock

parent 8b9ecd93
Showing with 95 additions and 79 deletions
cms/static/js/base.js
...@@ -460,15 +460,29 @@ function onKeyUp(e) { ...@@ -460,15 +460,29 @@ function onKeyUp(e) {
function toggleSock(e) { function toggleSock(e) {
e.preventDefault(); e.preventDefault();
$body.toggleClass('sock-is-shown');
var $btnLabel = $(this).find('.copy');
var $sock = $('.wrapper-sock');
var $sockContent = $sock.find('.wrapper-inner');
$sock.toggleClass('is-shown');
$sockContent.toggle('fast');
$.smoothScroll({ $.smoothScroll({
offset: -200, offset: -200,
easing: 'swing', easing: 'swing',
speed: 1000, speed: 1000,
scrollElement: null, scrollElement: null,
scrollTarget: $('.wrapper-sock') 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) {
......
cms/static/sass/elements/_footer.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.wrapper-footer { .wrapper-footer {
position: relative; position: relative;
width: 100%; width: 100%;
margin: ($baseline*1.5) 0 $baseline 0; margin: 0 0 $baseline 0;
padding: $baseline; padding: $baseline;
footer.primary { footer.primary {
...@@ -14,8 +14,6 @@ ...@@ -14,8 +14,6 @@
min-width: $fg-min-width; min-width: $fg-min-width;
width: flex-grid(12); width: flex-grid(12);
margin: 0 auto; margin: 0 auto;
border-top: 1px solid $gray-l4;
padding: $baseline 0 0 0;
color: $gray-l1; color: $gray-l1;
.colophon { .colophon {
......
cms/static/sass/elements/_sock.scss
...@@ -2,29 +2,44 @@ ...@@ -2,29 +2,44 @@
// ==================== // ====================
.wrapper-sock { .wrapper-sock {
@include transition(background 0.25s ease-in-out);
@include clearfix(); @include clearfix();
position: relative; position: relative;
width: 100%; margin: ($baseline*2) 0 0 0;
margin: ($baseline*2.5) 0;
padding: 0 $baseline;
border-top: 1px solid $gray-l4; border-top: 1px solid $gray-l4;
width: 100%;
// actions .wrapper-inner {
@include linear-gradient($gray-d3 0%, $gray-d3 94%, $black 100%);
@extend .depth0;
display: none;
width: 100% !important;
border-bottom: 1px solid $white;
padding: 0 $baseline !important;
}
// sock - actions
.list-cta { .list-cta {
position: relative; @extend .depth1;
top: -($baseline); position: absolute;
top: -($baseline*0.75);
width: 100%;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
.cta-show-sock { .cta-show-sock {
@extend .btn-secondary-gray; @extend .btn-pill;
@extend .t-action3; @extend .t-action3;
background: $gray-l5; background: $gray-l5;
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
color: $gray;
.icon { .icon {
@include font-size(17); @include font-size(16);
}
&:hover {
background: $blue-s1;
color: $white;
} }
} }
} }
...@@ -33,21 +48,18 @@ ...@@ -33,21 +48,18 @@
.sock { .sock {
@include clearfix(); @include clearfix();
@extend .t-copy-sub2; @extend .t-copy-sub2;
display: none;
opacity: 0.0;
pointer-events: none;
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; margin: 0 auto;
padding: ($baseline*2) 0;
color: $gray-l3; color: $gray-l3;
// support body // support body
header { header {
.title { .title {
@extend .t-title-3; @extend .t-title-2;
margin-bottom: ($baseline/2);
} }
.ss-icon { .ss-icon {
...@@ -63,6 +75,7 @@ ...@@ -63,6 +75,7 @@
.title { .title {
@extend .t-title-3; @extend .t-title-3;
color: $white; color: $white;
margin-bottom: ($baseline/2);
} }
.copy { .copy {
...@@ -125,28 +138,15 @@ ...@@ -125,28 +138,15 @@
} }
} }
} }
}
// case: sock content is shown
.sock-is-shown {
.wrapper-sock { // case: sock content is shown
@include linear-gradient($gray-d4 0%, $gray-d3 2%, $gray-d3 98%, $gray-d4 100%); &.is-shown {
border-bottom: 1px solid $white; border-color: $gray-d3;
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 { .list-cta .cta-show-sock {
display: block; background: $gray-d3;
opacity: 1.0; border-color: $gray-d3;
pointer-events: auto; color: $white;
} }
} }
} }
\ No newline at end of file
cms/templates/widgets/footer.html
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</li> --> </li> -->
% if user.is_authenticated(): % if user.is_authenticated():
<li class="nav-item nav-peripheral-feedback"> <li class="nav-item nav-peripheral-feedback">
<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 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">Contact Us</a>
</li> </li>
% endif % endif
</ol> </ol>
......
cms/templates/widgets/sock.html
...@@ -2,51 +2,53 @@ ...@@ -2,51 +2,53 @@
<div class="wrapper-sock wrapper"> <div class="wrapper-sock wrapper">
<ul class="list-actions list-cta"> <ul class="list-actions list-cta">
<li class="action-item"> <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> <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> </li>
</ul> </ul>
<section class="sock" id="sock"> <div class="wrapper-inner wrapper">
<header> <section class="sock" id="sock">
<h2 class="title sr"><i class="ss-icon ss-symbolicons-block icon icon-inline icon-help">&#x2753;</i> edX Studio Help</h2> <header>
</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="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">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>
<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"> <ul class="list-actions">
<li class="action-item"> <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>
<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> <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> </li>
</ul> </ul>
</div> </div>
</section>
<div class="feedback">
<h3 class="title">Contact edX about 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> Contact Us</a>
</li>
</ul>
</div>
</section>
</div>
</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