studio - soft landing and nav: slight visual tweaks to soft landing UI and added…

studio - soft landing and nav: slight visual tweaks to soft landing UI and added in support link + new tab/window and modal management JS

cms/static/js/base.js

@@ -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(){

cms/static/sass/_header.scss

@@ -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 {

cms/static/sass/_index.scss

@@ -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 {

cms/templates/widgets/footer.html

@@ -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>

cms/templates/widgets/header.html

@@ -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 &amp; 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>