studio - course nav: styled dropdown navigation
This commit is contained in:
Brian Talbot
@@ -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();
|
||||
|
||||
@@ -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 {
|
||||
|
||||
}
|
||||
|
||||
&:after {
|
||||
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
|
||||
.wrapper-nav-sub {
|
||||
top: 27px;
|
||||
left: auto;
|
||||
right: -($baseline/2);
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.nav-sub {
|
||||
right: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nav-sub:after {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
@@ -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">▾</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 & 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 & 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">▾</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 & 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 & 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">▾</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">▾</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>
|
||||
|
||||
Reference in New Issue
Block a user