Skip to content

E
edx-platform
Commit 394292ec by Brian Talbot
Options

Studio: revises static dashboard states for all authorship rights scenarios

parent 4d9d6a45
Showing with 722 additions and 130 deletions
cms/static/sass/_base.scss
...@@ -368,42 +368,6 @@ p, ul, ol, dl { ...@@ -368,42 +368,6 @@ p, ul, ol, dl {
color: $gray-d3; color: $gray-d3;
} }
} }
.introduction {
@include box-sizing(border-box);
@extend .t-copy-sub1;
width: flex-grid(12);
margin: 0 0 $baseline 0;
.copy strong {
font-weight: 600;
}
&.has-links {
@include clearfix();
.copy {
float: left;
width: flex-grid(8,12);
margin-right: flex-gutter();
}
.nav-introduction-supplementary {
@extend .t-copy-sub2;
float: right;
width: flex-grid(4,12);
display: block;
text-align: right;
.icon {
@extend .t-action3;
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
}
}
} }
.content-primary, .content-supplementary { .content-primary, .content-supplementary {
......
cms/static/sass/elements/_system-help.scss
// studio - elements - system help // studio - elements - system help
// ==================== // ====================
// view introductions - common greeting/starting points for the UI
.content .introduction {
@include box-sizing(border-box);
margin-bottom: $baseline;
.title {
@extend .t-title4;
font-weight: 600;
}
.copy {
@extend .t-copy-sub1;
}
strong {
font-weight: 600;
}
// CASE: has links alongside
&.has-links {
@include clearfix();
.copy {
float: left;
width: flex-grid(8,12);
margin-right: flex-gutter();
}
.nav-introduction-supplementary {
@extend .t-copy-sub2;
float: right;
width: flex-grid(4,12);
display: block;
text-align: right;
.icon {
@extend .t-action3;
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
}
}
// notices - in-context: to be used as notices to users within the context of a form/action // notices - in-context: to be used as notices to users within the context of a form/action
.notice-incontext { .notice-incontext {
@extend .ui-well; @extend .ui-well;
border-radius: ($baseline/10); border-radius: ($baseline/10);
position: relative;
overflow: hidden;
margin-bottom: $baseline;
.title { .title {
@extend .t-title7; @extend .t-title7;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
font-weight: 600; font-weight: 700;
} }
.copy { .copy {
@extend .t-copy-sub1; @extend .t-copy-sub1;
@include transition(opacity $tmg-f2 ease-in-out 0s); @include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.75; opacity: 0.75;
margin-bottom: $baseline;
&:last-child {
margin-bottom: 0;
}
} }
strong { strong {
font-weight: 600; font-weight: 600;
} }
&:hover { &.has-status {
.copy { .status-indicator {
opacity: 1.0; position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: ($baseline/4);
opacity: 0.40;
}
}
// CASE: notice has actions {
&.has-actions {
.list-actions {
margin-top: ($baseline*0.75);
.action-item {
}
.action-primary {
@extend .btn-primary-blue;
@extend .t-action3;
}
} }
} }
} }
// particular warnings around a workflow for something // particular notice - warnings around a workflow for something
.notice-workflow { .notice-workflow {
background: $yellow-l5; background: $yellow-l5;
.status-indicator {
background: $yellow;
}
title {
color: $gray-d1;
}
.copy { .copy {
color: $gray;
}
}
// particular notice - instructional
.notice-instruction {
background-color: $gray-l4;
.title {
color: $gray-d1; color: $gray-d1;
} }
.copy {
color: $gray;
}
&.has-actions {
.list-actions {
.action-item {
}
.action-primary {
@extend .btn-primary-blue;
@extend .t-action3;
}
}
}
}
// particular notice - confirmation
.notice-confirmation {
background-color: $green-l5;
.status-indicator {
background: $green-s1;
}
.title {
color: $green;
}
.copy {
color: $gray;
}
} }
cms/static/sass/views/_dashboard.scss
...@@ -3,8 +3,254 @@ ...@@ -3,8 +3,254 @@
body.dashboard { body.dashboard {
.my-classes { // temp
.content {
margin-bottom: ($baseline*5);
&:last-child {
margin-bottom: 0;
}
}
// ====================
// basic layout
.content-primary, .content-supplementary {
@include box-sizing(border-box);
float: left;
}
.content-primary {
width: flex-grid(9, 12);
margin-right: flex-gutter();
}
.content-supplementary {
width: flex-grid(3, 12);
}
// ====================
// elements - notices
.content .notice-incontext {
width: flexgrid(9, 9);
// CASE: notice has actions {
&.has-actions {
.msg, .list-actions {
display: inline-block;
vertical-align: middle;
}
.msg {
width: flex-grid(6, 9);
margin-right: flex-gutter();
}
.list-actions {
width: flex-grid(3, 9);
text-align: right;
margin-top: 0;
.action-item {
}
.action-create-course {
@extend .btn-primary-green;
}
}
}
}
// elements - authorship controls
.wrapper-authorshiprights {
overflow: hidden;
.ui-toggle-control {
@extend .depth2;
@extend .btn-secondary-gray;
@include clearfix();
display: block;
text-align: left;
// STATE: hover - syncing up colors with current so transition is smoother
&:hover {
background: $gray-d1;
color: $white;
}
.label {
@extend .t-action3;
float: left;
width: flex-grid(8, 9);
margin: 3px flex-gutter() 0 0;
}
.icon-remove-sign {
@extend .t-action1;
@include transition(rotate 10.0s ease-in-out 0s);
@include transform(rotate(45deg));
@include transform-origin(center center);
float: right;
text-align: right;
}
}
.ui-toggle-target {
@extend .depth1;
@include transition(opacity 0.50s ease-in-out 0s);
position: relative;
top: -2px;
display: none;
opacity: 0;
}
// CASE: when the content area is shown
&.is-shown {
.ui-toggle-control {
@include border-bottom-radius(0);
.icon-remove-sign {
@include transform(rotate(90deg));
@include transform-origin(center center);
}
}
.ui-toggle-target {
display: block;
opacity: 1.0;
}
}
}
// elements - authorship controls
.status-authorship {
margin-top: $baseline; margin-top: $baseline;
.title {
@extend .t-title7;
margin-bottom: ($baseline/4);
font-weight: 700;
color: $gray-d1;
}
.copy {
}
.list-actions {
margin-top: ($baseline*0.75);
.action-item {
}
.action-primary {
@extend .btn-primary-blue;
@extend .t-action3;
}
}
.status-update {
.label {
@extend .text-sr;
}
.value {
@include border-radius(($baseline/4));
position: relative;
overflow: hidden;
padding: ($baseline/5) ($baseline/2);
background: $gray;
.status-indicator {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: ($baseline/4);
opacity: 0.40;
}
}
.value-formal, .value-description {
@include border-radius(($baseline/10));
display: inline-block;
vertical-align: middle;
color: $white;
}
.value-formal {
@extend .t-title5;
margin: ($baseline/2);
font-weight: 700;
[class^="icon-"] {
margin-right: ($baseline/4);
}
}
.value-description {
@extend .t-copy-sub1;
position: relative;
color: $white;
opacity: 0.65;
}
}
// CASE: rights are not requested yet
&.is-unrequested {
.title {
@extend .text-sr;
}
}
// CASE: status is pending
&.is-pending {
.status-update {
.value {
background: $orange;
}
.status-indicator {
background: $orange-d1;
}
}
}
// CASE: status is rejected
&.is-rejected {
.status-update {
.value {
background: $red-l1;
}
.status-indicator {
background: $red-s1;
}
}
}
}
// ====================
.my-classes {
margin: $baseline 0;
} }
.class-list { .class-list {
......
cms/templates/index.html
...@@ -5,6 +5,22 @@ ...@@ -5,6 +5,22 @@
<%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>
<%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="header_extras"> <%block name="header_extras">
<script type="text/template" id="new-course-template"> <script type="text/template" id="new-course-template">
<section class="new-course"> <section class="new-course">
...@@ -45,7 +61,7 @@ ...@@ -45,7 +61,7 @@
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
% if not disable_course_creation: % if not disable_course_creation:
<a href="#" class="button new-button new-course-button"><i class="icon-plus"></i> ${_("New Course")}</a> <a href="#" class="button new-button new-course-button"><i class="icon-plus icon-inline"></i> ${_("New Course")}</a>
% elif settings.MITX_FEATURES.get('STAFF_EMAIL',''): % elif 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
...@@ -67,13 +83,15 @@ ...@@ -67,13 +83,15 @@
<h2 class="title">${_("Thanks for signing up, %(name)s!") % dict(name= user.username)}</h2> <h2 class="title">${_("Thanks for signing up, %(name)s!") % dict(name= user.username)}</h2>
</div> </div>
<div class="notice notice-incontext notice-instruction notice-instruction-verification"> <div class="notice notice-incontext notice-instruction notice-instruction-verification has-actions">
<div class="msg">
<h3 class="title">${_('Next Steps to Authoring in Studio')}</h3> <h3 class="title">${_('Next Steps to Authoring in Studio')}</h3>
<div class="copy"> <div class="copy">
<p>${_('Your on your way to authoring courses online using Studio. In order to complete your registration, we need you verify your registration by checking your $emailaddress email account. An activation message and next steps should be waiting for you there.')}</p> <p>${_('Your on your way to authoring courses online using Studio. In order to complete your registration, we need you verify your registration by checking your $emailaddress email account. An activation message and next steps should be waiting for you there.')}</p>
<p>${_('Need another copy of the verification email? You can also request another message be sent.')}</p> <p>${_('Need another copy of the verification email? You can also request another message be sent.')}</p>
</div> </div>
</div>
<ul class="list-actions"> <ul class="list-actions">
<li class="action-item"> <li class="action-item">
...@@ -85,19 +103,28 @@ ...@@ -85,19 +103,28 @@
<aside class="content-supplementary" role="complimentary"> <aside class="content-supplementary" role="complimentary">
<div class="bit"> <div class="bit">
<h3 class="title title-3">${_('Need Help?')}</h3> <h3 class="title title-3">${_('Need help?')}</h3>
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus.')}</p> <p>${_('If are having trouble verifying your new Studio account via the email address you used when signing up, you can request a new verification and activation message to that email address. If you still cannot receive a new message, you can request help via the link below.')}</p>
<nav class="nav-page checklists-current">
<ol>
<li class="nav-item">
<a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback">Request help with your Studio account</a>
</li>
</ol>
</nav>
</div> </div>
</aside> </aside>
</section> </section>
<!-- CASE 2: User Logged In + Verified + w/o Authorship Rights --> <!-- CASE 2: User Logged In + Verified + w/ Authorship Rights -->
<!-- ==================== --> <!-- ==================== -->
<section class="content"> <section class="content">
<article class="content-primary" role="main"> <article class="content-primary" role="main">
<div class="notice notice-incontext notice-confirmation"> <div class="notice notice-incontext notice-confirmation has-status">
<span class="status-indicator"></span>
<h3 class="title">${_('Your Account Has Been Verified')}</h3> <h3 class="title">${_('Your Account Has Been Verified')}</h3>
<div class="copy"> <div class="copy">
<p>${_('Thanks for verifying your edX Studio account.Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.')}</p> <p>${_('Thanks for verifying your edX Studio account.Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.')}</p>
...@@ -113,37 +140,126 @@ ...@@ -113,37 +140,126 @@
</div> </div>
<div class="course-list no-courses"> <div class="course-list no-courses">
<!-- if authorship rights not enabled - anyone with an account can author --> </div>
<div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights">
<div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights has-actions">
<div class="msg">
<h3 class="title">${_('Create Your First Course')}</h3> <h3 class="title">${_('Create Your First Course')}</h3>
<div class="copy"> <div class="copy">
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.')}</p> <p>${_('Workflow instructions for becoming and acceptable cases for being a Studio author. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.')}</p>
</div>
</div> </div>
<ul class="list-actions"> <ul class="list-actions">
<li class="action-item"> <li class="action-item">
<a href="#" class="action-primary action-create action-create-course new-course-button">${_('Create Your First Course')}</a> <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>
</li> </li>
</ul> </ul>
</div> </div>
</article>
<!-- if authorship rights enabled --> <aside class="content-supplementary" role="complimentary">
<div class="wrapper wrapper-authorshiprights"> <div class="bit">
<h3 class="title ui-toggle-visibility "> <h3 class="title title-3">${_('Need help?')}</h3>
<a href="#instruction-authorshiprights" class="ui-toggle-control"><span class="label">${_('Becoming a Course Author in Studio')}</span> <i class="icon-plus"></i></a> <p>${_('If you are new to Studio and having trouble getting started, there are a few things that may be of help:')}</p>
</h3>
<div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights ui-toggle-target" id="instruction-authorshiprights"> <nav class="nav-page checklists-current">
<ol>
<li class="nav-item">
<a href="http://files.edx.org/Getting_Started_with_Studio.pdf" title="This is a PDF Document">${_('Get started by reading Studio\'s Documentation')}</a>
</li>
<li class="nav-item">
<a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback">${_('Request help with Studio')}</a>
</li>
</ol>
</nav>
</div>
</aside>
</section>
<!-- CASE 3: User Logged In + w/ Authorship Rights + No Courses -->
<!-- ==================== -->
<section class="content">
<article class="content-primary" role="main">
<div class="introduction">
<h2 class="title">${_("Welcome, %(name)s!") % dict(name= user.username)}</h2>
<div class="copy">
<p>${_("You don't have any courses you're working on in Studio yet.")}</p>
</div>
</div>
<div class="course-list no-courses">
</div>
<div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights has-actions">
<div class="msg">
<h3 class="title">${_('Create Your First Course')}</h3>
<div class="copy"> <div class="copy">
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.')}</p> <p>${_('Workflow instructions for becoming and acceptable cases for being a Studio author. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.')}</p>
</div>
</div>
<ul class="list-actions">
<li class="action-item">
<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>
</li>
</ul>
</div>
</article>
<aside class="content-supplementary" role="complimentary">
<div class="bit">
<h3 class="title title-3">${_('Need help?')}</h3>
<p>${_('If you are new to Studio and having trouble getting started, there are a few things that may be of help:')}</p>
<nav class="nav-page checklists-current">
<ol>
<li class="nav-item">
<a href="http://files.edx.org/Getting_Started_with_Studio.pdf" title="This is a PDF Document">${_('Get started by reading Studio\'s Documentation')}</a>
</li>
<li class="nav-item">
<a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback">${_('Request help with Studio')}</a>
</li>
</ol>
</nav>
</div> </div>
</aside>
</section>
<!-- CASE 4: User Logged In + Verified + w/o Authorship Rights + No Request Made -->
<!-- ==================== -->
<section class="content">
<article class="content-primary" role="main">
<div class="introduction">
<h2 class="title">${_("Welcome, %(name)s!") % dict(name= user.username)}</h2>
<div class="status status-authorship has-actions">
<h4 class="title sr">${_('Request the Ability to Author Courses in Studio')}</h4>
<div class="copy"> <div class="copy">
<p>${_("You don't have any courses you're working on in Studio yet.")}</p>
</div>
</div>
<div class="course-list no-courses">
</div> </div>
<div class="wrapper wrapper-authorshiprights">
<h3 class="title">
<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>
</h3>
<div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights ui-toggle-target" id="instruction-authorshiprights">
<div class="copy">
<p>${_('Workflow instructions for becoming and acceptable cases for being a Studio author. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.')}</p>
</div>
<div class="status status-authorship is-unrequested">
<h4 class="title">${_('Your Authorship Request Status:')}</h4>
<ul class="list-actions"> <ul class="list-actions">
<li class="action-item"> <li class="action-item">
<a href="#" class="action-primary action-request">${_('Request the Ability to Author Courses')}</a> <a href="#" class="action-primary action-request">${_('Request the Ability to Author Courses')}</a>
...@@ -152,30 +268,24 @@ ...@@ -152,30 +268,24 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</article> </article>
<aside class="content-supplementary" role="complimentary"> <aside class="content-supplementary" role="complimentary">
<div class="bit"> <div class="bit">
<h3 class="title title-3">${_('Bit Title')}</h3> <h3 class="title title-3">${_('Why don\'t I see any courses yet?')}</h3>
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.')}</p> <p>${_('In order to use Studio, you must be known course staff or have authorship rights to create your own course.')}</p>
</div>
<div class="bit">
<h3 class="title title-3">${_('Need Help?')}</h3>
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus.')}</p>
</div> </div>
</aside> </aside>
</section> </section>
<!-- CASE 3: User Logged In + Verified + w/o Authorship Rights + Request Pending --> <!-- CASE 4: User Logged In + Verified + w/o Authorship Rights + Request Pending -->
<!-- ==================== --> <!-- ==================== -->
<section class="content"> <section class="content">
<article class="content-primary" role="main"> <article class="content-primary" role="main">
<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>
<div class="copy"> <div class="copy">
<p>${_("You don't have any courses you're working on in Studio yet.")}</p> <p>${_("You don't have any courses you're working on in Studio yet.")}</p>
...@@ -183,23 +293,25 @@ ...@@ -183,23 +293,25 @@
</div> </div>
<div class="course-list no-courses"> <div class="course-list no-courses">
<!-- if authorship rights enabled --> </div>
<div class="wrapper wrapper-authorshiprights"> <div class="wrapper wrapper-authorshiprights">
<h3 class="title ui-toggle-visibility "> <h3 class="title">
<a href="#instruction-authorshiprights" class="ui-toggle-control"><span class="label">${_('Becoming a Course Author in Studio')}</span> <i class="icon-plus"></i></a> <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>
</h3> </h3>
<div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights ui-toggle-target" id="instruction-authorshiprights"> <div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights ui-toggle-target" id="instruction-authorshiprights">
<div class="copy"> <div class="copy">
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.')}</p> <p>${_('Workflow instructions for becoming and acceptable cases for being a Studio author. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.')}</p>
</div> </div>
<div class="status status-authorship has-status is-pending"> <div class="status status-authorship has-status is-pending">
<h4 class="title">${_('Your Authorship Request Status')}</h4> <h4 class="title">${_('Your Authorship Request Status:')}</h4>
<dl class="status-update"> <dl class="status-update">
<dt class="label">${_('Your authorship request is:')}</dt> <dt class="label">${_('Your authorship request is:')}</dt>
<dd class="value"> <dd class="value">
<span class="status-indicator"></span>
<span class="value-formal">${_('Pending')}</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> <span class="value-description">${_('Your request is currently being reviewed by edX staff and should be updated shortly.')}</span>
</dd> </dd>
...@@ -207,11 +319,13 @@ ...@@ -207,11 +319,13 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</article> </article>
<aside class="content-supplementary" role="complimentary"> <aside class="content-supplementary" role="complimentary">
<div class="bit">
<h3 class="title title-3">${_('Why don\'t I see any courses yet?')}</h3>
<p>${_('In order to use Studio, you must be known course staff or have authorship rights to create your own course.')}</p>
</div>
</aside> </aside>
</section> </section>
...@@ -222,7 +336,7 @@ ...@@ -222,7 +336,7 @@
<section class="content"> <section class="content">
<article class="content-primary" role="main"> <article class="content-primary" role="main">
<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>
<div class="copy"> <div class="copy">
<p>${_("You don't have any courses you're working on in Studio yet.")}</p> <p>${_("You don't have any courses you're working on in Studio yet.")}</p>
...@@ -230,51 +344,127 @@ ...@@ -230,51 +344,127 @@
</div> </div>
<div class="course-list no-courses"> <div class="course-list no-courses">
<!-- if authorship rights enabled --> </div>
<div class="wrapper wrapper-authorshiprights"> <div class="wrapper wrapper-authorshiprights">
<h3 class="title ui-toggle-visibility "> <h3 class="title">
<a href="#instruction-authorshiprights" class="ui-toggle-control"><span class="label">${_('Becoming a Course Author in Studio')}</span> <i class="icon-plus"></i></a> <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>
</h3> </h3>
<div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights ui-toggle-target" id="instruction-authorshiprights"> <div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights ui-toggle-target" id="instruction-authorshiprights">
<div class="copy"> <div class="copy">
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.')}</p> <p>${_('Workflow instructions for becoming and acceptable cases for being a Studio author. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.')}</p>
</div> </div>
<div class="status status-authorship has-status is-rejected"> <div class="status status-authorship has-status is-rejected">
<h4 class="title">${_('Your Authorship Request Status')}</h4> <h4 class="title">${_('Your Authorship Request Status:')}</h4>
<dl class="status-update"> <dl class="status-update">
<dt class="label">${_('Your authorship request is:')}</dt> <dt class="label">${_('Your authorship request is:')}</dt>
<dd class="value"> <dd class="value">
<span class="status-indicator"></span>
<span class="value-formal">${_('Rejected')}</span> <span class="value-formal">${_('Rejected')}</span>
<span class="value-description">${_('Your request did not meet the criteria/guidelines specified by edX Staff.')}</span> <span class="value-description">${_('Your request did not meet the criteria/guidelines specified by edX Staff.')}</span>
</dd> </dd>
</dl> </dl>
</div>
</div>
</div>
</article>
<dl class="status-details"> <aside class="content-supplementary" role="complimentary">
<dt class="label">${_('The following feedback was given by edX staff when making this decision')}</dt> <div class="bit">
<dd class="value"> <h3 class="title title-3">${_('Why don\'t I see any courses yet?')}</h3>
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.')}</p> <p>${_('In order to use Studio, you must be known course staff or have authorship rights to create your own course.')}</p>
</dd> </div>
</dl> </aside>
</section>
<!-- CASE 5: User Logged In + Verified + w/o Authorship Rights + Classes (as Staff Access) + No Request Made -->
<!-- ==================== -->
<section class="content">
<article class="content-primary" role="main">
<div class="introduction">
<h2 class="title">${_("Welcome, %(name)s!") % dict(name= user.username)}</h2>
<div class="copy">
<p>${_("Here are all of the courses you currently have access to in Studio:")}</p>
</div>
</div>
<div class="course-list">
<div class="my-classes">
<ul class="class-list">
%for course, url, lms_link in sorted(courses, key=lambda s: s[0].lower() if s[0] is not None else ''):
<li>
<a class="class-link" href="${url}" class="class-name">
<span class="class-name">${course}</span>
</a>
<a href="${lms_link}" rel="external" class="button view-button view-live-button">View Live</a>
</li>
%endfor
</ul>
</div>
</div>
<div class="wrapper wrapper-authorshiprights">
<h3 class="title">
<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>
</h3>
<div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights ui-toggle-target" id="instruction-authorshiprights">
<div class="copy">
<p>${_('Workflow instructions for becoming and acceptable cases for being a Studio author. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.')}</p>
</div>
<div class="status status-authorship is-unrequested">
<h4 class="title">${_('Your Authorship Request Status:')}</h4>
<ul class="list-actions">
<li class="action-item">
<a href="#" class="action-primary action-request">${_('Request the Ability to Author Courses')}</a>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
</article> </article>
<aside class="content-supplementary" role="complimentary"> <aside class="content-supplementary" role="complimentary">
<div class="bit">
<h3 class="title title-3">${_('Need help?')}</h3>
<p>${_('If you are new to Studio and having trouble getting started, there are a few things that may be of help:')}</p>
<nav class="nav-page checklists-current">
<ol>
<li class="nav-item">
<a href="http://files.edx.org/Getting_Started_with_Studio.pdf" title="This is a PDF Document">${_('Get started by reading Studio\'s Documentation')}</a>
</li>
<li class="nav-item">
<a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback">${_('Request help with Studio')}</a>
</li>
</ol>
</nav>
</div>
<div class="bit">
<h3 class="title title-3">${_('Can I author courses in Studio?')}</h3>
<p>${_('In order to create courses in Studio, you must have authorship rights to create your own course.')}</p>
</div>
</aside> </aside>
</section> </section>
<!-- CASE 5: User Logged In + Verified + w/o Authorship Rights + Classes (as Staff Access) -->
<!-- CASE 5: User Logged In + Verified + w/o Authorship Rights + Classes (as Staff Access) + Request Pending -->
<!-- ==================== --> <!-- ==================== -->
<section class="content"> <section class="content">
<article class="content-primary" role="main"> <article class="content-primary" role="main">
<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>
<div class="copy"> <div class="copy">
<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>
...@@ -295,66 +485,109 @@ ...@@ -295,66 +485,109 @@
%endfor %endfor
</ul> </ul>
</div> </div>
</div>
<!-- if authorship rights enabled -->
<div class="wrapper wrapper-authorshiprights"> <div class="wrapper wrapper-authorshiprights">
<h3 class="title ui-toggle-visibility "> <h3 class="title">
<a href="#instruction-authorshiprights" class="ui-toggle-control"><span class="label">${_('Becoming a Course Author in Studio')}</span> <i class="icon-plus"></i></a> <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>
</h3> </h3>
<div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights ui-toggle-target" id="instruction-authorshiprights"> <div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights ui-toggle-target" id="instruction-authorshiprights">
<div class="copy"> <div class="copy">
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.')}</p> <p>${_('Workflow instructions for becoming and acceptable cases for being a Studio author. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.')}</p>
</div> </div>
<div class="status status-authorship has-status is-rejected"> <div class="status status-authorship has-status is-pending">
<h4 class="title">${_('Your Authorship Request Status')}</h4> <h4 class="title">${_('Your Authorship Request Status:')}</h4>
<dl class="status-update"> <dl class="status-update">
<dt class="label">${_('Your authorship request is:')}</dt> <dt class="label">${_('Your authorship request is:')}</dt>
<dd class="value"> <dd class="value">
<span class="value-formal">${_('Rejected')}</span> <span class="status-indicator"></span>
<span class="value-description">${_('Your request did not meet the criteria/guidelines specified by edX Staff.')}</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> </dd>
</dl> </dl>
</div>
</div>
</div>
</article>
<dl class="status-details"> <aside class="content-supplementary" role="complimentary">
<dt class="label">${_('The following feedback was given by edX staff when making this decision')}</dt> <div class="bit">
<dd class="value"> <h3 class="title title-3">${_('Need help?')}</h3>
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.')}</p> <p>${_('If you are new to Studio and having trouble getting started, there are a few things that may be of help:')}</p>
</dd>
</dl> <nav class="nav-page checklists-current">
<ol>
<li class="nav-item">
<a href="http://files.edx.org/Getting_Started_with_Studio.pdf" title="This is a PDF Document">${_('Get started by reading Studio\'s Documentation')}</a>
</li>
<li class="nav-item">
<a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback">${_('Request help with Studio')}</a>
</li>
</ol>
</nav>
</div>
<div class="bit">
<h3 class="title title-3">${_('Can I author courses in Studio?')}</h3>
<p>${_('In order to create courses in Studio, you must have authorship rights to create your own course.')}</p>
</div>
</aside>
</section>
<!-- CASE 6: User Logged In + Verified + w/o Authorship Rights + Classes (as Staff Access) + Request Rejected -->
<!-- ==================== -->
<section class="content">
<article class="content-primary" role="main">
<div class="introduction">
<h2 class="title">${_("Welcome, %(name)s!") % dict(name= user.username)}</h2>
<div class="copy">
<p>${_("Here are all of the courses you currently have access to in Studio:")}</p>
</div>
</div>
<div class="course-list">
<div class="my-classes">
<ul class="class-list">
%for course, url, lms_link in sorted(courses, key=lambda s: s[0].lower() if s[0] is not None else ''):
<li>
<a class="class-link" href="${url}" class="class-name">
<span class="class-name">${course}</span>
</a>
<a href="${lms_link}" rel="external" class="button view-button view-live-button">View Live</a>
</li>
%endfor
</ul>
</div> </div>
</div> </div>
<!-- if authorship rights enabled -->
<div class="wrapper wrapper-authorshiprights"> <div class="wrapper wrapper-authorshiprights">
<h3 class="title ui-toggle-visibility "> <h3 class="title">
<a href="#instruction-authorshiprights" class="ui-toggle-control"><span class="label">${_('Becoming a Course Author in Studio')}</span> <i class="icon-plus"></i></a> <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>
</h3> </h3>
<div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights ui-toggle-target is-shown" id="instruction-authorshiprights"> <div class="notice notice-incontext notice-instruction notice-instruction-authorshiprights ui-toggle-target" id="instruction-authorshiprights">
<div class="copy"> <div class="copy">
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.')}</p> <p>${_('Workflow instructions for becoming and acceptable cases for being a Studio author. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.')}</p>
</div> </div>
<div class="status status-authorship has-status is-rejected"> <div class="status status-authorship has-status is-rejected">
<h4 class="title">${_('Your Authorship Request Status')}</h4> <h4 class="title">${_('Your Authorship Request Status:')}</h4>
<dl class="status-update"> <dl class="status-update">
<dt class="label">${_('Your authorship request is:')}</dt> <dt class="label">${_('Your authorship request is:')}</dt>
<dd class="value"> <dd class="value">
<span class="status-indicator"></span>
<span class="value-formal">${_('Rejected')}</span> <span class="value-formal">${_('Rejected')}</span>
<span class="value-description">${_('Your request did not meet the criteria/guidelines specified by edX Staff.')}</span> <span class="value-description">${_('Your request did not meet the criteria/guidelines specified by edX Staff.')}</span>
</dd> </dd>
</dl> </dl>
<dl class="status-details">
<dt class="label">${_('The following feedback was given by edX staff when making this decision')}</dt>
<dd class="value">
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.')}</p>
</dd>
</dl>
</div> </div>
</div> </div>
</div> </div>
...@@ -362,19 +595,31 @@ ...@@ -362,19 +595,31 @@
<aside class="content-supplementary" role="complimentary"> <aside class="content-supplementary" role="complimentary">
<div class="bit"> <div class="bit">
<h3 class="title title-3">${_('Need Help?')}</h3> <h3 class="title title-3">${_('Need help?')}</h3>
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus.')}</p> <p>${_('If you are new to Studio and having trouble getting started, there are a few things that may be of help:')}</p>
<nav class="nav-page checklists-current">
<ol>
<li class="nav-item">
<a href="http://files.edx.org/Getting_Started_with_Studio.pdf" title="This is a PDF Document">${_('Get started by reading Studio\'s Documentation')}</a>
</li>
<li class="nav-item">
<a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback">${_('Request help with Studio')}</a>
</li>
</ol>
</nav>
</div> </div>
<div class="bit"> <div class="bit">
<h3 class="title title-3">${_('Contact edX')}</h3> <h3 class="title title-3">${_('Can I author courses in Studio?')}</h3>
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus.')}</p> <p>${_('In order to create courses in Studio, you must have authorship rights to create your own course.')}</p>
</div> </div>
</aside> </aside>
</section> </section>
<!-- CASE 6: User Logged In + Verified + w Authorship Rights + Classes (as Author + Staff Access) -->
<!-- CASE 7: User Logged In + Verified + w Authorship Rights + Classes (as Author + Staff Access) -->
<!-- ==================== --> <!-- ==================== -->
<section class="content"> <section class="content">
<article class="content-primary" role="main"> <article class="content-primary" role="main">
...@@ -385,6 +630,7 @@ ...@@ -385,6 +630,7 @@
</div> </div>
</div> </div>
<div class="course-list">
<div class="my-classes"> <div class="my-classes">
<ul class="class-list"> <ul class="class-list">
%for course, url, lms_link in sorted(courses, key=lambda s: s[0].lower() if s[0] is not None else ''): %for course, url, lms_link in sorted(courses, key=lambda s: s[0].lower() if s[0] is not None else ''):
...@@ -398,17 +644,24 @@ ...@@ -398,17 +644,24 @@
%endfor %endfor
</ul> </ul>
</div> </div>
</div>
</article> </article>
<aside class="content-supplementary" role="complimentary"> <aside class="content-supplementary" role="complimentary">
<div class="bit"> <div class="bit">
<h3 class="title title-3">${_('Need Help?')}</h3> <h3 class="title title-3">${_('Need help?')}</h3>
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus.')}</p> <p>${_('If you are new to Studio and having trouble getting started, there are a few things that may be of help:')}</p>
</div>
<div class="bit"> <nav class="nav-page checklists-current">
<h3 class="title title-3">${_('Contact edX')}</h3> <ol>
<p>${_('Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus.')}</p> <li class="nav-item">
<a href="http://files.edx.org/Getting_Started_with_Studio.pdf" title="This is a PDF Document">${_('Get started by reading Studio\'s Documentation')}</a>
</li>
<li class="nav-item">
<a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback">${_('Request help with Studio')}</a>
</li>
</ol>
</nav>
</div> </div>
</aside> </aside>
</section> </section>
......
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