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 59 additions and 43 deletions
cms/static/js/base.js
......@@ -460,15 +460,29 @@ function onKeyUp(e) {
function toggleSock(e) {
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({
offset: -200,
easing: 'swing',
speed: 1000,
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) {
......
cms/static/sass/elements/_footer.scss
......@@ -4,7 +4,7 @@
.wrapper-footer {
position: relative;
width: 100%;
margin: ($baseline*1.5) 0 $baseline 0;
margin: 0 0 $baseline 0;
padding: $baseline;
footer.primary {
......@@ -14,8 +14,6 @@
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto;
border-top: 1px solid $gray-l4;
padding: $baseline 0 0 0;
color: $gray-l1;
.colophon {
......
cms/static/sass/elements/_sock.scss
......@@ -2,29 +2,44 @@
// ====================
.wrapper-sock {
@include transition(background 0.25s ease-in-out);
@include clearfix();
position: relative;
width: 100%;
margin: ($baseline*2.5) 0;
padding: 0 $baseline;
margin: ($baseline*2) 0 0 0;
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 {
position: relative;
top: -($baseline);
@extend .depth1;
position: absolute;
top: -($baseline*0.75);
width: 100%;
margin: 0 auto;
text-align: center;
.cta-show-sock {
@extend .btn-secondary-gray;
@extend .btn-pill;
@extend .t-action3;
background: $gray-l5;
padding: ($baseline/2) $baseline;
color: $gray;
.icon {
@include font-size(17);
@include font-size(16);
}
&:hover {
background: $blue-s1;
color: $white;
}
}
}
......@@ -33,21 +48,18 @@
.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;
padding: ($baseline*2) 0;
color: $gray-l3;
// support body
header {
.title {
@extend .t-title-3;
margin-bottom: ($baseline/2);
@extend .t-title-2;
}
.ss-icon {
......@@ -63,6 +75,7 @@
.title {
@extend .t-title-3;
color: $white;
margin-bottom: ($baseline/2);
}
.copy {
......@@ -125,28 +138,15 @@
}
}
}
}
// 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;
}
// case: sock content is shown
&.is-shown {
border-color: $gray-d3;
.sock {
display: block;
opacity: 1.0;
pointer-events: auto;
.list-cta .cta-show-sock {
background: $gray-d3;
border-color: $gray-d3;
color: $white;
}
}
}
\ No newline at end of file
cms/templates/widgets/footer.html
......@@ -15,7 +15,7 @@
</li> -->
% if user.is_authenticated():
<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>
% endif
</ol>
......
cms/templates/widgets/sock.html
......@@ -2,10 +2,11 @@
<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>
<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>
......@@ -35,7 +36,7 @@
</div>
<div class="feedback">
<h3 class="title">Share Feedback on Studio</h3>
<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>
......@@ -44,9 +45,10 @@
<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>
<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