Skip to content

E
edx-platform
Commit 1dae21e9 by Brian Talbot
Options

studio - course nav: styled dropdown navigation

parent b0be1cd3
Showing with 114 additions and 88 deletions
cms/static/js/base.js
...@@ -44,7 +44,7 @@ $(document).ready(function() { ...@@ -44,7 +44,7 @@ $(document).ready(function() {
$('.nav-dropdown .nav-item .title').click(function(e){ $('.nav-dropdown .nav-item .title').click(function(e){
$subnav = $(this).parent().find('.nav-sub'); $subnav = $(this).parent().find('.wrapper-nav-sub');
$title = $(this).parent().find('.title'); $title = $(this).parent().find('.title');
e.preventDefault(); e.preventDefault();
......
cms/static/sass/_header.scss
...@@ -198,7 +198,7 @@ nav .nav-item { ...@@ -198,7 +198,7 @@ nav .nav-item {
// specific elements - account-based nav // specific elements - account-based nav
.nav-account { .nav-account {
width: 100%; width: 100%;
margin-top: 10px; margin-top: ($baseline*0.75);
@include font-size(14); @include font-size(14);
text-align: right; text-align: right;
...@@ -235,16 +235,49 @@ nav .nav-item { ...@@ -235,16 +235,49 @@ nav .nav-item {
} }
} }
.wrapper-nav-sub {
position: absolute;
left: -7px;
top: 47px;
width: 140px;
}
.nav-sub { .nav-sub {
@include border-radius(2px); @include border-radius(2px);
position: absolute; @include box-sizing(border-box);
top: 30px; @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
width: 125px; position: relative;
width: 100%;
border: 1px solid $gray-l2; border: 1px solid $gray-l2;
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
background: $white; background: $white;
&:after, &:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 5px;
right: ($baseline/4);
margin-left: -5px;
}
&:before {
border-color: rgba(178, 178, 178, 0);
border-bottom-color: $gray-l2;
border-width: 6px;
right: ($baseline/4);
margin-left: -6px;
}
.nav-item { .nav-item {
display: block; display: block;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
...@@ -262,85 +295,70 @@ nav .nav-item { ...@@ -262,85 +295,70 @@ nav .nav-item {
display: block; display: block;
} }
} }
}
// arrows // UI - dropdown - specific navs
&:after, &:before { &.nav-account {
.wrapper-nav-sub {
top: 27px;
left: auto;
right: -($baseline/2);
width: 110px;
} }
&:after { .nav-sub {
text-align: left;
} }
&:before { .nav-sub:after {
left: auto;
right: 10px;
} }
}
// UI - dropdown - vendor
.arrow_box {
position: relative;
background: #fff;
border: 1px solid #a1a1a1;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after { .nav-sub:before {
border-color: rgba(255, 255, 255, 0); left: auto;
border-bottom-color: #fff; right: 9px;
border-width: 10px;
left: 50%;
margin-left: -10px;
}
.arrow_box:before {
border-color: rgba(161, 161, 161, 0);
border-bottom-color: #a1a1a1;
border-width: 11px;
left: 50%;
margin-left: -11px;
}
// UI - dropdown - specific navs
&.nav-account {
.nav-sub {
right: 0;
text-align: left;
} }
} }
&.nav-course { &.nav-course {
.nav-sub {
left: -5px;
}
.nav-course-courseware { .nav-course-courseware {
.nav-sub { .nav-sub:after {
top: 50px; left: 86px;
}
.nav-sub:before {
left: 86px;
} }
} }
.nav-course-settings { .nav-course-settings {
.nav-sub { .nav-sub:after {
top: 50px; left: 86px;
}
.nav-sub:before {
left: 86px;
} }
} }
.nav-course-tools { .nav-course-tools {
.nav-sub { .wrapper-nav-sub {
top: ($baseline*1.5);
width: 100px;
}
.nav-sub:after {
left: 66px;
}
.nav-sub:before {
left: 66px;
} }
} }
} }
...@@ -461,7 +479,7 @@ body.course.outline .nav-course-courseware ...@@ -461,7 +479,7 @@ body.course.outline .nav-course-courseware
} }
} }
.nav-sub { .wrapper-nav-sub {
@include transition (opacity 1.0s ease-in-out 0s); @include transition (opacity 1.0s ease-in-out 0s);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
......
cms/templates/widgets/header.html
...@@ -23,37 +23,43 @@ ...@@ -23,37 +23,43 @@
<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="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3> <h3 class="title"><span class="label-prefix">Course </span>Content <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
<div class="nav-sub"> <div class="wrapper wrapper-nav-sub">
<ul> <div class="nav-sub">
<li class="nav-item"><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li> <ul>
<li class="nav-item"><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"><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"><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Pages/Tabs</a></li> <li class="nav-item"><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"><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"><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Pages/Tabs</a></li>
</ul> <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files &amp; Uploads</a></li>
</div> </ul>
</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="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3> <h3 class="title"><span class="label-prefix">Course </span>Settings <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
<div class="nav-sub"> <div class="wrapper wrapper-nav-sub">
<ul> <div class="nav-sub">
<li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a></li> <ul>
<li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Grading</a></li> <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a></li>
<li class="nav-item"><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li> <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Grading</a></li>
<li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Advanced Settings</a></li> <li class="nav-item"><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
</ul> <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Advanced Settings</a></li>
</div> </ul>
</div>
</div>
</li> </li>
<li class="nav-item nav-course-tools"> <li class="nav-item nav-course-tools">
<h3 class="title">Tools <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3> <h3 class="title">Tools <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
<div class="nav-sub"> <div class="wrapper wrapper-nav-sub">
<ul> <div class="nav-sub">
<li class="nav-item"><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li> <ul>
<li class="nav-item"><a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a></li> <li class="nav-item"><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li>
</ul> <li class="nav-item"><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> </div>
</li> </li>
</ol> </ol>
...@@ -75,12 +81,14 @@ ...@@ -75,12 +81,14 @@
<i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i> <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i>
</a> </a>
<div class="nav-sub"> <div class="wrapper wrapper-nav-sub">
<ul> <div class="nav-sub">
<li class="nav-item"><a href="#">My Courses</a></li> <ul>
<li class="nav-item"><a href="#">Help</a></li> <li class="nav-item"><a href="#">My Courses</a></li>
<li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li> <li class="nav-item"><a href="#">Help</a></li>
</ul> <li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
</ul>
</div>
</div> </div>
</li> </li>
</ol> </ol>
......
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