Merged with head

2012-02-02 17:23:45 -05:00
parent 8b1b716818 bdde1599c4
commit 4cd963dc33
7 changed files with 221 additions and 80 deletions
--- a/info.html
+++ b/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>
--- a/profile.html
+++ b/profile.html
@@ -1,10 +1,71 @@
 <%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>
--- a/sass/_base.scss
+++ b/sass/_base.scss
@@ -41,12 +41,24 @@ em {
  }
 }

-a:link, a:visited {
-  text-decoration:none;
-}
+a {
+  color: $mit-red;

-a:hover {
-  text-decoration:underline;
+  &:link {
+    color: $mit-red;
+  }
+
+  &:visited {
+    color: darken($mit-red, 10%);
+  }
+
+  &:link, &:visited {
+    text-decoration:none;
+  }
+
+  &:hover, &:focus {
+    text-decoration:underline;
+  }
 }

 input[type="submit"], input[type="button"], button {
--- a/sass/_info.scss
+++ b/sass/_info.scss
@@ -0,0 +1,39 @@
+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;
+          }
+        }
+      }
+    }
+  }
+}
--- a/sass/_layout.scss
+++ b/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;
+        }
        }
      }
    }
--- a/sass/_profile.scss
+++ b/sass/_profile.scss
@@ -1,28 +1,92 @@
 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;
+
+    h1 {
+      padding: lh();
+    }
+
+    ul {
+      list-style: none;
+
+      li {
+        @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 {
-    @include box-sizing(border-box);
-    display: table-cell;
-    padding: $body-line-height;
-    width: flex-grid(6);
+    @extend .content;

-    ul {
-      li {
-        display: inline-block;
-        padding-right: 1em;
+    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;
+            }
+          }
+        }
      }
    }
+
  }
 }
--- a/sass/application.scss
+++ b/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";