Skip to content

E
edx-platform
Commit 756f7595 by Brian Talbot
Options

studio - in progress work on help UI

parent 74439746
Showing with 145 additions and 13 deletions
cms/static/client_templates/checklist.html
......@@ -44,7 +44,7 @@
<% if (item['action_text'] !== '' && item['action_url'] !== '') { %>
<ul class="list-actions task-actions">
<li>
<li class="action-item">
<a href="<%= item['action_url'] %>" class="action action-primary"
<% if (item['action_external']) { %>
rel="external" title="This link will open in a new browser window/tab"
......
cms/static/sass/_base.scss
......@@ -357,7 +357,8 @@ h1 {
// layout - grandfathered
.main-wrapper {
position: relative;
margin: 40px;
margin: ($baseline*2);
padding-bottom: $footer-primary-height;
}
.inner-wrapper {
......
cms/static/sass/_variables.scss
......@@ -155,7 +155,7 @@ $shadow-l1: rgba(0,0,0,0.1);
$shadow-d1: rgba(0,0,0,0.4);
// colors - inherited
$baseFontColor: #3c3c3c;
$baseFontColor: $gray-d2;
$offBlack: #3c3c3c;
$green: #108614;
$lightGrey: #edf1f5;
......
cms/static/sass/base-style.scss
......@@ -21,6 +21,8 @@
@import 'base';
// elements
@import 'elements/typography';
@import 'elements/icons';
@import 'elements/header';
@import 'elements/sock';
@import 'elements/footer';
......
cms/static/sass/elements/_sock.scss
......@@ -9,10 +9,101 @@
.sock {
@include clearfix();
@include font-size(13);
@extend .t-copy-sub2;
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto ($baseline*2) auto;
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/views/_account.scss
......@@ -71,7 +71,7 @@ body.signup, body.signin {
@include blue-button;
@include transition(all .15s);
@include font-size(15);
display:block;
display: block;
width: 100%;
padding: ($baseline*0.75) ($baseline/2);
font-weight: 600;
......
cms/templates/howitworks.html
......@@ -134,10 +134,10 @@
</header>
<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>
</li>
<li>
<li class="action-item">
<a href="${reverse('login')}" class="action action-secondary">Already have a Studio Account? Sign In</a>
</li>
</ul>
......
cms/templates/widgets/footer.html
......@@ -20,12 +20,9 @@
</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> Provide Feedback</a>
<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>
</li>
% endif
<li class="nav-item nav-peripheral-contact">
<a href="https://www.edx.org/contact" rel="external"><i class="ss-icon ss-symbolicons-block icon-contact">&#x2709;</i> Contact edX</a>
</li>
</ol>
</nav>
</footer>
......
cms/templates/widgets/sock.html
......@@ -2,7 +2,46 @@
% if user.is_authenticated():
<div class="wrapper-sock wrapper">
<section class="sock">
<h2>Sock!</h2>
<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