From 4dafe790df94d72a2ac666ccb3ad070b47cfb1d1 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 2 Feb 2012 14:20:27 -0500
Subject: [PATCH 1/3] Added start to style for profile and course info

---
 info.html             |  6 +++---
 sass/_base.scss       | 22 +++++++++++++++++-----
 sass/_info.scss       | 39 +++++++++++++++++++++++++++++++++++++++
 sass/_layout.scss     | 16 ++++++++++++++++
 sass/_profile.scss    | 33 +++++++++++++++++++++------------
 sass/application.scss |  1 +
 6 files changed, 97 insertions(+), 20 deletions(-)
 create mode 100644 sass/_info.scss

diff --git a/info.html b/info.html
index 5867feb021..2559807e08 100644
--- 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>
diff --git a/sass/_base.scss b/sass/_base.scss
index f0e86c7624..8ea0957ac3 100644
--- 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 {
diff --git a/sass/_info.scss b/sass/_info.scss
new file mode 100644
index 0000000000..4f7a0b8d1a
--- /dev/null
+++ 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;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/sass/_layout.scss b/sass/_layout.scss
index 8867ef5348..89c216e26d 100644
--- 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;
+        }
         }
       }
     }
diff --git a/sass/_profile.scss b/sass/_profile.scss
index 9cab2dbce6..5ba10ab283 100644
--- a/sass/_profile.scss
+++ b/sass/_profile.scss
@@ -2,23 +2,32 @@ div.profile-wrapper {
   @extend .table-wrapper;
 
   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;
+    padding: lh();
+
+    ul {
+      list-style: none;
+
+      li {
+        margin-bottom: lh(.5);
+      }
+    }
+
+    div #change_password_pop {
+      border-top: 1px;
+    }
   }
 
   section.course-info {
-    @include box-sizing(border-box);
-    display: table-cell;
-    padding: $body-line-height;
-    width: flex-grid(6);
+    @extend .content;
+
+    ol {
+      list-style: none;
+    }
 
     ul {
+      list-style: none;
+
       li {
         display: inline-block;
         padding-right: 1em;
diff --git a/sass/application.scss b/sass/application.scss
index ad0298d720..9f2776c912 100644
--- 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";

From 1b0f03d722b4728297bcc5fbc32438697ed39404 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 2 Feb 2012 16:32:46 -0500
Subject: [PATCH 2/3] Continued style on profile page

---
 profile.html       | 117 +++++++++++++++++++++++----------------------
 sass/_profile.scss |  57 ++++++++++++++++++----
 2 files changed, 108 insertions(+), 66 deletions(-)

diff --git a/profile.html b/profile.html
index 689bffaa38..1ed517b2a8 100644
--- a/profile.html
+++ b/profile.html
@@ -1,11 +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() {
          log_event("profile", {"type":"location_show", "old":$("#location_sub").text()});
+         $("#change-location").hide();
 
          if(loc) {
            $("#description").html('<div>'+
@@ -18,6 +78,7 @@ $(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;
@@ -61,59 +122,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>
diff --git a/sass/_profile.scss b/sass/_profile.scss
index 5ba10ab283..504185b055 100644
--- a/sass/_profile.scss
+++ b/sass/_profile.scss
@@ -1,20 +1,33 @@
 div.profile-wrapper {
   @extend .table-wrapper;
+  color: #000;
 
   section.user-info {
     @extend .sidebar;
-    padding: lh();
+    @include border-radius(0px 4px 0px 4px);
+    border-left: 1px solid #d3d3d3;
+    border-right: 0;
+
+    h1 {
+      padding: lh();
+    }
 
     ul {
       list-style: none;
 
       li {
-        margin-bottom: lh(.5);
+        @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 #change_password_pop {
-      border-top: 1px;
+    div#change_password_pop {
+      padding: 7px lh();
     }
   }
 
@@ -23,15 +36,39 @@ div.profile-wrapper {
 
     ol {
       list-style: none;
-    }
 
-    ul {
-      list-style: none;
+      > li {
+        border-bottom: 1px solid #e3e3e3;
+        padding: lh() 0;
+        @extend .clearfix;
 
-      li {
-        display: inline-block;
-        padding-right: 1em;
+        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;
+            }
+          }
+        }
       }
     }
+
   }
 }

From bdde1599c4359c72b4912ee8bbc64e5e5de34b86 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 2 Feb 2012 17:09:19 -0500
Subject: [PATCH 3/3] More edits to the profile page

---
 profile.html       |  8 ++++++--
 sass/_profile.scss | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/profile.html b/profile.html
index 1ed517b2a8..ed3ac70f85 100644
--- a/profile.html
+++ b/profile.html
@@ -64,8 +64,9 @@ 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()});
-         $("#change-location").hide();
 
          if(loc) {
            $("#description").html('<div>'+
@@ -78,7 +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();
+             $("#change_location").show();
+
               postJSON('/change_setting', {'location':$("#id_loc_text").attr("value")}, function(json) {
                 $("#location_sub").text(json.location);
                 loc=true;
@@ -90,6 +92,7 @@ $(function() {
       });
 
       $("#change_language").click(function() {
+         $(this).hide();
          log_event("profile", {"type":"language_show", "old":$("#language_sub").text()});
 
          if(lang) {
@@ -97,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;
diff --git a/sass/_profile.scss b/sass/_profile.scss
index 504185b055..b383c61a85 100644
--- a/sass/_profile.scss
+++ b/sass/_profile.scss
@@ -23,11 +23,29 @@ div.profile-wrapper {
         @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;
     }
   }