Skip to content

E
edx-platform
Commit aaa67b28 by Brian Talbot
Options

Studio: revises template logic, html, and styling for Dashboard UI states

parent 135d10d4
Showing with 190 additions and 104 deletions
cms/static/sass/_base.scss
...@@ -446,6 +446,24 @@ p, ul, ol, dl { ...@@ -446,6 +446,24 @@ p, ul, ol, dl {
} }
} }
// actions
.list-actions {
@extend .no-list;
.action-item {
margin-bottom: ($baseline/4);
border-bottom: 1px dotted $gray-l4;
padding-bottom: ($baseline/4);
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
}
}
}
// navigation // navigation
.nav-related, .nav-page { .nav-related, .nav-page {
......
cms/static/sass/elements/_system-help.scss
...@@ -104,6 +104,22 @@ ...@@ -104,6 +104,22 @@
} }
} }
} }
// list of notices all in one
&.list-notices {
.notice-item {
margin-bottom: $baseline;
border-bottom: 1px solid $gray-l3;
padding-bottom: $baseline;
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
}
}
}
} }
// particular notice - warnings around a workflow for something // particular notice - warnings around a workflow for something
...@@ -128,11 +144,11 @@ ...@@ -128,11 +144,11 @@
background-color: $gray-l4; background-color: $gray-l4;
.title { .title {
color: $gray-d1; color: $gray-d3;
} }
.copy { .copy {
color: $gray; color: $gray-d2;
} }
&.has-actions { &.has-actions {
......
cms/static/sass/views/_dashboard.scss
...@@ -36,7 +36,7 @@ body.dashboard { ...@@ -36,7 +36,7 @@ body.dashboard {
width: flexgrid(9, 9); width: flexgrid(9, 9);
// CASE: notice has actions { // CASE: notice has actions {
&.has-actions { &.has-actions, &.list-notices .notice-item.has-actions {
.msg, .list-actions { .msg, .list-actions {
display: inline-block; display: inline-block;
...@@ -59,6 +59,7 @@ body.dashboard { ...@@ -59,6 +59,7 @@ body.dashboard {
.action-create-course { .action-create-course {
@extend .btn-primary-green; @extend .btn-primary-green;
@extend .t-action3;
} }
} }
} }
...@@ -66,8 +67,8 @@ body.dashboard { ...@@ -66,8 +67,8 @@ body.dashboard {
// elements - authorship controls // elements - course creation rights controls
.wrapper-authorshiprights { .wrapper-creationrights {
overflow: hidden; overflow: hidden;
.ui-toggle-control { .ui-toggle-control {
...@@ -129,8 +130,8 @@ body.dashboard { ...@@ -129,8 +130,8 @@ body.dashboard {
} }
// elements - authorship controls // elements - course creation rights controls
.status-authorship { .status-creationrights {
margin-top: $baseline; margin-top: $baseline;
.title { .title {
...@@ -144,7 +145,7 @@ body.dashboard { ...@@ -144,7 +145,7 @@ body.dashboard {
} }
.list-actions { .list-actions, .form-actions {
margin-top: ($baseline*0.75); margin-top: ($baseline*0.75);
.action-item { .action-item {
...@@ -253,10 +254,10 @@ body.dashboard { ...@@ -253,10 +254,10 @@ body.dashboard {
} }
.class-list { .class-list {
margin-top: 20px; margin-top: $baseline;
border-radius: 3px; border-radius: 3px;
border: 1px solid $darkGrey; border: 1px solid $gray-d2;
background: #fff; background: $white;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
li { li {
......
cms/templates/index.html
...@@ -2,22 +2,6 @@ ...@@ -2,22 +2,6 @@
<%inherit file="base.html" /> <%inherit file="base.html" />
<%block name="jsextra">
<script type="text/javascript">
$(document).ready(function () {
// showing/hiding authorship rights UI
$('.show-authorshiprights').click(function(e){
(e).preventDefault();
$(this).closest('.wrapper-authorshiprights').toggleClass('is-shown').find('.ui-toggle-control').toggleClass('current');
});
});
</script>
</%block>
<%block name="title">${_("My Courses")}</%block> <%block name="title">${_("My Courses")}</%block>
<%block name="bodyclass">is-signedin index dashboard</%block> <%block name="bodyclass">is-signedin index dashboard</%block>
...@@ -50,6 +34,19 @@ ...@@ -50,6 +34,19 @@
</script> </script>
</%block> </%block>
<%block name="jsextra">
<script type="text/javascript">
$(document).ready(function () {
// showing/hiding creation rights UI
$('.show-creationrights').click(function(e){
(e).preventDefault();
$(this).closest('.wrapper-creationrights').toggleClass('is-shown').find('.ui-toggle-control').toggleClass('current');
});
});
</script>
</%block>
<%block name="content"> <%block name="content">
<div class="wrapper-mast wrapper"> <div class="wrapper-mast wrapper">
<header class="mast has-actions"> <header class="mast has-actions">
...@@ -60,13 +57,12 @@ ...@@ -60,13 +57,12 @@
<h3 class="sr">${_("Page Actions")}</h3> <h3 class="sr">${_("Page Actions")}</h3>
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
<!-- if can create courses --> % if not disable_course_creation and course_creator_status=='granted':
% if not disable_course_creation and course_creator_status=='granted': <a href="#" class="button new-button new-course-button"><i class="icon-plus icon-inline"></i>
<a href="#" class="button new-button new-course-button"><i class="icon-plus icon-inline"></i> ${_("New Course")}</a>
${_("New Course")}</a> % elif disable_course_creation and settings.MITX_FEATURES.get('STAFF_EMAIL',''):
% elif disable_course_creation and settings.MITX_FEATURES.get('STAFF_EMAIL',''): <a href="mailto:${settings.MITX_FEATURES.get('STAFF_EMAIL','')}">${_("Email staff to create course")}</a>
<a href="mailto:${settings.MITX_FEATURES.get('STAFF_EMAIL','')}">${_("Email staff to create course")}</a> % endif
% endif
</li> </li>
</ul> </ul>
</nav> </nav>
...@@ -75,7 +71,6 @@ ...@@ -75,7 +71,6 @@
</div> </div>
<div class="wrapper-content wrapper"> <div class="wrapper-content wrapper">
<!-- if user is verified/registered studio user -->
% if user.is_active: % if user.is_active:
<section class="content"> <section class="content">
<article class="content-primary" role="main"> <article class="content-primary" role="main">
...@@ -83,86 +78,146 @@ ...@@ -83,86 +78,146 @@
<div class="introduction"> <div class="introduction">
<h2 class="title">${_("Welcome, %(name)s!") % dict(name= user.username)}</h2> <h2 class="title">${_("Welcome, %(name)s!") % dict(name= user.username)}</h2>
%if len(courses) > 0:
<div class="copy"> <div class="copy">
%if len(courses) > 0: <p>${_("Here are all of the courses you currently have access to in Studio:")}</p>
<p>${_("Here are all of the courses you currently have access to in Studio:")}</p>
%else:
<!-- TODO: update this copy -->
<p>${_("Sorry, you don't have any courses!")}</p>
%endif
</div> </div>
%else:
<div class="copy">
<p>${_("You currently aren't associated with any Studio Courses.")}</p>
</div>
%endif
</div> </div>
<div class="my-classes"> %if len(courses) > 0:
<ul class="class-list"> <div class="list-courses">
%for course, url, lms_link in sorted(courses, key=lambda s: s[0].lower() if s[0] is not None else ''): <div class="my-classes">
<li> <ul class="class-list">
<a class="class-link" href="${url}" class="class-name"> %for course, url, lms_link in sorted(courses, key=lambda s: s[0].lower() if s[0] is not None else ''):
<span class="class-name">${course}</span> <li>
</a> <a class="class-link" href="${url}" class="class-name">
<a href="${lms_link}" rel="external" class="button view-button view-live-button">View Live</a> <span class="class-name">${course}</span>
</li> </a>
%endfor <a href="${lms_link}" rel="external" class="button view-button view-live-button">View Live</a>
</ul> </li>
%endfor
</ul>
</div>
</div> </div>
% if not disable_course_creation and course_creator_status != "granted": %else:
<div class="wrapper wrapper-authorshiprights"> <div class="notice notice-incontext notice-instruction notice-instruction-nocourses list-notices">
<h3 class="title"> <div class="notice-item">
<a href="#instruction-authorshiprights" class="ui-toggle-control show-authorshiprights"><span class="label">${_('Becoming a Course Author in Studio')}</span> <i class="icon-remove-sign"></i></a> <div class="msg">
</h3> <h3 class="title">${_("Are you staff on an existing Studio course?")}</h3>
<div class="copy">
<p>${_('You will need to be added to the course in Studio by the Course Creator. Please get in touch with the course creator or administrator for the specific course you are helping to author.')}</p>
</div>
</div>
</div>
<div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights ui-toggle-target" id="instruction-authorshiprights"> %if not disable_course_creation and course_creator_status == "granted":
<div class="copy"> <div class="notice-item has-actions">
<p>${_('edX Studio is a hosted solution for our xConsortium partners and selected guests. Courses for which you are a team member appear above for you to edit, while Course Authorship privileges are granted by edX. Our team will evaluate your request and provide you feedback within 24 hours during the work week.')}</p> <div class="msg">
<h3 class="title">${_('Create Your First Course')}</h3>
<div class="copy">
<p>${_('Your new course is just a click away!')}</p>
</div>
</div> </div>
<!-- if request is unrequested --> <ul class="list-actions">
%if course_creator_status == "unrequested": <li class="action-item">
<div class="status status-authorship is-unrequested"> <a href="#" class="action-primary action-create action-create-course new-course-button"><i class="icon-plus icon-inline"></i> ${_('Create Your First Course')}</a>
<h4 class="title">${_('Your Authorship Request Status:')}</h4> </li>
</ul>
<ul class="list-actions"> </div>
<li class="action-item"> % endif
<!-- request_course_creator_post -->
<a href="#" class="action-primary action-request">${_('Request the Ability to Create Courses')}</a> </div>
</li> % endif
</ul>
% if not disable_course_creation and course_creator_status != "granted":
%if course_creator_status == "unrequested":
<div class="wrapper wrapper-creationrights">
<h3 class="title">
<a href="#instruction-creationrights" class="ui-toggle-control show-creationrights"><span class="label">${_('Becoming a Course Creator in Studio')}</span> <i class="icon-remove-sign"></i></a>
</h3>
<div class="notice notice-incontext notice-instruction notice-instruction-creationrights ui-toggle-target" id="instruction-creationrights">
<div class="copy">
<p>${_('edX Studio is a hosted solution for our xConsortium partners and selected guests. Courses for which you are a team member appear above for you to edit, while Course Creator privileges are granted by edX. Our team will evaluate your request and provide you feedback within 24 hours during the work week.')}</p>
</div>
<div class="status status-creationrights is-unrequested">
<h4 class="title">${_('Your Course Creator Request Status:')}</h4>
<form id="request-coursecreator" action="request_course_creator_post" method="post">
<input type="hidden" id="request-coursecreator-user" name="request-coursecreator-user" value="${ user.username }" />
<input type="hidden" id="request-coursecreator-status" name="request-coursecreator-status" value="Requested" />
<div class="form-actions">
<button type="submit" id="request-coursecreator-submit" name="request-coursecreator-submit" class="action-primary action-request">${_('Request the Ability to Create Courses')}</button>
</div>
</form>
</div>
</div> </div>
</div>
%elif course_creator_status == "denied":
<div class="wrapper wrapper-creationrights is-shown">
<h3 class="title">
<a href="#instruction-creationrights" class="ui-toggle-control show-creationrights"><span class="label">${_('Your Course Creator Request Status')}</span> <i class="icon-remove-sign"></i></a>
</h3>
<!-- if request is pending --> <div class="notice notice-incontext notice-instruction notice-instruction-creationrights ui-toggle-target" id="instruction-creationrights">
%elif course_creator_status == "pending": <div class="copy">
<div class="status status-authorship has-status is-pending"> <p>${_('edX Studio is a hosted solution for our xConsortium partners and selected guests. Courses for which you are a team member appear above for you to edit, while Course Creator privileges are granted by edX. Our team is has completed evaluating your request.')}</p>
<h4 class="title">${_('Your Authorship Request Status:')}</h4> </div>
<dl class="status-update"> <div class="status status-creationrights has-status is-denied">
<dt class="label">${_('Your authorship request is:')}</dt> <h4 class="title">${_('Your Course Creator Request Status:')}</h4>
<dd class="value">
<span class="status-indicator"></span> <dl class="status-update">
<span class="value-formal">${_('Pending')}</span> <dt class="label">${_('Your Course Creator request is:')}</dt>
<span class="value-description">${_('Your request is currently being reviewed by edX staff and should be updated shortly.')}</span> <dd class="value">
</dd> <span class="status-indicator"></span>
</dl> <span class="value-formal">${_('Denied')}</span>
<span class="value-description">${_('Your request did not meet the criteria/guidelines specified by edX Staff.')}</span>
</dd>
</dl>
</div>
</div> </div>
</div>
<!-- if request is denied --> %elif course_creator_status == "pending":
%elif course_creator_status == "denied": <div class="wrapper wrapper-creationrights is-shown">
<div class="status status-authorship has-status is-denied"> <h3 class="title">
<h4 class="title">${_('Your Authorship Request Status:')}</h4> <a href="#instruction-creationrights" class="ui-toggle-control show-creationrights"><span class="label">${_('Your Course Creator Request Status')}</span> <i class="icon-remove-sign"></i></a>
</h3>
<dl class="status-update">
<dt class="label">${_('Your authorship request is:')}</dt> <div class="notice notice-incontext notice-instruction notice-instruction-creationrights ui-toggle-target" id="instruction-creationrights">
<dd class="value"> <div class="copy">
<span class="status-indicator"></span> <p>${_('edX Studio is a hosted solution for our xConsortium partners and selected guests. Courses for which you are a team member appear above for you to edit, while Course Creator privileges are granted by edX. Our team is currently evaluating your request.')}</p>
<span class="value-formal">${_('Denied')}</span> </div>
<span class="value-description">${_('Your request did not meet the criteria/guidelines specified by edX Staff.')}</span>
</dd> <div class="status status-creationrights has-status is-pending">
</dl> <h4 class="title">${_('Your Course Creator Request Status:')}</h4>
<dl class="status-update">
<dt class="label">${_('Your Course Creator request is:')}</dt>
<dd class="value">
<span class="status-indicator"></span>
<span class="value-formal">${_('Pending')}</span>
<span class="value-description">${_('Your request is currently being reviewed by edX staff and should be updated shortly.')}</span>
</dd>
</dl>
</div>
</div> </div>
% endif
</div> </div>
</div> % endif
% endif % endif
</article> </article>
...@@ -181,7 +236,6 @@ ...@@ -181,7 +236,6 @@
</ol> </ol>
</div> </div>
<!-- if course creation happens through edX staff -->
% if disable_course_creation and settings.MITX_FEATURES.get('STAFF_EMAIL',''): % if disable_course_creation and settings.MITX_FEATURES.get('STAFF_EMAIL',''):
<div class="bit"> <div class="bit">
<h3 class="title title-3">${_('Can I create courses in Studio?')}</h3> <h3 class="title title-3">${_('Can I create courses in Studio?')}</h3>
...@@ -189,14 +243,12 @@ ...@@ -189,14 +243,12 @@
</div> </div>
% endif % endif
<!-- if request is unrequested -->
% if not disable_course_creation and course_creator_status == "unrequested": % if not disable_course_creation and course_creator_status == "unrequested":
<div class="bit"> <div class="bit">
<h3 class="title title-3">${_('Can I create courses in Studio?')}</h3> <h3 class="title title-3">${_('Can I create courses in Studio?')}</h3>
<p>${_('In order to create courses in Studio, you must have authorship rights to create your own course.')}</p> <p>${_('In order to create courses in Studio, you must have Course Creator privileges to create your own course.')}</p>
</div> </div>
<!-- if request is denied -->
% elif not disable_course_creation and course_creator_status == "denied": % elif not disable_course_creation and course_creator_status == "denied":
<div class="bit"> <div class="bit">
<h3 class="title title-3">${_('Can I create courses in Studio?')}</h3> <h3 class="title title-3">${_('Can I create courses in Studio?')}</h3>
...@@ -208,7 +260,6 @@ ...@@ -208,7 +260,6 @@
</section> </section>
<!-- if user is not verified/registered studio user -->
% else: % else:
<section class="content"> <section class="content">
<article class="content-primary" role="main"> <article class="content-primary" role="main">
......
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