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() {
$('.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');
e.preventDefault();
......
cms/static/sass/_header.scss
......@@ -198,7 +198,7 @@ nav .nav-item {
// specific elements - account-based nav
.nav-account {
width: 100%;
margin-top: 10px;
margin-top: ($baseline*0.75);
@include font-size(14);
text-align: right;
......@@ -235,16 +235,49 @@ nav .nav-item {
}
}
.wrapper-nav-sub {
position: absolute;
left: -7px;
top: 47px;
width: 140px;
}
.nav-sub {
@include border-radius(2px);
position: absolute;
top: 30px;
width: 125px;
@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);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
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 {
display: block;
margin: 0 0 ($baseline/4) 0;
......@@ -262,85 +295,70 @@ nav .nav-item {
display: block;
}
}
}
// arrows
&:after, &:before {
// UI - dropdown - specific navs
&.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 {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
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-sub:before {
left: auto;
right: 9px;
}
}
&.nav-course {
.nav-sub {
left: -5px;
}
.nav-course-courseware {
.nav-sub {
top: 50px;
.nav-sub:after {
left: 86px;
}
.nav-sub:before {
left: 86px;
}
}
.nav-course-settings {
.nav-sub {
top: 50px;
.nav-sub:after {
left: 86px;
}
.nav-sub:before {
left: 86px;
}
}
.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
}
}
.nav-sub {
.wrapper-nav-sub {
@include transition (opacity 1.0s ease-in-out 0s);
opacity: 0;
pointer-events: none;
......
cms/templates/widgets/header.html
......@@ -23,37 +23,43 @@
<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>
<div class="nav-sub">
<ul>
<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('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('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('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"><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('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('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('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>
<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>
<div class="nav-sub">
<ul>
<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('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('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))}">Advanced Settings</a></li>
</ul>
</div>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<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('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('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))}">Advanced Settings</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item nav-course-tools">
<h3 class="title">Tools <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
<div class="nav-sub">
<ul>
<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>
<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 class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<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>
<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>
</li>
</ol>
......@@ -75,12 +81,14 @@
<i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i>
</a>
<div class="nav-sub">
<ul>
<li class="nav-item"><a href="#">My Courses</a></li>
<li class="nav-item"><a href="#">Help</a></li>
<li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
</ul>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<li class="nav-item"><a href="#">My Courses</a></li>
<li class="nav-item"><a href="#">Help</a></li>
<li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
</ul>
</div>
</div>
</li>
</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