Merge branch 'master' of github.com:MITx/mitx

rakefile

@@ -65,6 +65,7 @@ task :package do
             "--depends=python-markdown",
             "--depends=python-pygments",
             "--depends=mysql-client",
+            "--provides=#{PACKAGE_NAME}",
             "--name=#{DEPLOY_NAME}",
             "--version=#{VERSION}",
             "-a", "all",

templates/info.html

@@ -1,4 +1,22 @@
 <%inherit file="main.html" />
+
+<%block name="js_extra">
+<script>
+
+$(document).ready(function(){
+   //if(!page) {
+   //  cookie_page = $.cookie("book_page");
+   //  if(cookie_page) {
+   //    goto_page(cookie_page);
+   //  }
+   //}
+
+   $(".handouts ol").treeview({collapsed:true, unique:true/*, cookieId: "treeview-book-nav", persist: "cookie"*/});
+});
+
+</script>
+</%block>
+
 <%block name="title"><title>Course Info - MITx 6.002x</title></%block>
 
 <%include file="navigation.html" args="active_page='info'" />

templates/sass/_info.scss

@@ -59,39 +59,115 @@ div.info-wrapper {
     border-right: 0;
     border-left: 1px solid #d3d3d3;
 
-    h1 {
-      padding: lh(.5) lh();
-      font-size: 18px;
-      margin: 0 ;
+    header {
       @extend .bottom-border;
+      padding: lh(.5) lh(.75);
+
+      h1 {
+        font-size: 18px;
+        margin: 0 ;
+      }
+
+      p {
+         margin-bottom: 0;
+         margin-top: 4px;
+         font-size: 12px;
+         color: #666;
+      }
     }
 
     ol {
       list-style: none;
+      background: none;
 
       li {
         @include box-shadow(0 1px 0 #eee);
         border-bottom: 1px solid #d3d3d3;
+        @include box-sizing(border-box);
         @extend .clearfix;
+        padding: 7px lh(.75);
+        background: none;
+        position: relative;
+
+        &.expandable,
+        &.collapsable {
+          h4 {
+            padding-left: 18px;
+            font-style: $body-font-size;
+            font-weight: normal;
+          }
+        }
+
+        ul {
+          background: none;
+          margin: 7px (-(lh(.75))) 0;
+
+          li {
+            padding-left: 18px + lh(.75);
+            @include box-shadow(inset 0 1px 0 #eee);
+            border-top: 1px solid #d3d3d3;
+            border-bottom: 0;
+          }
+        }
+
+        &:hover {
+          background-color: #e9e9e9;
+        }
+
+        div.hitarea {
+          background-image: url('/static/images/treeview-default.gif');
+          width: 100%;
+          height: 100%;
+          max-height: 20px;
+          display: block;
+          position: absolute;
+          left: lh(.75);
+          margin-left: 0;
+
+          &:hover {
+            opacity: 0.6;
+            filter: alpha(opacity=60);
+          }
+
+          &.expandable-hitarea {
+            background-position: -80px 1px;
+          }
+
+          &.collapsable-hitarea {
+            background-position: -64px -21px;
+          }
+        }
+
+        h3 {
+          border-bottom: 0;
+          text-transform: uppercase;
+          font-weight: bold;
+          color: #999;
+          @include box-shadow(none);
+          font-size: 12px;
+        }
 
         p {
-          padding: 7px lh();
           margin: 0;
           text-transform: none;
           letter-spacing: 0;
           font-size: $body-font-size;
 
-          &:hover {
-            background: #efefef;
-          }
-
           a {
-            display: inline;
-            padding: 0;
+            padding-right: 8px;
 
-            &:hover {
-              text-decoration: underline;
-              background: none;
+            &:before {
+              content: "•";
+              @include inline-block();
+              padding-right: 8px;
+              color: #ccc;
+            }
+
+            &:first-child {
+              &:before {
+                content: "";
+                padding-right: 0;
+              }
             }
           }
         }
@@ -99,12 +175,11 @@ div.info-wrapper {
         a {
           @include transition();
           color: lighten($text-color, 10%);
-          display: block;
-          padding: 7px lh();
           text-decoration: none;
+          @include inline-block();
 
           &:hover {
-            background: #efefef;
+            color: $mit-red;
           }
         }
       }