Added layout for courseware, textbooks and profile

--HG--
branch : kf-refactor

courseware.html

@@ -24,12 +24,12 @@ $('#hide_acc').click(function() {
 
 <%include file="navigation.html" />
 
-<div>
-  <div id="accordion" style="position:relative; top:-6px; ">
+<section>
+  <div id="accordion">
     ${accordion}
   </div>
 
-  <div>
+  <section class="main-content">
     ${content}
-  </div>
-</div>
+  </section>
+</section>

main.html

@@ -32,8 +32,13 @@
 
   <footer>
     <p> Copyright (c). 2011. MIT. <a href=http://creativecommons.org/licenses/by-sa/3.0/>Some rights reserved.</a>
-      <!-- Template based on a design from http://www.dotemplate.com/ -- Donated $10 (pmitros) so we don't need to include credit. -->
+      <!-- Template based on a design from http://www.dotemplate.com/ - Donated $10 (pmitros) so we don't need to include credit. -->
     </p>
+
+    <ul>
+      <li><a href="/s/help.html">Help</a></li>
+      <li><a href="/logout">Log out</a></li>
+    </ul>
   </footer>
 </body>
 </html>

navigation.html

@@ -3,13 +3,11 @@
 
   <nav>
     <ul class="coursenav">
-      <li><a href="/book">Textbook</a></li>
       <li><a href="/courseware">Courseware</a></li>
+      <li><a href="/book">Textbook</a></li>
       <li><a href="/discussion">Discussion</a></li>
       <li><a href="/wiki">Wiki</a></li>
       <li><a href="/profile">Profile</a></li>
-      <li><a href="/s/help.html">Help</a></li>
-      <li><a href="/logout">Log out</a></li>
     </ul>
   </nav>
 </header>

profile.html

@@ -67,45 +67,52 @@ $(function() {
 
 <%include file="navigation.html" />
 
-<section>
+<section class="profile-content">
+  <section class="user-info">
 
-  <h1>${name} </h1>
+    <h1>${name}</h1>
 
-  <ul>
-    <li>Forum name: ${username}</li>
-    <li>E-mail: ${email}</li>
-    <li>Location: ${location}</li>
-    <li>Language: ${language}</li>
-    <li>Password: ********</li>
-  </ul>
+    <ul>
+      <li>Forum name: ${username}</li>
+      <li>E-mail: ${email}</li>
+      <li>Location: ${location}</li>
+      <li>Language: ${language}</li>
+      <li>Password: ********</li>
+    </ul>
 
-  <div><a href="#change_password_pop">Reset password</a></div> <!-- hidden trigger for password -->
+    <!-- <div><a href="#change_password_pop">Reset password</a></div> -->
+    <!-- hidden trigger for password -->
 
-  <div id="description"></div>
+    <div id="change_password_pop">
+      <h2>Password reset</h2>
 
-  <section>
-    <h1>Course Progress</h1>
+      <p>We'll e-mail you a password reset link at ${email}.</p>
+      <input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
 
-    % for hw in homeworks:
-    <li>
-      <p>${ hw['chapter'] }</p>
-      <p>${ hw['section'] }</p>
+      <input type="button" id="pwd_reset_button" value="Reset Password" />
+    </div>
 
-      <ul>
-        % for score in hw['scores']:
-        <li>${ score[0] }/${ score[1] }</li>
-        % endfor
-      </ul>
-    </li>
-    % endfor
   </section>
 
-  <div id="change_password_pop">
-    <h1>Password reset</h1>
 
-    <p>We'll e-mail you a password reset link at ${email}.</p>
-    <input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
+  <section class="course-info">
+    <h1>Course Progress</h1>
 
-    <input type="button" id="pwd_reset_button" value="E-mail me" />
-  </div>
+    <!-- <div id="description"></div> -->
+
+    <ol>
+      % for hw in homeworks:
+      <li>
+        <h2>${ hw['chapter'] }</h2>
+        <h3>${ hw['section'] }</h3>
+
+        <ul>
+          % for score in hw['scores']:
+          <li>${ score[0] }/${ score[1] }</li>
+          % endfor
+        </ul>
+      </li>
+      % endfor
+    </ol>
+  </section>
 </section>

sass/_base-extends.scss

@@ -6,3 +6,13 @@
   visibility: hidden;
 }
 
+.sidebar {
+  width: grid-width(4);
+  float: left;
+  margin-right: $gw-gutter;
+}
+
+.content {
+  width: grid-width(8);
+  float: left;
+}

sass/_base-variables.scss

@@ -22,11 +22,17 @@ $body-font-size: 14px;
 
 // grid
 $columns: 12;
-$column-width: golden-ratio($body-font-size, 3);
+$column-width: golden-ratio($body-font-size, 4);
 $gutter-width: golden-ratio($body-font-size, 1);
 $max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width);
 
 $gw-column: perc($column-width);
 $gw-gutter: perc($gutter-width);
-$base-line-height: golden-ratio($body-font-size, 1);
+$body-line-height: golden-ratio($body-font-size, 1);
 
+// color
+$light-gray: #f3f3f3;
+$dark-gray: #333;
+
+$text-color: $dark-gray;
+$border-color: $light-gray;

sass/_courseware.scss

@@ -0,0 +1,7 @@
+div#accordion {
+  @extend .sidebar;
+}
+
+section.main-content {
+  @extend .content;
+}

sass/_layout.scss

@@ -3,32 +3,61 @@ html {
   margin: 0 $gw-gutter;
 
   body {
+    color: $dark-gray;
+    font: $body-font-size $body-font-family;
+    margin: $body-line-height auto;
+    max-width: $max-width;
     text-align: left;
     width: grid-width(12);
-    margin: 0 auto;
-    font: $body-font-size $body-font-family;
-    max-width: $max-width;
 
     header {
       @extend .clearfix;
+      border-bottom: 1px solid $border-color;
+      margin-bottom: $body-line-height;
 
       h1 {
-        float: left;
+        border-right: 1px solid $border-color;
+        font-size: $body-font-size;
         font-weight: bold;
+        margin: 0 $gw-gutter 0 0;
+        padding: $body-line-height $gw-gutter $body-line-height 0;
+        display: block;
+        float: left;
       }
 
       nav {
-        float: right;
+        float: left;
+        display: block;
+        margin: 0;
 
         ul {
           @extend .clearfix;
+          display: inline-block;
+          padding: $body-line-height 0;
+          margin: 0;
 
           li {
-            float: left;
-            margin-right: $gw-gutter;
+            margin-right: $body-line-height;
+            display: inline-block;
+            margin-bottom: 0;
           }
         }
       }
     }
+
+    section {
+      @extend .clearfix;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+
+    footer {
+      padding: $body-line-height 0;
+      border-top: 1px solid $border-color;
+      margin-top: $body-line-height;
+    }
   }
 }

sass/_profile.scss

@@ -0,0 +1,20 @@
+section.profile-content {
+
+  section.user-info {
+    width: grid-width(6);
+    float: left;
+    margin-right: $gw-gutter;
+  }
+
+  section.course-info {
+    width: grid-width(6);
+    float: left;
+
+    ul {
+      li {
+        display: inline-block;
+        padding-right: 1em;
+      }
+    }
+  }
+}

sass/_textbook.scss

@@ -0,0 +1,11 @@
+ul#booknav {
+  @extend .sidebar;
+}
+
+section.book {
+  @extend .content;
+
+  img {
+    border: 1px solid $border-color;
+  }
+}

sass/application.scss

@@ -1,10 +1,15 @@
 @import "bourbon/bourbon";
 @import "reset";
 
-
+// Base layout
 @import "base-variables", "base-extends";
+@import "layout";
 
+// pages
+@import "courseware";
+@import "textbook";
+@import "profile";
+
+// left over
 @import "theme";
 @import "local";
-
-@import "layout";

staticbook.html

@@ -36,15 +36,25 @@ function next_page() {
 
 <%include file="navigation.html" />
 
-<ul id="booknav" class="treeview-booknav">
-  <%include file="book_toc.html" />
-</ul>
+<section class="book-container">
+  <ul id="booknav" class="treeview-booknav">
+    <%include file="book_toc.html" />
+  </ul>
 
-<table>
-  <tr>
-    <td><a href="javascript:prev_page()"><span class="ui-icon ui-icon-circle-triangle-w">&nbsp;</span></a></td>
-    <td> <img id="bookpage" src="/static/book/p${ "%03i"%(page) }.jpg"> </td>
-    <td><a href="javascript:next_page()"><span class="ui-icon ui-icon-circle-triangle-e">&nbsp;</span></a></td>
-  </tr>
-</table>
+  <section class="book">
+    <nav>
+      <ol>
+        <li>
+          <a href="javascript:prev_page()">Last page</a>
+        </li>
+        <li>
+          <a href="javascript:next_page()">Next page</a>
+        </li>
+      </ol>
+    </nav>
 
+    <section class="page">
+      <img id="bookpage" src="/static/book/p${ "%03i"%(page) }.jpg">
+    </section>
+  </section>
+</section>

video.html

@@ -1,34 +1,36 @@
-<table>
-  <tr><td rowspan=1 colspan=4>
-      <div id="ytapiplayer">
-	You need Flash player 8+ and JavaScript enabled to view this video.
-      </div>
-    </td>
-<td>
-<table>
-<tr><td id=stt_n5 align=center><div id=std_n7 onclick="title_seek(-7);">&nbsp;</div></td></tr>
-<tr><td id=stt_n4 align=center><div id=std_n6 onclick="title_seek(-6);">&nbsp;</div></td></tr>
-<tr><td id=stt_n4 align=center><div id=std_n5 onclick="title_seek(-5);">&nbsp;</div></td></tr>
-<tr><td id=stt_n4 align=center><div id=std_n4 onclick="title_seek(-4);">&nbsp;</div></td></tr>
-<tr><td id=stt_n3 align=center><div id=std_n3 onclick="title_seek(-3);">&nbsp;</div></td></tr>
-<tr><td id=stt_n2 align=center><div id=std_n2 onclick="title_seek(-2);">&nbsp;</div></td></tr>
-<tr><td id=stt_n1 align=center><div id=std_n1 onclick="title_seek(-1);">&nbsp;</div></td></tr>
-<tr><td id=stt_0 align=center bgcolor=#aed0ea><div id=std_0 onclick="title_seek(0);">&nbsp;</div></td></tr>
-<tr><td id=stt_p1 align=center><div id=std_p1 onclick="title_seek( 1);">&nbsp;</div></td></tr>
-<tr><td id=stt_p2 align=center><div id=std_p2 onclick="title_seek( 2);">&nbsp;</div></td></tr>
-<tr><td id=stt_p3 align=center><div id=std_p3 onclick="title_seek( 3);">&nbsp;</div></td></tr>
-<tr><td id=stt_p4 align=center><div id=std_p4 onclick="title_seek( 4);">&nbsp;</div></td></tr>
-<tr><td id=stt_p5 align=center><div id=std_p5 onclick="title_seek( 5);">&nbsp;</div></td></tr>
-<tr><td id=stt_p6 align=center><div id=std_p7 onclick="title_seek( 6);">&nbsp;</div></td></tr>
-<tr><td id=stt_p6 align=center><div id=std_p7 onclick="title_seek( 7);">&nbsp;</div></td></tr>
-<tr><td id=stt_p6 align=center><div id=std_p7 onclick="title_seek( 8);">&nbsp;</div></td></tr>
-<tr><td><img src="/static/pixel.jpg" width=400 height=0></td></tr>
-</table>
-</td>
-<tr><td width=15><span class="ui-icon ui-icon-play" onclick="play();"></span></td>
-               <td width=15><span class="ui-icon ui-icon-pause" onclick="pause();"></span></td>
-               <td colspan=4><div id=slider></div></td></tr>
-<tr><td colspan=4><div id="vidtime">0:00/0:00</div></td><td><div align=right id="video_speeds"> </div></td></tr>
-</table>
+<div id="ytapiplayer">
+  <p>You need Flash player 8+ and JavaScript enabled to view this video.</p>
+</div>
+
+<ol>
+  <li id=stt_n5><div id=std_n7 onclick="title_seek(-7);">&nbsp;</div></li>
+  <li id=stt_n4><div id=std_n6 onclick="title_seek(-6);">&nbsp;</div></li>
+  <li id=stt_n4><div id=std_n5 onclick="title_seek(-5);">&nbsp;</div></li>
+  <li id=stt_n4><div id=std_n4 onclick="title_seek(-4);">&nbsp;</div></li>
+  <li id=stt_n3><div id=std_n3 onclick="title_seek(-3);">&nbsp;</div></li>
+  <li id=stt_n2><div id=std_n2 onclick="title_seek(-2);">&nbsp;</div></li>
+  <li id=stt_n1><div id=std_n1 onclick="title_seek(-1);">&nbsp;</div></li>
+  <li id=stt_0 class="current"><div id=std_0 onclick="title_seek(0);">&nbsp;</div></li>
+  <li id=stt_p1><div id=std_p1 onclick="title_seek( 1);">&nbsp;</div></li>
+  <li id=stt_p2><div id=std_p2 onclick="title_seek( 2);">&nbsp;</div></li>
+  <li id=stt_p3><div id=std_p3 onclick="title_seek( 3);">&nbsp;</div></li>
+  <li id=stt_p4><div id=std_p4 onclick="title_seek( 4);">&nbsp;</div></li>
+  <li id=stt_p5><div id=std_p5 onclick="title_seek( 5);">&nbsp;</div></li>
+  <li id=stt_p6><div id=std_p7 onclick="title_seek( 6);">&nbsp;</div></li>
+  <li id=stt_p6><div id=std_p7 onclick="title_seek( 7);">&nbsp;</div></li>
+  <li id=stt_p6><div id=std_p7 onclick="title_seek( 8);">&nbsp;</div></li>
+</ol>
+
+<section class="video-controls">
+<ul>
+  <li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
+  <li><span class="ui-icon ui-icon-pause" onclick="pause();"></span></li>
+</ul>
+
+<div id=slider></div>
+<div id="vidtime">0:00/0:00</div>
+<div id="video_speeds"></div>
+
+</section>