Merged with head

info.html

@@ -3,11 +3,11 @@
 <%include file="navigation.html" />
 
 <section class="main-content">
-  <div class="profile-wrapper">
-    <section class="user-info">
+  <div class="info-wrapper">
+    <section class="updates">
       <%include file="info_files/updates.html" />
     </section>
-    <section class="course-info">
+    <section class="handouts">
       <%include file="info_files/handouts.html" />
     </section>
   </div>

profile.html

 <%inherit file="main.html" />
 
+
+<%include file="navigation.html" />
+
+<section class="main-content">
+  <div class="profile-wrapper">
+
+    <section class="course-info">
+      <h1>Course Progress</h1>
+
+      <ol>
+        % for hw in homeworks:
+        <li>
+          <h2>${ hw['chapter'] }</h2>
+
+          <div class="scores">
+            <h3>${ hw['section'] }</h3>
+
+            <ul>
+              % for score in hw['scores']:
+              <li>${ score[0] }/${ score[1] }</li>
+              % endfor
+            </ul>
+          </div>
+        </li>
+        % endfor
+      </ol>
+    </section>
+
+    <section class="user-info">
+
+      <h1>${name}</h1>
+
+      <ul>
+        <li>Forum name: <strong>${username}</strong></li>
+        <li>E-mail: <strong>${email}</strong></li>
+        <li>
+          Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Change</a>
+        </li>
+        <li>
+          Language: <div id="language_sub">${language}</div> <a href="#" id="change_language">Change</a>
+        </li>
+      </ul>
+
+      <!-- <div><a class="modal" href="#change_password_pop">Reset password</a></div> -->
+
+      <div id="change_password_pop">
+        <h2>Password change</h2>
+        <p>We'll e-mail you a password reset link at ${email}. Follow
+        the link in the confirmation email to change your
+        password.</p>
+
+        <input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
+        <input type="submit" id="pwd_reset_button" value="Reset Password" />
+      </div>
+
+    </section>
+  </div>
+</section>
+
 <script>
 var loc=true; // Activate on clicks? Not if already clicked.
 var lang=true;
 $(function() {
       $("#change_location").click(function() {
+         $(this).hide();
+
          log_event("profile", {"type":"location_show", "old":$("#location_sub").text()});
 
          if(loc) {
@@ -18,6 +79,8 @@ $(function() {
            $("#location_sub").html('<input id="id_loc_text" type="text" name="loc_text" />'+
                                    '<input type="button" id="change_loc_button" value="Change" />');
            $("#change_loc_button").click(function() {
+             $("#change_location").show();
+
               postJSON('/change_setting', {'location':$("#id_loc_text").attr("value")}, function(json) {
                 $("#location_sub").text(json.location);
                 loc=true;
@@ -29,6 +92,7 @@ $(function() {
       });
 
       $("#change_language").click(function() {
+         $(this).hide();
          log_event("profile", {"type":"language_show", "old":$("#language_sub").text()});
 
          if(lang) {
@@ -36,6 +100,7 @@ $(function() {
            $("#language_sub").html('<input id="id_lang_text" type="text" name="lang_text" />'+
                                    '<input type="button" id="change_lang_button" value="Change" />');
            $("#change_lang_button").click(function() {
+             $("#change_language").show();
               postJSON('/change_setting', {'language':$("#id_lang_text").attr("value")}, function(json) {
                 $("#language_sub").text(json.language);
                 lang=true;
@@ -61,59 +126,3 @@ $(function() {
 });
 
 </script>
-
-<%include file="navigation.html" />
-
-<section class="main-content">
-  <div class="profile-wrapper">
-    <section class="user-info">
-
-      <h1>${name}</h1>
-
-      <ul>
-        <li>Forum name: ${username}</li>
-        <li>E-mail: ${email}</li>
-        <li>
-          Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Change</a>
-        </li>
-        <li>
-          Language: <div id="language_sub">${language}</div> <a href="#" id="change_language">Change</a>
-        </li>
-      </ul>
-
-      <!-- <div><a class="modal" href="#change_password_pop">Reset password</a></div> -->
-
-      <div id="change_password_pop">
-        <h2>Password change</h2>
-        <p>We'll e-mail you a password reset link at ${email}. Follow
-        the link in the confirmation email to change your
-        password.</p>
-
-        <input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
-        <input type="submit" id="pwd_reset_button" value="Reset Password" />
-      </div>
-
-    </section>
-
-    <section class="course-info">
-      <h1>Course Progress</h1>
-
-      <!-- <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>
-  </div>
-</section>

sass/_base.scss

@@ -41,12 +41,24 @@ em {
   }
 }
 
-a:link, a:visited {
-  text-decoration:none;
-}
+a {
+  color: $mit-red;
+
+  &:link {
+    color: $mit-red;
+  }
+
+  &:visited {
+    color: darken($mit-red, 10%);
+  }
+
+  &:link, &:visited {
+    text-decoration:none;
+  }
 
-a:hover {
-  text-decoration:underline;
+  &:hover, &:focus {
+    text-decoration:underline;
+  }
 }
 
 input[type="submit"], input[type="button"], button {

sass/_info.scss

+div.info-wrapper {
+  @extend .table-wrapper;
+
+  section.updates {
+    @extend .content;
+  }
+
+  section.handouts {
+    @extend .sidebar;
+    @include border-radius(0px 4px 0px 4px);
+    border-right: 0;
+    border-left: 1px solid #d3d3d3;
+
+    h1 {
+      padding: 0 lh();
+    }
+
+    ol {
+      list-style: none;
+
+      li {
+        a {
+          @include transition();
+          color: lighten($text-color, 10%);
+          display: block;
+          text-decoration: none;
+          @include box-shadow(0 1px 0 #eee);
+          padding: 7px lh();
+          border-bottom: 1px solid #d3d3d3;
+
+          &:hover {
+            @include box-shadow(0 1px 0 #fff);
+            background: #efefef;
+          }
+        }
+      }
+    }
+  }
+}

sass/_layout.scss

@@ -122,6 +122,14 @@ html {
 
       a {
         color: #444;
+
+        &:link, &:visited {
+          color: #444;
+        }
+
+        &:hover, &:focus {
+          color: #000;
+        }
       }
     }
 
@@ -134,6 +142,14 @@ html {
 
         a {
           color: #444;
+
+        &:link, &:visited {
+          color: #444;
+        }
+
+        &:hover, &:focus {
+          color: #000;
+        }
         }
       }
     }

sass/_profile.scss

 div.profile-wrapper {
   @extend .table-wrapper;
+  color: #000;
 
   section.user-info {
-    @include box-sizing(border-box);
-    margin-right: flex-gutter();
-    padding: $body-line-height;
-    width: flex-grid(6);
-    background: #e3e3e3;
-    border-right: 1px solid #d3d3d3;
-    text-shadow: 0 1px 0 #f6f6f6;
-    display: table-cell;
-  }
+    @extend .sidebar;
+    @include border-radius(0px 4px 0px 4px);
+    border-left: 1px solid #d3d3d3;
+    border-right: 0;
 
-  section.course-info {
-    @include box-sizing(border-box);
-    display: table-cell;
-    padding: $body-line-height;
-    width: flex-grid(6);
+    h1 {
+      padding: lh();
+    }
 
     ul {
+      list-style: none;
+
       li {
-        display: inline-block;
-        padding-right: 1em;
+        @include transition();
+        color: lighten($text-color, 10%);
+        display: block;
+        text-decoration: none;
+        @include box-shadow(0 1px 0 #eee);
+        padding: 7px lh();
+        border-bottom: 1px solid #d3d3d3;
+
+        div#location_sub, div#language_sub {
+          font-weight: bold;
+          @include inline-block();
+
+          input {
+            margin: lh(.5) 0;
+          }
+
+          &:empty {
+            padding: 0;
+          }
+        }
+
+        div#description {
+          font-size: 12px;
+        }
       }
     }
+
+    div#change_password_pop {
+      padding: 7px lh();
+      color: #4D4D4D;
+    }
+  }
+
+  section.course-info {
+    @extend .content;
+
+    ol {
+      list-style: none;
+
+      > li {
+        border-bottom: 1px solid #e3e3e3;
+        padding: lh() 0;
+        @extend .clearfix;
+
+        h2 {
+          float: left;
+          padding: 0;
+          margin: 0;
+          width: flex-grid(2, 9);
+          margin-right: flex-gutter(9);
+        }
+
+        div.scores {
+          float: left;
+          width: flex-grid(7, 9);
+
+          h3 {
+            color: #666;
+          }
+
+          ul {
+            list-style: none;
+
+            li {
+              display: inline-block;
+              padding-right: 1em;
+            }
+          }
+        }
+      }
+    }
+
   }
 }

sass/application.scss

@@ -10,6 +10,7 @@
 // pages
 @import "courseware", "courseware-video", "courseware-sequence-nav";
 @import "textbook";
+@import "info";
 @import "profile";
 @import "wiki-basic-html", "wiki-create", "wiki";
 @import "activation";