Fixed the layout of the graph gradebook

--HG--
branch : bridger-grades

gradebook.html

@@ -5,7 +5,6 @@
   <script type="text/javascript" src="/static/js/flot/jquery.flot.js"></script>
   <script type="text/javascript" src="/static/js/flot/jquery.flot.stack.js"></script>
   <script type="text/javascript" src="/static/js/flot/jquery.flot.symbol.js"></script>
-    
   % for s in students:
   <script>
     ${profile_graphs.body(s['grade_info']['grade_summary'], "grade-detail-graph-" + str(s['id']))}
@@ -15,12 +14,17 @@
 
 <%include file="navigation.html" args="active_page=''" />
 <section class="main-content">
-  <div class="gradebook-wrapper">
+<div class="gradebook-wrapper">
   <section class="gradebook-content">
+    <h1>Gradebook</h1>
+    <ol>
       % for s in students:
+      <li>
         <h2><a href=/profile/${s['id']}>${s['username']}</a></h2>
         <div id="grade-detail-graph-${s['id']}" style="width:1000px;height:300px;"></div>
+      </li>
       % endfor
+    </ol>
   </section>
-  </div>
+</div>
 </section>

sass/_gradebook.scss

@@ -7,5 +7,31 @@ div.gradebook-wrapper {
     h1 {
       @extend .top-header;
     }
+    > ol {
+      list-style: none;
+      margin-top: lh();
+
+      > li {
+        @extend .clearfix;
+        border-bottom: 1px solid #e3e3e3;
+        display: table;
+        padding: lh() 0;
+        width: 100%;
+
+        &:last-child {
+          border-bottom: 0px;
+        }
+
+        h2 {
+          border-right: 1px dashed #ddd;
+          @include box-sizing(border-box);
+          display: table-cell;
+          margin: 0;
+          padding: 0;
+          width: flex-grid(2, 9);
+          vertical-align: top;
+        }
+      }
+    }
   }
 }