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 @@
// ====================
// layout-based buttons
.btn-nav-primary {
@extend .btn-nav-simple;
// 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;
color: $gray-d1;
&:hover, &:active {
background: $white;
......
cms/static/sass/elements/_header.scss
......@@ -3,12 +3,12 @@
.wrapper-header {
@extend .depth3;
margin: 0;
@include box-shadow(0 1px 2px 0 $shadow-l1);
background: $white;
position: relative;
width: 100%;
padding: $baseline;
margin: 0;
padding: 0 $baseline;
background: $white;
header.primary {
@include box-sizing(border-box);
......@@ -48,14 +48,22 @@
margin-right: 0;
}
}
.nav-item a {
color: $gray-d1;
&:hover {
color: $blue-s1;
}
}
}
// basic layout - dropdowns
.nav-dd {
// basic layout - dropdowns
.nav-dd {
.title {
@extend .t-action2;
@extend .btn-nav-primary;
@extend .btn-dd-nav-primary;
@include transition(all 0.25s ease-in-out 0);
.label, .icon-caret-down {
......@@ -76,13 +84,23 @@
opacity: 1.0;
}
}
.nav-sub .nav-item {
[class^="icon-"] {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
}
}
}
// ====================
// specific elements - branding
.branding {
padding: ($baseline*0.75) 0;
a {
display: block;
......@@ -98,30 +116,42 @@
// specific elements - course name/info
.info-course {
margin-right: ($baseline/4);
border-right: 1px solid $gray-l3;
padding: ($baseline/2) $baseline ($baseline/2) 0;
margin-right: ($baseline*0.75);
border-right: 1px solid $gray-l4;
padding: ($baseline*0.75) $baseline ($baseline*0.75) 0;
.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 {
@extend .t-action3;
@extend .t-action2;
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 600;
color: $gray;
}
// entire link
a {
@include transition(color 0.25s ease-in-out);
color: $gray-d1;
&:hover {
color: $blue-s1;
}
}
}
......@@ -130,23 +160,26 @@
// specific elements - course nav
.nav-course {
.nav-item {
.title {
}
}
padding: ($baseline*0.75) 0;
}
// ====================
// specific elements - account-based nav
.nav-account {
position: relative;
padding: ($baseline*0.75) 0;
text-align: right;
.nav-sub {
text-align: left;
}
.nav-account-help {
.wrapper-nav-sub {
width: ($baseline*10);
}
}
.nav-account-user {
......@@ -158,9 +191,18 @@
// specific elements - pitch/how it works nav
.nav-pitch {
position: relative;
padding: ($baseline*0.75) 0;
text-align: right;
.nav-sub {
text-align: left;
}
}
}
// ====================
// CASE: user signed in
.is-signedin {
......@@ -171,6 +213,25 @@
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 {
width: flex-grid(3, 12);
}
......@@ -181,6 +242,7 @@
.nav-account {
width: flex-grid(3, 12);
right: -($baseline*1.5);
}
}
}
......@@ -192,20 +254,89 @@
.wrapper-header {
nav > ol > .nav-item {
margin-right: $baseline;
&:last-child {
margin-right: 0;
}
}
.branding {
width: flex-grid(2, 12);
}
.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 {
}
.icon-caret-down {
// @include transition(rotate .15s ease-in-out .25s);
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 {
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 @@
</a>
</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>
<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>
<div class="wrapper wrapper-nav-sub">
......@@ -41,7 +41,7 @@
</div>
</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>
<div class="wrapper wrapper-nav-sub">
......@@ -50,7 +50,7 @@
<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"> -->
<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">
......@@ -64,7 +64,7 @@
</div>
</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>
<div class="wrapper wrapper-nav-sub">
......@@ -88,31 +88,31 @@
% endif
% 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>
<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>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<li class="nav-item nav-account-">
<a href="">Help Link #1</a>
<li class="nav-item nav-help-documentation">
<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-account-">
<a href="">Help Link #2</a>
<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-account-">
<a href="">Help Link #3</a>
<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 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>
<div class="wrapper wrapper-nav-sub">
......
common/static/sass/_mixins.scss
......@@ -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-well {
@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