Added consistant sidebar headers and made textbook sidebar close

--HG--
branch : kf-sidebar

courseware.html

@@ -1,37 +1,23 @@
 <%inherit file="main.html" />
 
+<%block name="headextra">
 <!-- TODO: http://docs.jquery.com/Plugins/Validation -->
 <script type="text/javascript">
   $(function() {
       ${init}
-
-      // Show and hide sidebar
-      var acc_hidden=false;
-      $('#hide_acc').click(function() {
-        if(acc_hidden) {
-          $('#accordion').show();
-          $('#acc_td').attr("width","320");
-          $('#hide_acc').html("&lt;<br>&lt;<br>&lt;");
-          acc_hidden=false;
-        } else {
-          $('#accordion').hide();
-          $('#acc_td').attr("width","0");
-          $('#hide_acc').html("&gt;<br>&gt;<br>&gt;");
-          acc_hidden=true;
-        }
-      });
     });
 </script>
+</%block>
 
 <%include file="navigation.html" args="active_page='courseware'" />
 
 <section class="main-content">
   <div class="course-wrapper">
     <section class="course-index">
-      <div id="open_close_accordion">
+      <header id="open_close_accordion">
         <h2>Courseware Index</h2>
         <a href="#">close</a>
-      </div>
+      </header>
 
       <div id="accordion">
         ${accordion}

main.html

@@ -117,5 +117,7 @@ $(function() {
     });
 </script>
 
+<%block name="js_extra"/>
+
 </body>
 </html>

sass/_textbook.scss

@@ -1,43 +1,47 @@
 div.book-wrapper {
   @extend .table-wrapper;
 
-  ul#booknav {
+  section.book-sidebar {
     @extend .sidebar;
     @include box-sizing(border-box);
+    @extend .tran;
 
-    a {
-      color: #000;
+    ul#booknav {
 
-      &:hover {
-        color: #666;
-      }
-    }
-
-    li {
-      background: none;
-      padding-left: 30px;
-
-      div.hitarea {
-        margin-left: -22px;
-        background-image: url('/static/images/treeview-default.gif');
-        position: relative;
-        top: 4px;
+      a {
+        color: #000;
 
         &:hover {
-          opacity: 0.6;
-          filter: alpha(opacity=60);
+          color: #666;
         }
       }
 
-      ul {
+      li {
         background: none;
-      }
-    }
+        padding-left: 30px;
 
-    > li {
-      border-bottom: 1px solid #d3d3d3;
-      @include box-shadow(0 1px 0 #eee);
-      padding: 7px 7px 7px 30px;
+        div.hitarea {
+          margin-left: -22px;
+          background-image: url('/static/images/treeview-default.gif');
+          position: relative;
+          top: 4px;
+
+          &:hover {
+            opacity: 0.6;
+            filter: alpha(opacity=60);
+          }
+        }
+
+        ul {
+          background: none;
+        }
+      }
+
+      > li {
+        border-bottom: 1px solid #d3d3d3;
+        @include box-shadow(0 1px 0 #eee);
+        padding: 7px 7px 7px 30px;
+      }
     }
   }
 
@@ -92,4 +96,36 @@ div.book-wrapper {
       }
     }
   }
+
+  &.closed {
+    section.book-sidebar {
+      width: flex-grid(.6);
+
+      header#open_close_accordion {
+        padding: 0;
+
+        a {
+          background-image: url('/static/images/slide-right-icon.png');
+        }
+
+        h2 {
+          visibility: hidden;
+          width: 10px;
+          padding: 0;
+        }
+      }
+
+      ul#booknav {
+        visibility: hidden;
+        width: 10px;
+        padding: 0;
+        overflow: hidden;
+        height: 100px;
+      }
+    }
+
+    section.course-content {
+      width: flex-grid(11.5) + flex-gutter();
+    }
+  }
 }

sass/base/_extends.scss

@@ -68,6 +68,13 @@ h1.top-header {
   width: flex-grid(3);
   position: relative;
 
+  h1, h2 {
+   font-size: 18px;
+   text-transform: none;
+   font-weight: 800;
+   letter-spacing: 0;
+  }
+
   h3 {
     @include box-shadow(0 1px 0 #eee);
     background: none;
@@ -110,11 +117,41 @@ h1.top-header {
     }
   }
 
+  header#open_close_accordion {
+    @include box-shadow(0 1px 0 #eee);
+    border-bottom: 1px solid #d3d3d3;
+    padding: lh(.5) lh();
+    position: relative;
+
+    h2 {
+      padding-right: 20px;
+      margin: 0;
+    }
+
+    a {
+      width: 16px;
+      text-indent: -9999px;
+      height: 16px;
+      position: absolute;
+      padding: 8px;
+      top: 6px;
+      right: -1px;
+      border: 1px solid #D3D3D3;
+      background: #eee url('/static/images/slide-left-icon.png') center center no-repeat;
+      @include border-radius(3px 0 0 3px);
+
+      &:hover {
+        background-color: white;
+      }
+    }
+  }
+
   a.button {
     text-decoration: none;
   }
 }
 
+
 .topbar {
   background: #F6EFD4;
   border-bottom: 1px solid darken(#F6EFD4, 10%);
@@ -146,3 +183,7 @@ h1.top-header {
     }
   }
 }
+
+.tran {
+  @include transition( all, .2s, $ease-in-out-quad);
+}

sass/courseware/_courseware.scss

@@ -5,10 +5,6 @@ div.course-wrapper {
     list-style: none;
   }
 
-  .tran {
-    @include transition( all, .2s, $ease-in-out-quad);
-  }
-
   section.course-content {
     @extend .content;
 
@@ -160,7 +156,7 @@ div.course-wrapper {
     section.course-index {
       width: flex-grid(.6);
 
-      div#open_close_accordion {
+      header#open_close_accordion {
         padding: 0;
 
         a {

sass/courseware/_sidebar.scss

@@ -2,34 +2,6 @@ section.course-index {
   @extend .sidebar;
   @extend .tran;
 
-  div#open_close_accordion {
-    @include box-shadow(0 1px 0 #eee);
-    border-bottom: 1px solid #d3d3d3;
-    padding: 0 lh();
-    position: relative;
-
-    h2 {
-      padding-right: 20px;
-    }
-
-    a {
-      width: 16px;
-      text-indent: -9999px;
-      height: 16px;
-      position: absolute;
-      padding: 8px;
-      top: -12px;
-      right: -1px;
-      border: 1px solid #D3D3D3;
-      background: #eee url('/static/images/slide-left-icon.png') center center no-repeat;
-      @include border-radius(3px 0 0 3px);
-
-      &:hover {
-        background-color: white;
-      }
-    }
-  }
-
   div#accordion {
 
     h3 {

sass/discussion/_profile.scss

@@ -3,15 +3,19 @@ body.user-profile-page {
     // @extend .sidebar;
     header {
       @extend .clearfix;
+      border-bottom: 1px solid #d3d3d3;
+      @include box-shadow(0 1px 0 #eee);
+      padding: 0 lh();
+      margin: 0 (-(lh())) lh();
+
       section {
         float: left;
         width: flex-grid(2, 3);
         margin-right: flex-gutter(3);
 
-      h1 {
-        @extend h2;
-        margin-top: 0;
-      }
+        h1 {
+          margin-top: 0;
+        }
       }
 
       p.karma {

sass/layout/_layout.scss

@@ -11,13 +11,13 @@ html {
     section.main-content {
       @extend .clearfix;
       @extend .wrapper;
-      @include box-sizing(border-box);
-      overflow: hidden;
       background: #fff;
+      border: 1px solid #bbb;
       border-bottom: 1px solid #bbb;
+      @include box-shadow(0 0 4px #dfdfdf);
+      @include box-sizing(border-box);
       margin-top: 3px;
-        @include box-shadow(0 0 4px #dfdfdf);
-        border: 1px solid #bbb;
+      overflow: hidden;
 
       @media screen and (min-width: 1400px) {
         @include border-radius(4px);

staticbook.html

@@ -1,4 +1,6 @@
 <%inherit file="main.html" />
+
+<%block name="js_extra">
 <script>
 var page=${ page };
 
@@ -32,18 +34,35 @@ function next_page() {
   goto_page(newpage);
   log_event("book", {"type":"nextpage","new":page});
 }
+
+$("#open_close_accordion a").click(function(){
+  if ($(".book-wrapper").hasClass("closed")){
+    $(".book-wrapper").removeClass("closed");
+  } else {
+    $(".book-wrapper").addClass("closed");
+  }
+});
+
 </script>
+</%block>
 
 <%include file="navigation.html" args="active_page='book'" />
 
 <section class="main-content">
   <div class="book-wrapper">
-    <ul id="booknav" class="treeview-booknav">
-      <%include file="book_toc.html" />
-    </ul>
+
+    <section class="book-sidebar">
+      <header id="open_close_accordion">
+        <h2>Table of Contents</h2>
+        <a href="#">close</a>
+      </header>
+
+      <ul id="booknav" class="treeview-booknav">
+        <%include file="book_toc.html" />
+      </ul>
+    </section>
 
     <section class="book">
-
       <section class="page">
         <nav>
           <ul>