Merged courseware branch

accordion.html

@@ -10,9 +10,9 @@
         >
 
           <a href='/courseware/${format_string(course_name)}/${format_string(chapter['name'])}/${format_string(section['name'])}'>
-            ${section['name']}
+            <p>${section['name']}</p>
 
-            <p>
+            <p class="subtitle">
               ${section['format']}
 
               % if 'time' in section and section['time']!="":

courseware.html

@@ -2,11 +2,12 @@
 
 <!-- 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() {
+  $(function() {
+      ${init}
+
+      // Show and hide sidebar
+      var acc_hidden=false;
+      $('#hide_acc').click(function() {
         if(acc_hidden) {
           $('#accordion').show();
           $('#acc_td').attr("width","320");
@@ -18,8 +19,8 @@ $('#hide_acc').click(function() {
           $('#hide_acc').html("&gt;<br>&gt;<br>&gt;");
           acc_hidden=true;
         }
-});
-});
+      });
+    });
 </script>
 
 <%include file="navigation.html" />

homework.html

-<h1> ${ homework['name']} </h1>
+<h1> ${ homework['name']} Test </h1>
 
 <ol>
 % for problem in homework['problems']:
   <li>
-    <h2> ${ problem['name'] } </h2>
+    <h2>${ problem['name'] }</h2>
     ${ problem['html'] }
-    <br>
+
+    <section>
       <input type="hidden" name="problem_id" value="${ problem['name'] }">
       <input type="submit" value="Check">
+    </section>
   </li>
 % endfor
 </ol>

problem.html

-<h2> ${ problem['name'] } </h2>
-  ${ problem['html'] }
+<h2>${ problem['name'] }</h2>
 
+  <p> ${ problem['html'] } </p>
+
+  <section class="action">
     <input type="hidden" name="problem_id" value="${ problem['name'] }">
-% if check_button:
+
+    % if check_button:
       <input id="check_${ id }" type="button" value="Check ${ attempts }" >
-% endif
-% if reset_button:
+    % endif
+    % if reset_button:
       <input id="reset_${ id }" type="button" value="Reset ${ attempts }" >
-% endif
-% if save_button:
+    % endif
+    % if save_button:
       <input id="save_${ id }" type="button" value="Save" >
-% endif
-% if answer_available:
+    % endif
+    % if answer_available:
       <input id="show_${ id }" type="button" value="Show Answer" >
-% endif
-% if explain : 
-<a href="/courseware/6.002_Spring_2012/${ explain }">[ Explanation ] </a>
-% endif
+    % endif
+    % if explain :
+      <a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">Explanation</a>
+    % endif
+  </section>

problem.js

@@ -39,10 +39,11 @@ function ${ id }_load() {
       $("#answer_${ id }_"+key).text(data[key]);
     }
   });
+
   log_event('problem_show', {'problem':'${ id }'});
-	    });
+});
 
-	$('#save_${ id }').click(function() {
+$('#save_${ id }').click(function() {
   var submit_data={};
   $.each($("[id^=input_${ id }_]"), function(index,value){
     submit_data[value.id]=value.value;});
@@ -54,8 +55,9 @@ function ${ id }_load() {
     );
     log_event('problem_save', submit_data);
   });
-			   }
-			   );}
+}
+);}
+
 $(function() {
   ${ id }_load();
-    });
+});

sass/_base-extends.scss

@@ -14,19 +14,19 @@
 }
 
 .button {
-  @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%), 0 0 3px #ccc);
-  @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
+  @include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
+  @include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
   @include border-radius(3px);
-  border: 1px solid darken($mit-red, 10%);
-  padding: 10px 15px;
+  border: 1px solid darken(#888, 10%);
+  padding: 4px 8px;
   color: #fff;
   font: bold $body-font-size $body-font-family;
-  text-shadow: 0 1px 0 darken($mit-red, 10%);
   cursor: pointer;
+  -webkit-font-smoothing: antialiased;
 
   &:hover, &:focus {
-    @include box-shadow(inset 0 1px 0 lighten($mit-red, 20%), 0 0 3px #ccc);
-    @include linear-gradient(lighten($mit-red, 10%), darken($mit-red, 5%));
-    border: 1px solid darken($mit-red, 20%);
+    @include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
+    @include linear-gradient(lighten(#888, 10%), darken(#888, 5%));
+    border: 1px solid darken(#888, 20%);
   }
 }

sass/_base.scss

 h1 {
-  
+  font-size:1.6em;
+  margin:20px 0 10px 0;
 }
 
 h2 {
-  
+  font-size: $body-font-size;
+  font-weight: bold;
+  letter-spacing: 1px;
+  margin:20px 0 10px 0;
+  text-transform: uppercase;
 }
 
 h3 {
@@ -15,12 +20,11 @@ p {
 }
 
 #{$all-text-inputs}, textarea {
-  @include border-radius(3px);
   @include box-shadow(0 -1px 0 #fff);
   @include linear-gradient(#eee, #fff);
-  border: 1px solid #bbb;
+  border: 1px solid #999;
   font: $body-font-size $body-font-family;
-  padding: 8px;
+  padding: 4px;
 
   &:focus {
     border-color: $mit-red;
@@ -28,6 +32,6 @@ p {
 }
 
 input[type="submit"], input[type="button"], button {
-  // @extend .button;
+  @extend .button;
 }
 

sass/_courseware.scss

@@ -8,11 +8,16 @@ div.course-wrapper {
     border-right: 1px solid #d3d3d3;
     display: table-cell;
     font-family: $body-font-family;
-    text-shadow: 0 1px 0 #f6f6f6;
+    overflow: hidden;
+    text-shadow: 0 1px 0 #f1f1f1;
     vertical-align: top;
     width: grid-width(3);
 
     h3 {
+      &:last-child {
+        @include box-shadow(none);
+      }
+
       &.ui-accordion-header {
         color: #000;
 
@@ -22,11 +27,15 @@ div.course-wrapper {
         }
 
         &.ui-state-default {
+          @include box-shadow(0 1px 0 #eee);
           background: none;
-          font-weight: normal;
           border: none;
           border-bottom: 1px solid #d3d3d3;
-          @include box-shadow(0 1px 0 #eee);
+          font-weight: normal;
+
+          span.ui-icon {
+            background-image: url(images/ui-icons_454545_256x240.png);
+          }
         }
 
         &.ui-state-hover {
@@ -38,7 +47,7 @@ div.course-wrapper {
           @include box-shadow(none);
           background: none;
           border: 0;
-          border-bottom: 1px solid #aaa;
+          border-bottom: 1px solid #bbb;
           color: #000;
           font-weight: bold;
 
@@ -53,16 +62,34 @@ div.course-wrapper {
       @include border-radius(0);
       @include box-shadow( inset -1px 0 0 #e6e6e6);
       background: #d6d6d6;
-      border-bottom: 1px solid #c3c3c3;
-      border-top: 1px solid #c3c3c3;
       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: $body-line-height;
+          display: block;
+
+          &:hover {
+            color: #666;
+          }
+
+          p {
+            margin-bottom: 0;
+
+            &.subtitle {
+              color: #666;
+            }
+          }
+        }
       }
     }
   }
@@ -77,6 +104,19 @@ div.course-wrapper {
     ol.vert-mod {
       li {
         @extend .clearfix;
+        border-top: 1px solid #eee;
+        border-bottom: 1px solid #eee;
+        padding: 15px 0;
+
+        h2 {
+          margin-top: 0;
+          margin-bottom: 15px;
+        }
+
+        input[type="text"] {
+          display: inline-block;
+          margin: 8px 4px 4px 10px;
+        }
       }
     }
 

sass/_theme.scss

@@ -23,19 +23,11 @@ Bright orange: #fa720a;
 */
 
 
-body {
-  font-family: Helvetica, Arial, sans-serif;
-}
-
 h1 {
-  font-size:1.6em;
-  margin:25px 0 10px 0;
   clear:both;
 }
 
 h2 {
-  font-size:1.1em;
-  margin:20px 0 10px 0;
   clear:both;
 }
 

sass/reademe.md

-This project is using Sass to generate it's CSS. Sass is a CSS preprocessor that allows for faster developmnet of CSS. For more information about sass: http://sass-lang.com
+This project is using Sass to generate it's CSS. Sass is a CSS preprocessor that allows for faster development of CSS. For more information about sass: http://sass-lang.com
 
 To use sass all you need to do is enter:
 $ gem install sass
 
-We are also using Bourbon with sass. They are a genaric set of mixins, and functions that allow for more rpid development of CSS3. Find out more about bourbon here: https://github.com/thoughtbot/bourbon
+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: 
 $ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb