Merged in close sidebar

accordion_init.js

 $("#accordion").accordion({
   active: ${ active_chapter },
-  autoHeight: false
+  header: 'h3',
+  autoHeight: false,
+});
+
+$("#open_close_accordion a").click(function(){
+  if ($(".course-wrapper").hasClass("closed")){
+    $(".course-wrapper").removeClass("closed");
+  } else {
+    $(".course-wrapper").addClass("closed");
+  }
 });
 
 $('.ui-accordion').bind('accordionchange', function(event, ui) {
    var event_data = {'newheader':ui.newHeader.text(),
-		     'oldheader':ui.oldHeader.text()};
+         'oldheader':ui.oldHeader.text()};
    log_event('accordion', event_data);
 });

courseware.html

@@ -27,9 +27,16 @@
 
 <section class="main-content">
   <div class="course-wrapper">
-    <div id="accordion">
-      ${accordion}
-    </div>
+    <section class="course-index">
+      <div id="open_close_accordion">
+        <h2>Courseware Index</h2>
+        <a href="#">close</a>
+      </div>
+
+      <div id="accordion">
+        ${accordion}
+      </div>
+    </section>
 
     <section class="course-content">
       ${content}

sass/reademe.md → sass/README

@@ -5,7 +5,12 @@ $ gem install sass
 
 We are also using Bourbon with sass. They are a generic set of mixins, and functions that allow for more rapid development of CSS3. Find out more about bourbon here: https://github.com/thoughtbot/bourbon
 
-Then to generate Sass files cd to templates directory and watch the sass files with: 
+Then to generate Sass files cd to templates directory and watch the sass files for developement: 
+
 $ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb
 
-This will automatically generate the CSS files on save.
+To generate a compressed css file for production:
+
+$ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb --style :compressed
+
+These will automatically generate the CSS files on save.

sass/courseware/_courseware.scss

@@ -5,6 +5,10 @@ div.course-wrapper {
     list-style: none;
   }
 
+  .tran {
+    @include transition( all, .2s, $ease-in-out-quad);
+  }
+
   section.course-content {
     @extend .content;
 
@@ -118,7 +122,7 @@ div.course-wrapper {
     }
 
     ol.vert-mod {
-     > li {
+      > li {
         @extend .clearfix;
         @extend .problem-set;
         border-bottom: 1px solid #ddd;
@@ -133,4 +137,34 @@ div.course-wrapper {
       }
     }
   }
+
+  &.closed {
+    section.course-index {
+      width: flex-grid(.6);
+
+      div#open_close_accordion {
+        padding: 0;
+
+        a {
+          background-image: url('/static/images/slide-right-icon.png');
+        }
+
+        h2 {
+          visibility: hidden;
+          width: 10px;
+          padding: 0;
+        }
+      }
+
+      div#accordion {
+        visibility: hidden;
+        width: 10px;
+        padding: 0;
+      }
+    }
+
+    section.course-content {
+      width: flex-grid(11.5) + flex-gutter();
+    }
+  }
 }

sass/courseware/_sidebar.scss

-div#accordion {
+section.course-index {
   @extend .sidebar;
+  position: relative;
+  @extend .tran;
 
   div#open_close_accordion {
-    position: absolute;
-    right: 0px;
-    width: 20px;
-    height: 20px;
-    background: #ccc;
-    border: 1px solid black;
-    right: -22px;
-    top: 5px;
-  }
-
-  h3 {
-    overflow: hidden;
-    margin: 0;
+    @include box-shadow(0 1px 0 #eee);
+    border-bottom: 1px solid #d3d3d3;
+    padding: 0 lh();
 
-    &:last-child {
-      @include box-shadow(none);
+    h2 {
+      padding-right: 20px;
     }
 
-    &.ui-accordion-header {
-      color: #000;
-
-      a {
-        font-size: $body-font-size;
-        color: lighten($text-color, 10%);
-      }
-
-      &.ui-state-hover {
-        border: none;
-        border-bottom: 1px solid #d3d3d3;
-      }
+    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 box-shadow(inset 0 0 0 1px #fff);
+      @include border-radius(3px 0 0 3px);
 
-      &.ui-state-active {
-        @extend .active;
+      &:hover {
+        background-color: white;
       }
     }
   }
 
-  ul.ui-accordion-content {
-    @include border-radius(0);
-    @include box-shadow( inset -1px 0 0 #e6e6e6);
-    background: #d6d6d6;
-    border: none;
-    border-bottom: 1px solid #c3c3c3;
-    font-size: 12px;
-    margin: 0;
-    overflow: hidden;
-
-    li {
-      &.active {
-        font-weight: bold;
+  div#accordion {
+
+    h3 {
+      overflow: hidden;
+      margin: 0;
+
+      &:last-child {
+        @include box-shadow(none);
       }
 
-      a {
-        text-decoration: none;
-        margin-bottom: lh(.5);
-        display: block;
+      &.ui-accordion-header {
         color: #000;
 
-        &:hover {
-          color: #666;
+        a {
+          font-size: $body-font-size;
+          color: lighten($text-color, 10%);
+        }
+
+        &.ui-state-hover {
+          border: none;
+          border-bottom: 1px solid #d3d3d3;
         }
 
-        p {
-          margin-bottom: 0;
+        &.ui-state-active {
+          @extend .active;
+        }
+      }
+    }
+
+    ul.ui-accordion-content {
+      @include border-radius(0);
+      @include box-shadow( inset -1px 0 0 #e6e6e6);
+      background: #d6d6d6;
+      border: none;
+      border-bottom: 1px solid #c3c3c3;
+      font-size: 12px;
+      margin: 0;
+      overflow: hidden;
+
+      li {
+        &.active {
+          font-weight: bold;
+        }
+
+        a {
+          text-decoration: none;
+          margin-bottom: lh(.5);
+          display: block;
+          color: #000;
 
-          &.subtitle {
+          &:hover {
             color: #666;
           }
+
+          p {
+            margin-bottom: 0;
+
+            &.subtitle {
+              color: #666;
+            }
+          }
         }
       }
     }