Added minor ui changes

courseware.html

@@ -7,7 +7,7 @@
     ${init}
 
     $(".sequence-nav li a").hover(function(){
-      $(this).siblings().toggle();
+      $(this).siblings().toggleClass("shown");
       });
   });
 </script>

sass/base/_extends.scss

@@ -74,7 +74,7 @@ h1.top-header {
 
   h1, h2 {
    font-size: 18px;
-   font-weight: 800;
+   font-weight: bold;
    letter-spacing: 0;
    text-transform: none;
   }

sass/courseware/_sequence-nav.scss

@@ -54,6 +54,7 @@ nav.sequence-nav {
         padding: 15px 4px 14px;
         width: 28px;
         height: 17px;
+        @include transition(all, .4s, $ease-in-out-quad);
 
         // @media screen and (max-width: 800px) {
           //   padding: 12px 8px;
@@ -118,16 +119,24 @@ nav.sequence-nav {
         }
 
       p {
-        position: absolute;
-        display: none;
+        // display: none;
+        // visibility: hidden;
         background: #333;
-        padding: 6px;
-        white-space: pre-wrap;
-        z-index: 99;
-        margin: 4px 0 0 -5px;
-        text-shadow: 0 -1px 0 #000;
         color: #fff;
         line-height: lh();
+        margin: 0px 0 0 -5px;
+        opacity: 0;
+        padding: 6px;
+        position: absolute;
+        text-shadow: 0 -1px 0 #000;
+        @include transition(all, .6s, $ease-in-out-quart);
+        white-space: pre-wrap;
+        z-index: 99;
+
+        &.shown {
+          opacity: 1;
+          margin-top: 4px;
+        }
 
         &:empty {
           background: none;
@@ -146,7 +155,6 @@ nav.sequence-nav {
           top: -5px;
           left: 18px;
           @include transform(rotate(45deg));
-          @include transition();
           width: 10px;
         }
       }
@@ -215,15 +223,23 @@ nav.sequence-nav {
 
 
 section.course-content {
+  position: relative;
+
+  div#seq_content {
+    margin-bottom: 60px;
+  }
+
   nav.sequence-bottom {
-    margin-bottom: -(lh());
+    position: absolute;
+    bottom: 0;
+    right: 50%;
+    margin-right: -53px;
 
     ul {
       @extend .clearfix;
       border: 1px solid darken(#f6efd4, 20%);
       border-bottom: 0;
       @include border-radius(3px 3px 0 0);
-      margin: lh() auto 0;
       overflow: hidden;
       width: 106px;
       background-color: darken($cream, 5%);
@@ -242,6 +258,7 @@ section.course-content {
             text-indent: -9999px;
             width: 45px;
             display: block;
+            @include transition(all, .4s, $ease-in-out-quad);
 
             &:hover {
               text-decoration: none;

sass/courseware/_sidebar.scss

@@ -34,16 +34,37 @@ section.course-index {
     ul.ui-accordion-content {
       @include border-radius(0);
       @include box-shadow( inset -1px 0 0 #e6e6e6);
-      background: #d6d6d6;
+      background: #dadada;
       border: none;
       border-bottom: 1px solid #c3c3c3;
       font-size: 12px;
       margin: 0;
-      overflow: hidden;
+      // overflow: visible;
 
       li {
+        position: relative;
+
         &.active {
           font-weight: bold;
+
+          p.subtitle {
+            font-weight: normal;
+          }
+
+          // &:after {
+          //   content: " ";
+          //   width: 16px;
+          //   height: 16px;
+          //   position: absolute;
+          //   right: -35px;
+          //   top: 7px;
+          //   display: block;
+          //   background-color: #dadada;
+          //   border-top: 1px solid #c3c3c3;
+          //   border-right: 1px solid #c3c3c3;
+          //   z-index: 99;
+          //   @include transform(rotate(45deg));
+          // }
         }
 
         a {

sass/courseware/_video.scss

@@ -141,20 +141,13 @@ section.course-content {
             line-height: 46px; //height of play pause buttons
             margin-right: 0;
             -webkit-font-smoothing: antialiased;
+            opacity: .7;
+            @include transition();
 
             h3 {
               @include inline-block();
-
-              a {
-                color: #fff;
-                padding: 0 lh(.5);
-                @include inline-block();
-
-                &:hover {
-                  text-decoration: none;
-                  // background-color: #444;
-                }
-              }
+              padding: 0 lh(.5);
+              font-weight: normal;
             }
 
             // fix for now
@@ -164,13 +157,23 @@ section.course-content {
 
               li {
                 cursor: pointer;
+                color: #fff;
                 @include inline-block();
 
                 &.active {
                   font-weight: bold;
                 }
+
+                &:hover {
+                  color: #aaa;
+                }
               }
             }
+
+            &:hover {
+              opacity: 1;
+              background-color: #444;
+            }
           }
 
           a.hide-subtitles {
@@ -184,6 +187,7 @@ section.course-content {
             font-weight: 800;
             background: url('/static/images/cc.png') 16px center no-repeat;
             -webkit-font-smoothing: antialiased;
+            @include transition();
 
             &:hover {
               color: #fff;

video.html

@@ -28,11 +28,11 @@
 
         <div class="secondary-controls">
         <div class="speeds">
-          <h3><a href="#">Speed</a></h3>
+          <h3>Speed</h3>
           <ol id="video_speeds"></ol>
         </div>
 
-        <a href="#" class="hide-subtitles">on</a>
+        <a href="#" class="hide-subtitles">turn off</a>
         </div>
       </section>
     </section>
@@ -66,7 +66,7 @@
         $('div.video-subtitles').toggleClass('closed');
 
         var link_text = $('.hide-subtitles').text();
-        $(this).text((link_text == 'on') ? 'off' : 'on');
+        $(this).text((link_text == 'turn off') ? 'turn on' : 'turn off');
         return false;
        });
   });