Skip to content

E
edx-platform
Commit 2fca2d38 by Brian Talbot
Options

Merge pull request #299 from edx/talbs/studio-helpnav 

Studio - Help Links Addition and Small UI Revisions to Main Navigation
parents f1cf0357 b560f434
Showing with 486 additions and 460 deletions
cms/static/img/logo-edx-studio.png
cms/static/img/logo-edx-studio.png

2.4 KB | W: | H:

cms/static/img/logo-edx-studio.png

4.67 KB | W: | H:

cms/static/img/logo-edx-studio.png
cms/static/img/logo-edx-studio.png
cms/static/img/logo-edx-studio.png
cms/static/img/logo-edx-studio.png
  • 2-up
  • Swipe
  • Onion skin
cms/static/js/base.js
...@@ -56,11 +56,11 @@ $(document).ready(function() { ...@@ -56,11 +56,11 @@ $(document).ready(function() {
// nav - dropdown related // nav - dropdown related
$body.click(function(e) { $body.click(function(e) {
$('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown'); $('.nav-dd .nav-item .wrapper-nav-sub').removeClass('is-shown');
$('.nav-dropdown .nav-item .title').removeClass('is-selected'); $('.nav-dd .nav-item .title').removeClass('is-selected');
}); });
$('.nav-dropdown .nav-item .title').click(function(e) { $('.nav-dd .nav-item .title').click(function(e) {
$subnav = $(this).parent().find('.wrapper-nav-sub'); $subnav = $(this).parent().find('.wrapper-nav-sub');
$title = $(this).parent().find('.title'); $title = $(this).parent().find('.title');
...@@ -71,8 +71,8 @@ $(document).ready(function() { ...@@ -71,8 +71,8 @@ $(document).ready(function() {
$subnav.removeClass('is-shown'); $subnav.removeClass('is-shown');
$title.removeClass('is-selected'); $title.removeClass('is-selected');
} else { } else {
$('.nav-dropdown .nav-item .title').removeClass('is-selected'); $('.nav-dd .nav-item .title').removeClass('is-selected');
$('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown'); $('.nav-dd .nav-item .wrapper-nav-sub').removeClass('is-shown');
$title.addClass('is-selected'); $title.addClass('is-selected');
$subnav.addClass('is-shown'); $subnav.addClass('is-shown');
} }
......
cms/static/sass/_variables.scss
...@@ -47,7 +47,7 @@ $gray-d2: shade($gray,40%); ...@@ -47,7 +47,7 @@ $gray-d2: shade($gray,40%);
$gray-d3: shade($gray,60%); $gray-d3: shade($gray,60%);
$gray-d4: shade($gray,80%); $gray-d4: shade($gray,80%);
$blue: rgb(85, 151, 221); $blue: rgb(0, 159, 230);
$blue-l1: tint($blue,20%); $blue-l1: tint($blue,20%);
$blue-l2: tint($blue,40%); $blue-l2: tint($blue,40%);
$blue-l3: tint($blue,60%); $blue-l3: tint($blue,60%);
......
cms/static/sass/elements/_controls.scss
...@@ -135,7 +135,48 @@ ...@@ -135,7 +135,48 @@
// ==================== // ====================
// layout-based buttons // simple dropdown button styling - should we move this elsewhere?
.btn-dd {
@extend .btn;
@extend .btn-pill;
padding:($baseline/4) ($baseline/2);
border-width: 1px;
border-style: solid;
border-color: transparent;
text-align: center;
&:hover, &:active {
@extend .fake-link;
border-color: $gray-l3;
}
&.current, &.active, &.is-selected {
@include box-shadow(inset 0 1px 2px 1px $shadow-l1);
border-color: $gray-l3;
}
}
// layout-based buttons - nav dd
.btn-dd-nav-primary {
@extend .btn-dd;
background: $white;
border-color: $white;
color: $gray-d1;
&:hover, &:active {
background: $white;
color: $blue-s1;
}
&.current, &.active {
background: $white;
color: $gray-d4;
&:hover, &:active {
color: $blue-s1;
}
}
}
// ==================== // ====================
......
cms/static/sass/elements/_header.scss
...@@ -3,448 +3,310 @@ ...@@ -3,448 +3,310 @@
.wrapper-header { .wrapper-header {
@extend .depth3; @extend .depth3;
margin: 0; @include box-shadow(0 1px 2px 0 $shadow-l1);
padding: $baseline;
border-bottom: 1px solid $gray;
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.2));
background: $white;
height: 76px;
position: relative; position: relative;
width: 100%; width: 100%;
margin: 0;
a { padding: 0 $baseline;
color: $baseFontColor; background: $white;
display: block;
&:hover, &:active {
color: $blue;
}
}
header.primary { header.primary {
@include box-sizing(border-box);
@include clearfix(); @include clearfix();
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;
color: $gray-l1;
} }
nav .nav-item { // ====================
display: inline-block;
}
}
// ==================== // basic layout
// basic layout
.wrapper-left, .wrapper-right {
@include box-sizing(border-box);
}
.wrapper-left {
width: flex-grid(10, 12);
float: left;
margin-right: flex-gutter();
}
.wrapper-right {
width: flex-grid(2, 12);
float: right;
}
// ====================
// specific elements - branding .wrapper-l, .wrapper-r {
.branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch { background: $white;
display: inline-block;
vertical-align: top;
}
.branding {
position: relative;
margin: 0 ($baseline/2) 0 0;
padding-right: ($baseline*0.75);
a {
@extend .text-hide;
display: block;
width: 164px;
height: 32px;
background: transparent url('../img/logo-edx-studio.png') 0 0 no-repeat;
} }
}
// ====================
// specific elements - course name/info .wrapper-l {
.info-course { float: left;
@include font-size(14); width: flex-grid(7,12);
position: relative;
margin: -3px ($baseline/2) 0 0;
padding-right: ($baseline*0.75);
&:before {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 50px;
position: absolute;
right: 1px;
top: -8px;
width: 1px;
} }
&:after { .wrapper-r {
@extend .faded-vertical-divider-light; float: right;
content: ""; width: flex-grid(4,12);
display: block; text-align: right;
height: 50px;
position: absolute;
right: 0px;
top: -12px;
width: 1px;
} }
.course-number, .course-org { .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
@include font-size(12); @include box-sizing(border-box);
display: inline-block; display: inline-block;
max-width: 70px; vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
} }
.course-org { .nav-account {
margin-right: ($baseline/4);
max-width: 140px;
}
.course-title {
display: block;
width: 100%; width: 100%;
max-width: 220px;
overflow: hidden;
margin-top: -4px;
white-space: nowrap;
text-overflow: ellipsis;
@include font-size(16);
font-weight: 600;
} }
}
// ==================== // basic layout - nav items
nav {
> ol > .nav-item {
@extend .t-action3;
display: inline-block;
vertical-align: middle;
font-weight: 600;
// specific elements - course nav &:last-child {
.nav-course { margin-right: 0;
width: 290px; }
@extend .t-copy-sub1; }
margin-top: -($baseline/4);
> ol > .nav-item { .nav-item a {
vertical-align: bottom; color: $gray-d1;
margin: 0 ($baseline/2) 0 0;
&:last-child { &:hover {
margin-right: 0; color: $blue-s1;
}
} }
}
// basic layout - dropdowns
.nav-dd {
.title { .title {
display: block; @extend .t-action2;
padding: 0 ($baseline/4); @extend .btn-dd-nav-primary;
text-transform: uppercase; @include transition(all 0.25s ease-in-out 0);
font-weight: 600;
color: $gray-d3; .label, .icon-caret-down {
.label-prefix {
@include font-size(11);
display: block;
font-weight: 400;
} }
}
// specific nav items .label {
&.nav-course-courseware {
}
&.nav-course-settings { }
}
.icon-caret-down {
opacity: 0.25;
}
&:hover {
&.nav-course-tools { .icon-caret-down {
opacity: 1.0;
}
}
.nav-sub .nav-item {
[class^="icon-"] {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
} }
} }
}
// ==================== // ====================
// specific elements - account-based nav // specific elements - branding
.nav-account { .branding {
width: 100%; padding: ($baseline*0.75) 0;
margin-top: ($baseline*0.75);
@include font-size(14);
text-align: right;
.nav-account-username { a {
width: 100%; display: block;
.icon-user { img {
display: inline-block; width: 100%;
vertical-align: middle; display: block;
margin-right: 3px; }
@include font-size(12);
} }
}
.account-username { // ====================
// specific elements - course name/info
.info-course {
margin-right: flex-gutter();
border-right: 1px solid $gray-l4;
padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
.course-org, .course-number {
@extend .t-action4;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 80%; max-width: 45%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
opacity: 0.75;
} }
.icon-expand { .course-org {
display: inline-block; margin-right: ($baseline/4);
vertical-align: middle;
} }
}
}
// ====================
// UI - dropdown
.nav-dropdown {
.nav-item { .course-title {
position: relative; @extend .t-action2;
display: block;
.icon-caret-down { width: 100%;
@include font-size(14); overflow: hidden;
@include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out); white-space: nowrap;
display: inline-block; text-overflow: ellipsis;
vertical-align: middle; font-weight: 600;
margin-left: 2px;
opacity: 0.5;
color: $gray-l2;
} }
&:hover { // entire link
.course-link {
@include transition(color 0.25s ease-in-out);
display: block;
color: $gray-d1;
.icon-caret-down { &:hover {
color: $blue; color: $blue-s1;
opacity: 1.0;
} }
} }
} }
.wrapper-nav-sub { // ====================
position: absolute;
left: -7px; // specific elements - course nav
top: 47px; .nav-course {
width: 140px; padding: ($baseline*0.75) 0;
opacity: 0.0;
pointer-events: none;
} }
.nav-sub { // ====================
@include border-radius(2px);
@include box-sizing(border-box); // specific elements - account-based nav
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); .nav-account {
position: relative; position: relative;
width: 100%; padding: ($baseline*0.75) 0;
border: 1px solid $gray-l2;
padding: ($baseline/4) ($baseline/2);
background: $white;
&:after, &:before { .nav-sub {
bottom: 100%; text-align: left;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
} }
&:after { .nav-account-help {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 5px;
right: 3px;
margin-left: -5px;
}
&:before { .wrapper-nav-sub {
border-color: rgba(178, 178, 178, 0); width: ($baseline*10);
border-bottom-color: $gray-l2; }
border-width: 6px;
right: 3px;
margin-left: -6px;
} }
.nav-item { .nav-account-user {
display: block;
margin: 0 0 ($baseline/4) 0;
border-bottom: 1px solid $gray-l5;
padding: 0 0($baseline/4) 0;
@include font-size(13);
&:last-child { .title {
margin-bottom: 0; max-width: ($baseline*6.5);
border-bottom: none;
padding-bottom: 0;
}
a { > .label {
display: block; display: inline-block;
max-width: 85%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
} }
} }
} }
// UI - dropdown - specific navs // ====================
&.nav-account {
.wrapper-nav-sub { // specific elements - pitch/how it works nav
top: 27px; .nav-pitch {
left: auto; position: relative;
right: -13px; padding: ($baseline*0.75) 0;
width: 110px;
}
.nav-sub { .nav-sub {
text-align: left; text-align: left;
.icon-expand {
top: -2px;
}
}
.nav-sub:after {
left: auto;
right: 11px;
}
.nav-sub:before {
left: auto;
right: 10px;
} }
} }
}
&.nav-course { // ====================
.nav-course-courseware {
.nav-sub:after { // CASE: user signed in
left: 88px; .is-signedin {
}
.nav-sub:before { .wrapper-l {
left: 88px; width: flex-grid(9,12);
} }
}
.nav-course-settings { .wrapper-r {
width: flex-grid(3,12);
}
.nav-sub:after { .branding {
left: 88px; width: 20%;
} margin-right: 2%;
}
.nav-sub:before { .nav-account {
left: 88px; top: ($baseline/4);
} }
} }
.nav-course-tools { // ====================
.wrapper-nav-sub { // CASE: in course {
top: ($baseline*1.5); .is-signedin.course {
width: 100px;
}
.nav-sub:after { .wrapper-header {
left: 68px;
}
.nav-sub:before { .wrapper-l {
left: 68px; width: flex-grid(9,12);
}
} }
}
}
// ====================
// STATE: is-signed in .wrapper-r {
.is-signedin { width: flex-grid(3,12);
}
&.course .branding { .branding {
width: 20%;
margin-right: 2%;
}
&:before { .info-course {
@extend .faded-vertical-divider; width: 25%;
content: ""; margin-right: 2%;
display: block;
height: 50px;
position: absolute;
right: 1px;
top: -8px;
width: 1px;
} }
&:after { .nav-course {
@extend .faded-vertical-divider-light; width: 45%;
content: "";
display: block;
height: 50px;
position: absolute;
right: 0px;
top: -12px;
width: 1px;
} }
} }
} }
// ==================== // ====================
// STATE: not signed in // CASE: user not signed in
.not-signedin { .not-signedin {
.wrapper-left { .wrapper-header {
width: flex-grid(4, 12);
}
.wrapper-right { .wrapper-l {
width: flex-grid(8, 12); width: flex-grid(2,12);
} }
// STATE: not signed in - unauthenticated nav
.nav-not-signedin {
float: right;
margin-top: ($baseline/4);
.nav-item {
@include font-size(16);
vertical-align: middle;
margin: 0 $baseline 0 0;
&:last-child { .wrapper-r {
margin-right: 0; width: flex-grid(10,12);
} }
.action { .branding {
margin-top: -($baseline/4); width: 100%;
display: inline-block;
padding: ($baseline/4) ($baseline/2);
}
} }
// STATE: not signed in - specific items .nav-pitch {
.nav-not-signedin-help { top: ($baseline/4);
} .nav-item {
margin-right: ($baseline/2);
.nav-not-signedin-signup { &:last-child {
margin-right: ($baseline/2); margin-right: 0;
}
}
.action-signup { .action-signup {
@include blue-button; @include blue-button;
...@@ -454,9 +316,6 @@ ...@@ -454,9 +316,6 @@
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
} }
}
.nav-not-signedin-signin {
.action-signin { .action-signin {
@include white-button; @include white-button;
...@@ -505,12 +364,13 @@ body.course.advanced .nav-course-settings-advanced, ...@@ -505,12 +364,13 @@ body.course.advanced .nav-course-settings-advanced,
// course tools // course tools
body.course.import .nav-course-tools .title, body.course.import .nav-course-tools .title,
body.course.export .nav-course-tools .title, body.course.export .nav-course-tools .title,
body.course.checklists .nav-course-tools .title,
body.course.import .nav-course-tools-import, body.course.import .nav-course-tools-import,
body.course.export .nav-course-tools-export, body.course.export .nav-course-tools-export,
body.course.checklists .nav-course-tools-checklists,
{ {
color: $blue; color: $blue;
a { a {
...@@ -518,52 +378,3 @@ body.course.export .nav-course-tools-export, ...@@ -518,52 +378,3 @@ body.course.export .nav-course-tools-export,
pointer-events: none; pointer-events: none;
} }
} }
body.signup .nav-not-signedin-signin {
a {
background-color: #d9e3ee;
color: #6d788b;
}
}
body.signin .nav-not-signedin-signup {
a {
background-color: #62aaf5;
color: #fff;
}
}
// ====================
// STATE: js enabled
.js {
.nav-dropdown {
.nav-item .title {
outline: 0;
cursor: pointer;
&:hover, &:active, &.is-selected {
color: $blue;
.icon-expand {
color: $blue;
}
}
}
}
.wrapper-nav-sub {
@include transition (opacity 1.0s ease-in-out 0s);
opacity: 0.0;
pointer-events: none;
&.is-shown {
opacity: 1.0;
pointer-events: auto;
}
}
}
cms/static/sass/elements/_navigation.scss
...@@ -18,20 +18,161 @@ nav { ...@@ -18,20 +18,161 @@ nav {
// ==================== // ====================
// primary // tabs
// ==================== // ====================
// right hand side // dropdown
.nav-dd {
// ==================== .title {
// tabs .label, .icon-caret-down {
display: inline-block;
vertical-align: middle;
}
// ==================== .ui-toggle-dd {
@include transition(rotate .25s ease-in-out .25s);
margin-left: ($baseline/10);
display: inline-block;
vertical-align: middle;
}
// dropdown // dropped down state
&.is-selected {
// ==================== .ui-toggle-dd {
@include transform(rotate(-180deg));
@include transform-origin(50% 50%);
}
}
}
.nav-item {
position: relative;
// &:hover {
}
}
.wrapper-nav-sub {
@include transition (opacity 1.0s ease-in-out 0s);
position: absolute;
top: ($baseline*2.5);
opacity: 0.0;
pointer-events: none;
width: ($baseline*8);
// dropped down state
&.is-shown {
opacity: 1.0;
pointer-events: auto;
}
}
.nav-sub {
@include border-radius(2px);
@include box-sizing(border-box);
@include box-shadow(0 1px 1px $shadow-l1);
position: relative;
width: 100%;
border: 1px solid $gray-l3;
padding: ($baseline/2) ($baseline*0.75);
background: $white;
&:after, &:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
// ui triangle/nub
&:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: $white;
border-width: 10px;
}
&:before {
border-color: rgba(178, 178, 178, 0);
border-bottom-color: $gray-l3;
border-width: 11px;
}
.nav-item {
@extend .t-action3;
display: block;
margin: 0 0 ($baseline/4) 0;
border-bottom: 1px solid $gray-l5;
padding: 0 0($baseline/4) 0;
font-weight: 500;
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
a {
display: block;
&:hover, &:active {
color: $blue-s1;
}
}
}
}
// CASE: left-hand side arrow/dd
&.ui-left {
.wrapper-nav-sub {
left: 0;
}
.nav-sub {
text-align: left;
// ui triangle/nub
&:after {
left: $baseline;
margin-left: -10px;
}
&:before {
left: $baseline;
margin-left: -11px;
}
}
}
// CASE: right-hand side arrow/dd
&.ui-right {
.wrapper-nav-sub {
left: none;
right: 0;
}
.nav-sub {
// ui triangle/nub
&:after {
right: $baseline;
margin-right: -10px;
}
&:before {
right: $baseline;
margin-right: -11px;
}
}
}
}
cms/static/sass/elements/_tender-widget.scss
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
@include box-shadow(0 2px 3px $shadow); @include box-shadow(0 2px 3px $shadow);
height: ($baseline*35) !important; height: ($baseline*35) !important;
background: $white !important; background: $white !important;
border: 1px solid $gray; border: 2px solid $blue;
} }
#tender_window { #tender_window {
...@@ -23,11 +23,12 @@ ...@@ -23,11 +23,12 @@
} }
#tender_closer { #tender_closer {
color: $blue-l2 !important; color: $white-t2 !important;
text-transform: uppercase; text-transform: uppercase;
top: 16px !important;
&:hover { &:hover {
color: $blue-l4 !important; color: $white !important;
} }
} }
...@@ -42,15 +43,15 @@ ...@@ -42,15 +43,15 @@
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
.widget-layout .search, .widget-layout .search,
.widget-layout .tabs, .widget-layout .tabs,
.widget-layout .footer, .widget-layout .footer,
.widget-layout .header h1 a { .widget-layout .header h1 a {
display: none; display: none;
} }
.widget-layout .header { .widget-layout .header {
background: rgb(85, 151, 221); background: rgb(0, 159, 230);
padding: 10px 20px; padding: 10px 20px;
} }
...@@ -264,4 +265,4 @@ ...@@ -264,4 +265,4 @@
.widget-layout .form-actions .btn-post_topic:hover, .widget-layout .form-actions .btn-post_topic:active { .widget-layout .form-actions .btn-post_topic:hover, .widget-layout .form-actions .btn-post_topic:active {
background-color: #16ca57; background-color: #16ca57;
color: #fff; color: #fff;
} }
\ No newline at end of file
cms/static/sass/views/_index.scss
...@@ -72,14 +72,7 @@ body.index { ...@@ -72,14 +72,7 @@ body.index {
} }
.logo { .logo {
@extend .text-hide; font-weight: 600;
position: relative;
top: 3px;
display: inline-block;
vertical-align: baseline;
width: 282px;
height: 57px;
background: transparent url('../img/logo-edx-studio-white.png') 0 0 no-repeat;
} }
.tagline { .tagline {
......
cms/templates/asset_index.html
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<div class="wrapper-mast wrapper"> <div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle"> <header class="mast has-actions has-subtitle">
<h1 class="page-header"> <h1 class="page-header">
<small class="subtitle">Course Content</small> <small class="subtitle">Content</small>
<span class="sr">&gt; </span>Files &amp; Uploads <span class="sr">&gt; </span>Files &amp; Uploads
</h1> </h1>
......
cms/templates/course_info.html
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<div class="wrapper-mast wrapper"> <div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle"> <header class="mast has-actions has-subtitle">
<h1 class="page-header"> <h1 class="page-header">
<small class="subtitle">Course Content</small> <small class="subtitle">Content</small>
<span class="sr">&gt; </span>Course Updates <span class="sr">&gt; </span>Course Updates
</h1> </h1>
......
cms/templates/edit-tabs.html
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<div class="wrapper-mast wrapper"> <div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle"> <header class="mast has-actions has-subtitle">
<h1 class="page-header"> <h1 class="page-header">
<small class="subtitle">Course Content</small> <small class="subtitle">Content</small>
<span class="sr">&gt; </span>Static Pages <span class="sr">&gt; </span>Static Pages
</h1> </h1>
......
cms/templates/overview.html
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
<div class="wrapper-mast wrapper"> <div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle"> <header class="mast has-actions has-subtitle">
<h1 class="page-header"> <h1 class="page-header">
<small class="subtitle">Course Content</small> <small class="subtitle">Content</small>
<span class="sr">&gt; </span>Course Outline <span class="sr">&gt; </span>Course Outline
</h1> </h1>
...@@ -165,9 +165,9 @@ ...@@ -165,9 +165,9 @@
<span class="published-status">This section has not been released.</span> <span class="published-status">This section has not been released.</span>
<a href="#" class="schedule-button" data-date="" data-time="" data-id="${section.location}">Schedule</a> <a href="#" class="schedule-button" data-date="" data-time="" data-id="${section.location}">Schedule</a>
%else: %else:
<span class="published-status"><strong>Will Release:</strong> <span class="published-status"><strong>Will Release:</strong>
${date_utils.get_default_time_display(section.lms.start)}</span> ${date_utils.get_default_time_display(section.lms.start)}</span>
<a href="#" class="edit-button" data-date="${start_date_str}" <a href="#" class="edit-button" data-date="${start_date_str}"
data-time="${start_time_str}" data-id="${section.location}">Edit</a> data-time="${start_time_str}" data-id="${section.location}">Edit</a>
%endif %endif
</div> </div>
......
cms/templates/widgets/header.html
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<div class="wrapper-header wrapper" id="view-top"> <div class="wrapper-header wrapper" id="view-top">
<header class="primary" role="banner"> <header class="primary" role="banner">
<div class="wrapper wrapper-left "> <div class="wrapper wrapper-l">
<h1 class="branding"><a href="/">edX Studio</a></h1> <h1 class="branding"><a href="/"><img src="/static/img/logo-edx-studio.png" alt="edX Studio" /></a></h1>
% if context_course: % if context_course:
<% ctx_loc = context_course.location %> <% ctx_loc = context_course.location %>
<div class="info-course"> <h2 class="info-course">
<h2 class="sr">Current Course:</h2> <span class="sr">Current Course:</span>
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}"> <a class="course-link" href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">
<span class="course-org">${ctx_loc.org}</span><span class="course-number">${ctx_loc.course}</span> <span class="course-org">${ctx_loc.org}</span><span class="course-number">${ctx_loc.course}</span>
<span class="course-title" title="${context_course.display_name_with_default}">${context_course.display_name_with_default}</span> <span class="course-title" title="${context_course.display_name_with_default}">${context_course.display_name_with_default}</span>
</a> </a>
</div> </h2>
<nav class="nav-course primary nav-dropdown" role="navigation"> <nav class="nav-course nav-dd ui-left">
<h2 class="sr">${context_course.display_name_with_default}'s Navigation:</h2> <h2 class="sr">${context_course.display_name_with_default}'s Navigation:</h2>
<ol> <ol>
<li class="nav-item nav-course-courseware"> <li class="nav-item nav-course-courseware">
<h3 class="title"><span class="label-prefix">Course </span>Content <i class="icon-caret-down"></i></h3> <h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Content</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub"> <div class="wrapper wrapper-nav-sub">
<div class="nav-sub"> <div class="nav-sub">
<ul> <ul>
<li class="nav-item nav-course-courseware-outline"><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li> <li class="nav-item nav-course-courseware-outline">
<li class="nav-item nav-course-courseware-updates"><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a></li> <a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a>
<li class="nav-item nav-course-courseware-pages"><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Static Pages</a></li> </li>
<li class="nav-item nav-course-courseware-uploads"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files &amp; Uploads</a></li> <li class="nav-item nav-course-courseware-updates">
<a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a>
</li>
<li class="nav-item nav-course-courseware-pages">
<a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Static Pages</a>
</li>
<li class="nav-item nav-course-courseware-uploads">
<a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files &amp; Uploads</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</li> </li>
<li class="nav-item nav-course-settings"> <li class="nav-item nav-course-settings">
<h3 class="title"><span class="label-prefix">Course </span>Settings <i class="icon-caret-down"></i></h3> <h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Settings</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub"> <div class="wrapper wrapper-nav-sub">
<div class="nav-sub"> <div class="nav-sub">
<ul> <ul>
<li class="nav-item nav-course-settings-schedule"><a href="${reverse('contentstore.views.get_course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a></li> <li class="nav-item nav-course-settings-schedule">
<li class="nav-item nav-course-settings-grading"><a href="${reverse('contentstore.views.course_config_graders_page', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">Grading</a></li> <a href="${reverse('contentstore.views.get_course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a>
<li class="nav-item nav-course-settings-team"><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li> </li>
<li class="nav-item nav-course-settings-advanced"><a href="${reverse('course_advanced_settings', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">Advanced Settings</a></li> <li class="nav-item nav-course-settings-grading">
<a href="${reverse('contentstore.views.course_config_graders_page', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">Grading</a>
</li>
<li class="nav-item nav-course-settings-team">
<a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a>
</li>
<li class="nav-item nav-course-settings-advanced">
<a href="${reverse('course_advanced_settings', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">Advanced Settings</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</li> </li>
<li class="nav-item nav-course-tools"> <li class="nav-item nav-course-tools">
<h3 class="title">Tools <i class="icon-caret-down"></i></h3> <h3 class="title"><span class="label">Tools</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub"> <div class="wrapper wrapper-nav-sub">
<div class="nav-sub"> <div class="nav-sub">
<ul> <ul>
<li class="nav-item nav-course-tools-checklists"><a href="${reverse('checklists', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Checklists</a></li> <li class="nav-item nav-course-tools-checklists">
<li class="nav-item nav-course-tools-import"><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li> <a href="${reverse('checklists', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Checklists</a>
<li class="nav-item nav-course-tools-export"><a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a></li> </li>
<li class="nav-item nav-course-tools-import">
<a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a>
</li>
<li class="nav-item nav-course-tools-export">
<a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -68,34 +89,53 @@ ...@@ -68,34 +89,53 @@
% endif % endif
</div> </div>
<div class="wrapper wrapper-right"> <div class="wrapper wrapper-r">
% if user.is_authenticated(): % if user.is_authenticated():
<nav class="nav-account nav-is-signedin nav-dropdown"> <nav class="nav-account nav-is-signedin nav-dd ui-right">
<h2 class="sr">Currently logged in as:</h2> <h2 class="sr">Help &amp; Account Navigation</h2>
<ol> <ol>
<li class="nav-item nav-account-username"> <li class="nav-item nav-account-help">
<a href="#" class="title"> <h3 class="title"><span class="label">Help</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<span class="account-username">
<i class="icon-user"></i> <div class="wrapper wrapper-nav-sub">
${ user.username } <div class="nav-sub">
</span> <ul>
<i class="icon-caret-down"></i> <li class="nav-item nav-help-documentation">
</a> <a href="http://files.edx.org/Getting_Started_with_Studio.pdf" title="This is a PDF Document">Studio Documentation</a>
</li>
<li class="nav-item nav-help-helpcenter">
<a href="http://help.edge.edx.org/" rel="external">Studio Help Center</a>
</li>
<li class="nav-item nav-help-feedback">
<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>
</ul>
</div>
</div>
</li>
<li class="nav-item nav-account-user">
<h3 class="title"><span class="label"><span class="label-prefix sr">Currently signed in as:</span><span class="account-username" title="${ user.username }">${ user.username }</span></span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub"> <div class="wrapper wrapper-nav-sub">
<div class="nav-sub"> <div class="nav-sub">
<ul> <ul>
<li class="nav-item nav-account-dashboard"><a href="/">My Courses</a></li> <li class="nav-item nav-account-dashboard">
<li class="nav-item nav-account-help"><a href="http://help.edge.edx.org/" rel="external">Studio Help</a></li> <a href="/">My Courses</a>
<li class="nav-item nav-account-signout"><a class="action action-signout" href="${reverse('logout')}">Sign Out</a></li> </li>
<li class="nav-item nav-account-signout">
<a class="action action-signout" href="${reverse('logout')}">Sign Out</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</li> </li>
</ol> </ol>
</nav> </nav>
% else: % else:
<nav class="nav-not-signedin"> <nav class="nav-not-signedin nav-pitch">
<h2 class="sr">You're not currently signed in</h2> <h2 class="sr">You're not currently signed in</h2>
<ol> <ol>
<li class="nav-item nav-not-signedin-hiw"> <li class="nav-item nav-not-signedin-hiw">
......
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