studio - soft landing and nav: slight visual tweaks to soft landing UI and added in support link + new tab/window and modal management JS
This commit is contained in:
@@ -49,18 +49,30 @@ $(document).ready(function() {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if ($subnav.hasClass('is-shown')) {
|
||||
$subnav.removeClass('is-shown');
|
||||
$title.removeClass('is-selected');
|
||||
}
|
||||
if ($subnav.hasClass('is-shown')) {
|
||||
$subnav.removeClass('is-shown');
|
||||
$title.removeClass('is-selected');
|
||||
}
|
||||
|
||||
else {
|
||||
$('.nav-dropdown .nav-item .title').removeClass('is-selected');
|
||||
$('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown');
|
||||
$title.addClass('is-selected');
|
||||
$subnav.addClass('is-shown');
|
||||
}
|
||||
});
|
||||
else {
|
||||
$('.nav-dropdown .nav-item .title').removeClass('is-selected');
|
||||
$('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown');
|
||||
$title.addClass('is-selected');
|
||||
$subnav.addClass('is-shown');
|
||||
}
|
||||
});
|
||||
|
||||
// general link management - new window/tab
|
||||
$('a[rel="external"]').attr('title','This link will open in a new browser/window tab').click(function(e) {
|
||||
window.open($(this).attr('href'));
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// general link management - lean modal window
|
||||
$('a[rel="modal"]').attr('title','This link will open in a modal window').leanModal({overlay : 0.50, closeButton: '.action-modal-close' });
|
||||
$('.action-modal-close').click(function(e){
|
||||
(e).preventDefault();
|
||||
});
|
||||
|
||||
// toggling overview section details
|
||||
$(function(){
|
||||
|
||||
@@ -63,7 +63,7 @@ nav .nav-item {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.branding, .info-course, .nav-course {
|
||||
.branding, .info-course {
|
||||
margin: 0 ($baseline*0.75) 0 0;
|
||||
}
|
||||
|
||||
@@ -85,9 +85,8 @@ nav .nav-item {
|
||||
// specific elements - course name/info
|
||||
.info-course {
|
||||
position: relative;
|
||||
max-width: 195px;
|
||||
margin-top: -3px;
|
||||
padding-right: $baseline;
|
||||
padding-right: ($baseline*0.75);
|
||||
@include font-size(14);
|
||||
|
||||
&:before {
|
||||
@@ -122,6 +121,7 @@ nav .nav-item {
|
||||
|
||||
.course-title {
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@@ -140,7 +140,6 @@ nav .nav-item {
|
||||
|
||||
> ol > .nav-item {
|
||||
vertical-align: bottom;
|
||||
width: 100px;
|
||||
margin: 0 ($baseline/2) 0 0;
|
||||
|
||||
&:last-child {
|
||||
@@ -205,13 +204,6 @@ nav .nav-item {
|
||||
.nav-account-username {
|
||||
width: 100%;
|
||||
|
||||
.ss-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 3px;
|
||||
@include font-size(12);
|
||||
}
|
||||
|
||||
.account-username {
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
@@ -231,8 +223,9 @@ nav .nav-item {
|
||||
position: relative;
|
||||
|
||||
.icon-expand {
|
||||
@include transition (color 0.5s ease-in-out);
|
||||
@include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out);
|
||||
margin-left: 2px;
|
||||
opacity: 0.5;
|
||||
color: $gray-l2;
|
||||
}
|
||||
|
||||
@@ -240,6 +233,7 @@ nav .nav-item {
|
||||
|
||||
.icon-expand {
|
||||
color: $blue;
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -320,6 +314,10 @@ nav .nav-item {
|
||||
|
||||
.nav-sub {
|
||||
text-align: left;
|
||||
|
||||
.icon-expand {
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sub:after {
|
||||
|
||||
@@ -58,9 +58,9 @@
|
||||
|
||||
// welcome content
|
||||
.wrapper-content-header {
|
||||
@include linear-gradient($blue-l1,$blue,$blue-d1);
|
||||
padding-bottom: ($baseline*4);
|
||||
padding-top: ($baseline*4);
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<a href="#">Privacy Policy</a>
|
||||
</li>
|
||||
<li class="nav-item nav-peripheral-help">
|
||||
<a href="#">edX Studio Help</a>
|
||||
<a href="http://help.edge.edx.org/" rel="external">edX Studio Help</a>
|
||||
</li>
|
||||
<li class="nav-item nav-peripheral-contact">
|
||||
<a href="#">Contact edX</a>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<h2 class="sr">Current Course:</h2>
|
||||
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">
|
||||
<span class="course-number">PH207x:</span>
|
||||
<span class="course-title">${context_course.display_name}</span>
|
||||
<span class="course-title" title="${context_course.display_name}">${context_course.display_name}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<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('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Static Pages</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>
|
||||
@@ -84,8 +84,8 @@
|
||||
<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 href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">My Courses</a></li>
|
||||
<li class="nav-item"><a href="http://help.edge.edx.org/" rel="external">Help</a></li>
|
||||
<li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -101,7 +101,7 @@
|
||||
<a href="#">How Studio Works</a>
|
||||
</li>
|
||||
<li class="nav-item nav-not-signedin-help">
|
||||
<a href="#">Studio Help</a>
|
||||
<a href="http://help.edge.edx.org/" rel="external">Studio Help</a>
|
||||
</li>
|
||||
<li class="nav-item nav-not-signedin-signup">
|
||||
<a class="action action-signup" href="${reverse('signup')}">Sign Up</a>
|
||||
|
||||
Reference in New Issue
Block a user