Skip to content

E
edx-platform
Commit f98f500c by Brian Talbot
Options

studio - sets initial studio nav revisions (WIP)

parent d552eef9
Showing with 255 additions and 571 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/sass/elements/_header.scss
......@@ -4,22 +4,11 @@
.wrapper-header {
@extend .depth3;
margin: 0;
padding: $baseline;
border-bottom: 1px solid $gray;
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.2));
@include box-shadow(0 1px 2px 0 $shadow-l1);
background: $white;
height: 76px;
position: relative;
width: 100%;
a {
color: $baseFontColor;
display: block;
&:hover, &:active {
color: $blue;
}
}
padding: $baseline;
header.primary {
@include clearfix();
......@@ -27,543 +16,192 @@
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto;
color: $gray-l1;
}
nav .nav-item {
display: inline-block;
}
}
// ====================
// ====================
// 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
.branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch {
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
.info-course {
@include font-size(14);
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 {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 50px;
position: absolute;
right: 0px;
top: -12px;
width: 1px;
}
.course-number, .course-org {
@include font-size(12);
// basic layout
.branding, .info-course, .nav-course, .nav-account, .nav-pitch {
@include box-sizing(border-box);
display: inline-block;
max-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
}
.course-org {
margin-right: ($baseline/4);
max-width: 140px;
vertical-align: middle;
}
.course-title {
display: block;
width: 100%;
max-width: 220px;
overflow: hidden;
margin-top: -4px;
white-space: nowrap;
text-overflow: ellipsis;
@include font-size(16);
font-weight: 600;
.branding, .info-course, .nav-course {
margin-right: $baseline;
}
}
// ====================
// specific elements - course nav
.nav-course {
width: 290px;
@extend .t-copy-sub1;
margin-top: -($baseline/4);
> ol > .nav-item {
vertical-align: bottom;
margin: 0 ($baseline/2) 0 0;
&:last-child {
margin-right: 0;
}
// basic layout - nav items
.nav-item {
.title {
display: block;
padding: 0 ($baseline/4);
text-transform: uppercase;
font-weight: 600;
color: $gray-d3;
.label-prefix {
@include font-size(11);
display: block;
font-weight: 400;
}
}
// specific nav items
&.nav-course-courseware {
}
&.nav-course-settings {
}
&.nav-course-tools {
}
}
}
// ====================
// specific elements - account-based nav
.nav-account {
width: 100%;
margin-top: ($baseline*0.75);
@include font-size(14);
text-align: right;
.nav-account-username {
width: 100%;
.icon-user {
display: inline-block;
vertical-align: middle;
margin-right: 3px;
@include font-size(12);
}
nav {
.account-username {
> ol > .nav-item {
@extend .t-action2;
display: inline-block;
vertical-align: middle;
width: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
margin-right: ($baseline);
font-weight: 600;
.icon-expand {
display: inline-block;
vertical-align: middle;
&:last-child {
margin-right: 0;
}
}
}
}
// ====================
// basic layout - dropdowns
.nav-dd {
// UI - dropdown
.nav-dropdown {
.nav-item {
position: relative;
.title {
@extend .t-action2;
.icon-caret-down {
@include font-size(14);
@include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out);
display: inline-block;
vertical-align: middle;
margin-left: 2px;
opacity: 0.5;
color: $gray-l2;
}
.label, .icon-caret-down {
&:hover {
}
.icon-caret-down {
color: $blue;
opacity: 1.0;
@include transition(opacity 0.25s ease-in-out 0);
opacity: 0.25;
}
}
}
.wrapper-nav-sub {
position: absolute;
left: -7px;
top: 47px;
width: 140px;
opacity: 0.0;
pointer-events: none;
}
&:hover {
.nav-sub {
@include border-radius(2px);
@include box-sizing(border-box);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
position: relative;
width: 100%;
border: 1px solid $gray-l2;
padding: ($baseline/4) ($baseline/2);
background: $white;
&:after, &:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
.icon-caret-down {
opacity: 1.0;
}
}
}
}
&:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 5px;
right: 3px;
margin-left: -5px;
}
// ====================
&:before {
border-color: rgba(178, 178, 178, 0);
border-bottom-color: $gray-l2;
border-width: 6px;
right: 3px;
margin-left: -6px;
}
// specific elements - branding
.branding {
.nav-item {
a {
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 {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
a {
img {
width: 100%;
display: block;
}
}
}
// UI - dropdown - specific navs
&.nav-account {
.wrapper-nav-sub {
top: 27px;
left: auto;
right: -13px;
width: 110px;
}
.nav-sub {
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 {
left: 88px;
}
// specific elements - course name/info
.info-course {
.nav-sub:before {
left: 88px;
}
.course-org, .course-number {
@extend .text-sr;
}
.nav-course-settings {
.nav-sub:after {
left: 88px;
}
.course-title {
@extend .t-title7;
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 600;
color: $gray-d1;
.nav-sub:before {
left: 88px;
}
}
.nav-course-tools {
// entire link
a {
.wrapper-nav-sub {
top: ($baseline*1.5);
width: 100px;
}
&:hover {
.nav-sub:after {
left: 68px;
}
.nav-sub:before {
left: 68px;
}
}
}
}
// ====================
// STATE: is-signed in
.is-signedin {
&.course .branding {
&:before {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 50px;
position: absolute;
right: 1px;
top: -8px;
width: 1px;
}
&:after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 50px;
position: absolute;
right: 0px;
top: -12px;
width: 1px;
}
}
}
// ====================
// STATE: not signed in
.not-signedin {
.wrapper-left {
width: flex-grid(4, 12);
}
.wrapper-right {
width: flex-grid(8, 12);
}
// ====================
// STATE: not signed in - unauthenticated nav
.nav-not-signedin {
float: right;
margin-top: ($baseline/4);
// specific elements - course nav
.nav-course {
.nav-item {
@include font-size(16);
vertical-align: middle;
margin: 0 $baseline 0 0;
&:last-child {
margin-right: 0;
}
.title {
@extend .t-action2;
.action {
margin-top: -($baseline/4);
display: inline-block;
padding: ($baseline/4) ($baseline/2);
&:hover {
@extend .fake-link;
}
}
}
}
// STATE: not signed in - specific items
.nav-not-signedin-help {
// ====================
}
// specific elements - account-based nav
.nav-account {
text-align: right;
.nav-not-signedin-signup {
margin-right: ($baseline/2);
.nav-account-help {
.action-signup {
@include blue-button;
@include transition(all .15s);
@include font-size(14);
padding: ($baseline/4) ($baseline/2);
text-transform: uppercase;
font-weight: 600;
}
}
.nav-not-signedin-signin {
.nav-account-user {
.action-signin {
@include white-button;
@include transition(all .15s);
@include font-size(14);
padding: ($baseline/4) ($baseline/2);
text-transform: uppercase;
font-weight: 600;
}
}
}
}
// ====================
// STATE: active/current nav states
.nav-item.is-current,
body.howitworks .nav-not-signedin-hiw,
// dashboard
body.dashboard .nav-account-dashboard,
// course content
body.course.outline .nav-course-courseware .title,
body.course.updates .nav-course-courseware .title,
body.course.pages .nav-course-courseware .title,
body.course.uploads .nav-course-courseware .title,
// ====================
body.course.outline .nav-course-courseware-outline,
body.course.updates .nav-course-courseware-updates,
body.course.pages .nav-course-courseware-pages,
body.course.uploads .nav-course-courseware-uploads,
// course settings
body.course.schedule .nav-course-settings .title,
body.course.grading .nav-course-settings .title,
body.course.team .nav-course-settings .title,
body.course.advanced .nav-course-settings .title,
body.course.schedule .nav-course-settings-schedule,
body.course.grading .nav-course-settings-grading,
body.course.team .nav-course-settings-team,
body.course.advanced .nav-course-settings-advanced,
// course tools
body.course.import .nav-course-tools .title,
body.course.export .nav-course-tools .title,
body.course.import .nav-course-tools-import,
body.course.export .nav-course-tools-export,
{
color: $blue;
a {
color: $blue;
pointer-events: none;
// specific elements - pitch/how it works nav
.nav-pitch {
text-align: right;
}
}
// CASE: user signed in
.is-signedin {
body.signup .nav-not-signedin-signin {
.branding {
width: flex-grid(2, 12);
margin-right: flex-gutter();
background: purple;
}
a {
background-color: #d9e3ee;
color: #6d788b;
.info-course {
width: flex-grid(4, 12);
margin-right: flex-gutter();
background: red;
}
}
body.signin .nav-not-signedin-signup {
.nav-course {
width: flex-grid(4, 12);
margin-right: flex-gutter();
background: blue;
}
a {
background-color: #62aaf5;
color: #fff;
.nav-account {
width: flex-grid(2, 12);
background: green;
}
}
// ====================
// STATE: js enabled
.js {
.nav-dropdown {
.nav-item .title {
outline: 0;
cursor: pointer;
&:hover, &:active, &.is-selected {
color: $blue;
// CASE: user not signed in
.not-signedin {
.icon-expand {
color: $blue;
}
}
}
.branding {
width: flex-grid(2, 12);
margin-right: flex-gutter();
background: purple;
}
.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;
}
.nav-pitch {
width: flex-grid(10, 12);
background: green;
}
}
cms/static/sass/elements/_navigation.scss
......@@ -18,20 +18,26 @@ nav {
// ====================
// primary
// ====================
// right hand side
// ====================
// tabs
// ====================
// dropdown
.nav-dd {
// ====================
.title {
//
.label, .icon-caret-down {
display: inline-block;
vertical-align: middle;
}
.icon-caret-down {
margin-left: ($baseline/10);
}
}
.wrapper-nav-sub {
display: none !important;
}
}
cms/templates/widgets/header.html
<%! from django.core.urlresolvers import reverse %>
<div class="wrapper-header wrapper" id="view-top">
<header class="primary" role="banner">
<div class="wrapper wrapper-left ">
<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:
<% ctx_loc = context_course.location %>
<div class="info-course">
<h2 class="sr">Current Course:</h2>
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">
% if context_course:
<% ctx_loc = context_course.location %>
<h2 class="info-course">
<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))}">
<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>
</a>
</div>
</a>
</h2>
<nav class="nav-course">
<h2 class="sr">${context_course.display_name_with_default}'s Navigation:</h2>
<ol>
<li class="nav-item nav-course-courseware nav-dd">
<h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Content</span> <i class="icon-caret-down"></i></h3>
<nav class="nav-course primary nav-dropdown" role="navigation">
<h2 class="sr">${context_course.display_name_with_default}'s Navigation:</h2>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<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-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>
</div>
</div>
</li>
<ol>
<li class="nav-item nav-course-courseware">
<h3 class="title"><span class="label-prefix">Course </span>Content <i class="icon-caret-down"></i></h3>
<li class="nav-item nav-course-settings nav-dd">
<h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Settings</span> <i class="icon-caret-down"></i></h3>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<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-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>
</div>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<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-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>
</div>
</li>
</div>
</li>
<li class="nav-item nav-course-settings">
<h3 class="title"><span class="label-prefix">Course </span>Settings <i class="icon-caret-down"></i></h3>
<li class="nav-item nav-course-tools nav-dd">
<h3 class="title"><span class="label">Tools</span> <i class="icon-caret-down"></i></h3>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<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-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>
</div>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<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-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>
</div>
</li>
</div>
</li>
</ol>
</nav>
% endif
% if user.is_authenticated():
<nav class="nav-account nav-is-signedin">
<h2 class="sr">Help &amp; Account Navigation</h2>
<li class="nav-item nav-course-tools">
<h3 class="title">Tools <i class="icon-caret-down"></i></h3>
<ol>
<li class="nav-item nav-account-help nav-dd">
<a href="#" class="title"><span class="label">Help</span> <i class="icon-caret-down"></i></a>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<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-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>
</div>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<li class="nav-item nav-account-">
<a href="">Help Link #1</a>
</li>
<li class="nav-item nav-account-">
<a href="">Help Link #2</a>
</li>
<li class="nav-item nav-account-">
<a href="">Help Link #3</a>
</li>
</ul>
</div>
</li>
</ol>
</nav>
% endif
</div>
</div>
</li>
<div class="wrapper wrapper-right">
% if user.is_authenticated():
<nav class="nav-account nav-is-signedin nav-dropdown">
<h2 class="sr">Currently logged in as:</h2>
<ol>
<li class="nav-item nav-account-username">
<a href="#" class="title">
<span class="account-username">
<i class="icon-user"></i>
${ user.username }
</span>
<i class="icon-caret-down"></i>
</a>
<li class="nav-item nav-account-user nav-dd">
<span class="sr">Currently signed in as:</span>
<a href="#" class="title"><span class="label account-username">${ user.username }</span> <i class="icon-caret-down"></i></a>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<li class="nav-item nav-account-dashboard"><a href="/">My Courses</a></li>
<li class="nav-item nav-account-help"><a href="http://help.edge.edx.org/" rel="external">Studio Help</a></li>
<li class="nav-item nav-account-signout"><a class="action action-signout" href="${reverse('logout')}">Sign Out</a></li>
</ul>
</div>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<li class="nav-item nav-account-dashboard">
<a href="/">My Courses</a>
</li>
<li class="nav-item nav-account-help">
<a href="http://help.edge.edx.org/" rel="external">Studio Help</a>
</li>
<li class="nav-item nav-account-signout">
<a class="action action-signout" href="${reverse('logout')}">Sign Out</a>
</li>
</ul>
</div>
</li>
</ol>
</nav>
% else:
<nav class="nav-not-signedin">
<h2 class="sr">You're not currently signed in</h2>
<ol>
<li class="nav-item nav-not-signedin-hiw">
<a href="/">How Studio Works</a>
</li>
<li class="nav-item nav-not-signedin-help">
<a href="http://help.edge.edx.org/" rel="external">Studio Help</a>
</li>
<li class="nav-item nav-not-signedin-signup">
<a class="action action-signup" href="${reverse('signup')}">Sign Up</a>
</li>
<li class="nav-item nav-not-signedin-signin">
<a class="action action-signin" href="${reverse('login')}">Sign In</a>
</li>
</ol>
</nav>
% endif
</div>
</div>
</li>
</ol>
</nav>
% else:
<nav class="nav-not-signedin nav-pitch">
<h2 class="sr">You're not currently signed in</h2>
<ol>
<li class="nav-item nav-not-signedin-hiw">
<a href="/">How Studio Works</a>
</li>
<li class="nav-item nav-not-signedin-help">
<a href="http://help.edge.edx.org/" rel="external">Studio Help</a>
</li>
<li class="nav-item nav-not-signedin-signup">
<a class="action action-signup" href="${reverse('signup')}">Sign Up</a>
</li>
<li class="nav-item nav-not-signedin-signin">
<a class="action action-signin" href="${reverse('login')}">Sign In</a>
</li>
</ol>
</nav>
% endif
</header>
</div>
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