makes the sequence nav more semantic and replaces js hover with css

static/css/application.css

@@ -3617,6 +3617,7 @@ nav.sequence-nav ol li a {
   display: block;
   height: 17px;
   padding: 15px 0 14px;
+  position: relative;
   -webkit-transition-property: all;
   -moz-transition-property: all;
   -ms-transition-property: all;
@@ -3665,25 +3666,27 @@ nav.sequence-nav ol li a.seq_vertical_visited, nav.sequence-nav ol li a.seq_prob
 nav.sequence-nav ol li a.seq_vertical_active, nav.sequence-nav ol li a.seq_problem_active {
   background-image: url("/static/images/sequence-nav/list-icon-current.png");
   background-position: center; }
-nav.sequence-nav ol li p {
+nav.sequence-nav ol li a p {
   background: #333;
   color: #fff;
+  display: none;
   line-height: 22.652px;
-  margin: 0px 0 0 -5px;
+  left: 0px;
   opacity: 0;
   padding: 6px;
   position: absolute;
+  top: 48px;
   text-shadow: 0 -1px 0 black;
   -webkit-transition-property: all;
   -moz-transition-property: all;
   -ms-transition-property: all;
   -o-transition-property: all;
   transition-property: all;
-  -webkit-transition-duration: 0.6s;
-  -moz-transition-duration: 0.6s;
-  -ms-transition-duration: 0.6s;
-  -o-transition-duration: 0.6s;
-  transition-duration: 0.6s;
+  -webkit-transition-duration: 0.1s;
+  -moz-transition-duration: 0.1s;
+  -ms-transition-duration: 0.1s;
+  -o-transition-duration: 0.1s;
+  transition-duration: 0.1s;
   -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
   -moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
   -ms-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
@@ -3694,16 +3697,13 @@ nav.sequence-nav ol li p {
   -ms-transition-delay: 0;
   -o-transition-delay: 0;
   transition-delay: 0;
-  white-space: pre-wrap;
+  white-space: pre;
   z-index: 99; }
-nav.sequence-nav ol li p.shown {
-  margin-top: 4px;
-  opacity: 1; }
-nav.sequence-nav ol li p:empty {
+nav.sequence-nav ol li a p:empty {
   background: none; }
-nav.sequence-nav ol li p:empty::after {
+nav.sequence-nav ol li a p:empty::after {
   display: none; }
-nav.sequence-nav ol li p::after {
+nav.sequence-nav ol li a p::after {
   background: #333;
   content: " ";
   display: block;
@@ -3717,6 +3717,10 @@ nav.sequence-nav ol li p::after {
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
   width: 10px; }
+nav.sequence-nav ol li a:hover p {
+  display: block;
+  margin-top: 4px;
+  opacity: 1; }
 nav.sequence-nav ul {
   margin-right: 1px;
   list-style: none !important;

templates/courseware.html

@@ -12,10 +12,6 @@
 <script type="text/javascript">
   $(function() {
     ${init}
-
-    $(".sequence-nav li a").hover(function(){
-      $(this).siblings().toggleClass("shown");
-      });
   });
 </script>
 </%block>

templates/sass/courseware/_sequence-nav.scss

@@ -63,13 +63,10 @@ nav.sequence-nav {
         display: block;
         height: 17px;
         padding: 15px 0 14px;
+        position: relative;
         @include transition(all, .4s, $ease-in-out-quad);
         width: 100%;
 
-        // @media screen and (max-width: 800px) {
-          //   padding: 12px 8px;
-          // }
-
         //video
         &.seq_video_inactive {
           @extend .inactive;
@@ -126,28 +123,22 @@ nav.sequence-nav {
           background-image: url('/static/images/sequence-nav/list-icon-current.png');
           background-position: center;
         }
-        }
 
        p {
-        // display: none;
-        // visibility: hidden;
           background: #333;
           color: #fff;
+          display: none;
           line-height: lh();
-        margin: 0px 0 0 -5px;
+          left: 0px;
           opacity: 0;
           padding: 6px;
           position: absolute;
+          top: 48px;
           text-shadow: 0 -1px 0 #000;
-        @include transition(all, .6s, $ease-in-out-quart);
-        white-space: pre-wrap;
+          @include transition(all, .1s, $ease-in-out-quart);
+          white-space: pre;
           z-index: 99;
 
-        &.shown {
-          margin-top: 4px;
-          opacity: 1;
-        }
-
           &:empty {
             background: none;
 
@@ -168,6 +159,15 @@ nav.sequence-nav {
             width: 10px;
           }
         }
+
+        &:hover {
+          p {
+            display: block;
+            margin-top: 4px;
+            opacity: 1;
+          }
+        }
+      }
     }
   }
 

templates/seq_module.js

@@ -77,7 +77,7 @@ function ${ id }goto(i) {
 function ${ id }setup_click(i) {
         $('#tt_'+i).click(function(eo) { ${ id }goto(i);});
 	$('#tt_'+i).addClass("seq_"+${ id }types[i]+"_inactive");
-	$('#tt_'+i).parent().append("<p>" + ${ id }titles[i-1] + "</p>");
+	$('#tt_'+i).append("<p>" + ${ id }titles[i-1] + "</p>");
 
 }