Skip to content

E
edx-platform
Commit 1dae21e9 by Brian Talbot
Options

studio - course nav: styled dropdown navigation

parent b0be1cd3
Showing with 85 additions and 59 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
&:after, &:before {
} }
&:after { // UI - dropdown - specific navs
&.nav-account {
}
&:before {
} .wrapper-nav-sub {
top: 27px;
left: auto;
right: -($baseline/2);
width: 110px;
} }
// UI - dropdown - vendor .nav-sub {
.arrow_box { text-align: left;
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:after {
border-color: rgba(255, 255, 255, 0); left: auto;
border-bottom-color: #fff; right: 10px;
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-sub:before {
&.nav-account { left: auto;
right: 9px;
.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,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<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="wrapper wrapper-nav-sub">
<div class="nav-sub"> <div class="nav-sub">
<ul> <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_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li>
...@@ -31,11 +32,13 @@ ...@@ -31,11 +32,13 @@
<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('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files &amp; Uploads</a></li>
</ul> </ul>
</div> </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="wrapper wrapper-nav-sub">
<div class="nav-sub"> <div class="nav-sub">
<ul> <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))}">Schedule &amp; Details</a></li>
...@@ -44,17 +47,20 @@ ...@@ -44,17 +47,20 @@
<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('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Advanced Settings</a></li>
</ul> </ul>
</div> </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="wrapper wrapper-nav-sub">
<div class="nav-sub"> <div class="nav-sub">
<ul> <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('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> <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> </ul>
</div> </div>
</div>
</li> </li>
</ol> </ol>
</nav> </nav>
...@@ -75,6 +81,7 @@ ...@@ -75,6 +81,7 @@
<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="wrapper wrapper-nav-sub">
<div class="nav-sub"> <div class="nav-sub">
<ul> <ul>
<li class="nav-item"><a href="#">My Courses</a></li> <li class="nav-item"><a href="#">My Courses</a></li>
...@@ -82,6 +89,7 @@ ...@@ -82,6 +89,7 @@
<li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li> <li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
</ul> </ul>
</div> </div>
</div>
</li> </li>
</ol> </ol>
</nav> </nav>
......
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