Skip to content

E
edx-platform
Commit 2a04eeec by Brian Talbot
Options

studio - revises studio nav visually and adds help links

parent 51f96ad7
Showing with 337 additions and 70 deletions
cms/static/sass/elements/_controls.scss
...@@ -135,12 +135,33 @@ ...@@ -135,12 +135,33 @@
// ==================== // ====================
// layout-based buttons // simple dropdown button styling - should we move this elsewhere?
.btn-nav-primary { .btn-dd {
@extend .btn-nav-simple; @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; background: $white;
border-color: $white; border-color: $white;
color: $gray; color: $gray-d1;
&:hover, &:active { &:hover, &:active {
background: $white; background: $white;
......
cms/static/sass/elements/_header.scss
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
.wrapper-header { .wrapper-header {
@extend .depth3; @extend .depth3;
margin: 0;
@include box-shadow(0 1px 2px 0 $shadow-l1); @include box-shadow(0 1px 2px 0 $shadow-l1);
background: $white;
position: relative; position: relative;
width: 100%; width: 100%;
padding: $baseline; margin: 0;
padding: 0 $baseline;
background: $white;
header.primary { header.primary {
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -48,14 +48,22 @@ ...@@ -48,14 +48,22 @@
margin-right: 0; margin-right: 0;
} }
} }
.nav-item a {
color: $gray-d1;
&:hover {
color: $blue-s1;
}
}
} }
// basic layout - dropdowns // basic layout - dropdowns
.nav-dd { .nav-dd {
.title { .title {
@extend .t-action2; @extend .t-action2;
@extend .btn-nav-primary; @extend .btn-dd-nav-primary;
@include transition(all 0.25s ease-in-out 0); @include transition(all 0.25s ease-in-out 0);
.label, .icon-caret-down { .label, .icon-caret-down {
...@@ -76,13 +84,23 @@ ...@@ -76,13 +84,23 @@
opacity: 1.0; opacity: 1.0;
} }
} }
.nav-sub .nav-item {
[class^="icon-"] {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
} }
} }
// ==================== // ====================
// specific elements - branding // specific elements - branding
.branding { .branding {
padding: ($baseline*0.75) 0;
a { a {
display: block; display: block;
...@@ -98,30 +116,42 @@ ...@@ -98,30 +116,42 @@
// specific elements - course name/info // specific elements - course name/info
.info-course { .info-course {
margin-right: ($baseline/4); margin-right: ($baseline*0.75);
border-right: 1px solid $gray-l3; border-right: 1px solid $gray-l4;
padding: ($baseline/2) $baseline ($baseline/2) 0; padding: ($baseline*0.75) $baseline ($baseline*0.75) 0;
.course-org, .course-number { .course-org, .course-number {
@extend .text-sr; @extend .t-action4;
display: inline-block;
vertical-align: middle;
opacity: 0.75;
}
.course-org {
width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: ($baseline/4);
} }
.course-title { .course-title {
@extend .t-action3; @extend .t-action2;
display: block; display: block;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: 600; font-weight: 600;
color: $gray;
} }
// entire link // entire link
a { a {
@include transition(color 0.25s ease-in-out);
color: $gray-d1;
&:hover { &:hover {
color: $blue-s1;
} }
} }
} }
...@@ -130,23 +160,26 @@ ...@@ -130,23 +160,26 @@
// specific elements - course nav // specific elements - course nav
.nav-course { .nav-course {
padding: ($baseline*0.75) 0;
.nav-item {
.title {
}
}
} }
// ==================== // ====================
// specific elements - account-based nav // specific elements - account-based nav
.nav-account { .nav-account {
position: relative;
padding: ($baseline*0.75) 0;
text-align: right; text-align: right;
.nav-sub {
text-align: left;
}
.nav-account-help { .nav-account-help {
.wrapper-nav-sub {
width: ($baseline*10);
}
} }
.nav-account-user { .nav-account-user {
...@@ -158,9 +191,18 @@ ...@@ -158,9 +191,18 @@
// specific elements - pitch/how it works nav // specific elements - pitch/how it works nav
.nav-pitch { .nav-pitch {
position: relative;
padding: ($baseline*0.75) 0;
text-align: right; text-align: right;
.nav-sub {
text-align: left;
}
} }
} }
// ====================
// CASE: user signed in // CASE: user signed in
.is-signedin { .is-signedin {
...@@ -171,6 +213,25 @@ ...@@ -171,6 +213,25 @@
margin-right: flex-gutter(); margin-right: flex-gutter();
} }
.nav-account {
width: flex-grid(9, 12);
right: -($baseline*6);
}
}
}
// ====================
// CASE: in course {
.is-signedin.course {
.wrapper-header {
.branding {
width: flex-grid(2, 12);
margin-right: flex-gutter();
}
.info-course { .info-course {
width: flex-grid(3, 12); width: flex-grid(3, 12);
} }
...@@ -181,6 +242,7 @@ ...@@ -181,6 +242,7 @@
.nav-account { .nav-account {
width: flex-grid(3, 12); width: flex-grid(3, 12);
right: -($baseline*1.5);
} }
} }
} }
...@@ -192,20 +254,89 @@ ...@@ -192,20 +254,89 @@
.wrapper-header { .wrapper-header {
nav > ol > .nav-item {
margin-right: $baseline;
&:last-child {
margin-right: 0;
}
}
.branding { .branding {
width: flex-grid(2, 12); width: flex-grid(2, 12);
} }
.nav-pitch { .nav-pitch {
width: flex-grid(10, 12); width: flex-grid(9, 12);
right: -($baseline*6);
.nav-item {
margin-right: ($baseline/2);
&:last-child {
margin-right: 0;
}
}
.action-signup {
@include blue-button;
@include transition(all .15s);
@include font-size(14);
padding: ($baseline/4) ($baseline/2);
text-transform: uppercase;
font-weight: 600;
}
.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.checklists .nav-course-tools .title,
body.course.import .nav-course-tools-import,
body.course.export .nav-course-tools-export,
body.course.checklists .nav-course-tools-checklists,
{
color: $blue;
a {
color: $blue;
pointer-events: none;
}
}
cms/static/sass/elements/_navigation.scss
...@@ -32,11 +32,147 @@ nav { ...@@ -32,11 +32,147 @@ nav {
} }
.icon-caret-down { .icon-caret-down {
// @include transition(rotate .15s ease-in-out .25s);
margin-left: ($baseline/10); margin-left: ($baseline/10);
&:hover {
@include transform(rotate(180deg));
}
}
// dropped down state
&.is-selected {
.icon-caret-down {
@include transform(rotate(180deg));
}
}
}
.nav-item {
position: relative;
&:hover {
} }
} }
.wrapper-nav-sub { .wrapper-nav-sub {
display: none !important; @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/templates/widgets/header.html
...@@ -14,11 +14,11 @@ ...@@ -14,11 +14,11 @@
</a> </a>
</h2> </h2>
<nav class="nav-course"> <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 nav-dd"> <li class="nav-item nav-course-courseware">
<h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Content</span> <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"></i></h3>
<div class="wrapper wrapper-nav-sub"> <div class="wrapper wrapper-nav-sub">
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</div> </div>
</li> </li>
<li class="nav-item nav-course-settings nav-dd"> <li class="nav-item nav-course-settings">
<h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Settings</span> <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"></i></h3>
<div class="wrapper wrapper-nav-sub"> <div class="wrapper wrapper-nav-sub">
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
<li class="nav-item nav-course-settings-schedule"> <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> <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>
<!-- <li class="nav-item nav-course-settings-grading"> --> <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> <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>
<li class="nav-item nav-course-settings-team"> <li class="nav-item nav-course-settings-team">
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
</div> </div>
</li> </li>
<li class="nav-item nav-course-tools nav-dd"> <li class="nav-item nav-course-tools">
<h3 class="title"><span class="label">Tools</span> <i class="icon-caret-down"></i></h3> <h3 class="title"><span class="label">Tools</span> <i class="icon-caret-down"></i></h3>
<div class="wrapper wrapper-nav-sub"> <div class="wrapper wrapper-nav-sub">
...@@ -88,31 +88,31 @@ ...@@ -88,31 +88,31 @@
% endif % endif
% if user.is_authenticated(): % if user.is_authenticated():
<nav class="nav-account nav-is-signedin"> <nav class="nav-account nav-is-signedin nav-dd ui-right">
<h2 class="sr">Help &amp; Account Navigation</h2> <h2 class="sr">Help &amp; Account Navigation</h2>
<ol> <ol>
<li class="nav-item nav-account-help nav-dd"> <li class="nav-item nav-account-help">
<h3 class="title"><span class="label">Help</span> <i class="icon-caret-down"></i></h3> <h3 class="title"><span class="label">Help</span> <i class="icon-caret-down"></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-"> <li class="nav-item nav-help-documentation">
<a href="">Help Link #1</a> <a href="http://files.edx.org/Getting_Started_with_Studio.pdf" title="This is a PDF Document">Studio Documentation</a>
</li> </li>
<li class="nav-item nav-account-"> <li class="nav-item nav-help-helpcenter">
<a href="">Help Link #2</a> <a href="http://help.edge.edx.org/" rel="external">Studio Help Center</a>
</li> </li>
<li class="nav-item nav-account-"> <li class="nav-item nav-help-feedback">
<a href="">Help Link #3</a> <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> </li>
</ul> </ul>
</div> </div>
</div> </div>
</li> </li>
<li class="nav-item nav-account-user nav-dd"> <li class="nav-item nav-account-user">
<h3 class="title"><span class="label"><span class="sr">Currently signed in as:</span><span class="label account-username">${ user.username }</span></span> <i class="icon-caret-down"></i></h3> <h3 class="title"><span class="label"><span class="sr">Currently signed in as:</span><span class="label account-username">${ user.username }</span></span> <i class="icon-caret-down"></i></h3>
<div class="wrapper wrapper-nav-sub"> <div class="wrapper wrapper-nav-sub">
......
common/static/sass/_mixins.scss
...@@ -190,27 +190,6 @@ ...@@ -190,27 +190,6 @@
} }
} }
// simple nav button styling - should we move this elsewhere?
.btn-nav-simple {
@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 {
@include box-shadow(inset 0 1px 2px 1px $shadow);
border-color: $gray-l2;
}
}
// UI archetypes - well // UI archetypes - well
.ui-well { .ui-well {
@include box-shadow(inset 0 1px 2px 1px $shadow); @include box-shadow(inset 0 1px 2px 1px $shadow);
......
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