From 07ac0d0642f2d87e7ff83b972e2197d9c490247d Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Wed, 10 Oct 2012 13:53:18 -0400
Subject: [PATCH] styled/tweaked users page

---
 cms/static/sass/_users.scss     |  83 +++++++++++++++++++++
 cms/static/sass/base-style.scss |   1 +
 cms/templates/manage_users.html | 128 +++++++++++++++++++-------------
 3 files changed, 162 insertions(+), 50 deletions(-)
 create mode 100644 cms/static/sass/_users.scss

diff --git a/cms/static/sass/_users.scss b/cms/static/sass/_users.scss
new file mode 100644
index 0000000000..98c9be9fda
--- /dev/null
+++ b/cms/static/sass/_users.scss
@@ -0,0 +1,83 @@
+.users {
+  .user-overview {
+    @extend .window;
+    padding: 30px 40px;
+
+    .details {
+      margin-bottom: 20px;
+      font-size: 14px;
+    }
+  }
+
+  .new-user-button {
+    @include grey-button;
+    margin: 5px 8px;
+    padding: 3px 10px 4px 10px;
+    font-size: 12px;
+
+    .plus-icon {
+      position: relative;
+      top: 1px;
+    }
+  }
+
+  .list-header {
+    @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
+    background-color: #ced2db;
+    border-radius: 3px 3px 0 0;
+  }
+
+  .new-user-form {
+    display: none;
+    padding: 15px 20px;
+    background: $mediumGrey;
+
+    label {
+      display: inline-block;
+      margin-right: 10px;
+    }
+
+    .email-input {
+      width: 350px;
+      padding: 8px 8px 10px;
+      border-color: $darkGrey;
+    }
+
+    .add-button {
+      @include blue-button;
+    }
+
+    .cancel-button {
+      @include white-button;
+    }
+  }
+
+  .user-list {
+    border: 1px solid $mediumGrey;
+    border-top: none;
+    background: $lightGrey;
+
+    li {
+      position: relative;
+      padding: 10px 20px;
+      border-bottom: 1px solid $mediumGrey;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      span {
+        display: inline-block;
+      }
+
+      .user-name {
+        width: 30%;
+        font-weight: 700;
+      }
+
+      .item-actions {
+        top: 9px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss
index 628332d9ee..4acdc320c7 100644
--- a/cms/static/sass/base-style.scss
+++ b/cms/static/sass/base-style.scss
@@ -15,6 +15,7 @@
 @import "unit";
 @import "assets";
 @import "static-pages";
+@import "users";
 @import "course-info";
 @import "landing";
 @import "graphics";
diff --git a/cms/templates/manage_users.html b/cms/templates/manage_users.html
index b647d629b8..e479bc0942 100644
--- a/cms/templates/manage_users.html
+++ b/cms/templates/manage_users.html
@@ -1,65 +1,93 @@
 <%inherit file="base.html" />
 <%block name="title">Course Staff Manager</%block>
+<%block name="bodyclass">users</%block>
 <%include file="widgets/header.html"/>
 
 <%block name="content">
-<section class="main-container">
+<div class="main-wrapper">
+  <div class="inner-wrapper">
+    <h1>Users</h1>
 
-  <h2>Course Staff</h2>
-  <div>
-    <p>
-      The following list of users have been designated as course staff. This means that these users will 
-      have permissions to modify course content. You may add additional source staff below. Please note that they
-      must have already registered and verified their account.
-    </p>
+    <article class="user-overview">
+      <div class="details">
+        <p>The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional source staff below. Please note that they must have already registered and verified their account.</p>
+      </div>
+      <div class="list-header">
+        <a href="#" class="new-user-button wip-box">
+          <span class="plus-icon"></span>New User
+        </a>
+      </div>
+      <div class="new-user-form">
+        <label>email: </label><input type="text" id="email" class="email-input" autocomplete="off" placeholder="email@example.com">
+        <a href="#" id="add_user" class="add-button">save</a>
+        <a href="#" class="cancel-button">cancel</a>
+      </div>
+      <div>
+        <ol class="user-list">
+          % for user in staff:
+          <li>
+            <span class="user-name">${user.username}</span>
+            <span class="user-email">${user.email}</span>
+            <div class="item-actions">
+              <a href="#" class="delete-button"><span class="delete-icon"></span></a>
+            </div>
+          </li>
+          % endfor
+        </ol>
+      </div>
+      
+      <div id="result"></div>
+    </article>
   </div>
-  <div>
-    <ol>
-      % for user in staff:
-      <li>${user.email} (${user.username}) <a href='#' class='remove-user' data-id='${user.email}'>remove</a></li>
-      % endfor
-    </ol>
-  </div>
-
-  
-  <label>email:&nbsp;</label><input type="text" id="email" autocomplete="Off" placeholder="email@example.com..." size="40"/>
-  <a href="#" id="add_user" class="button" />add as course staff</a>
-  
-  <div id="result"></div>
-
-</section>
+</div>
 </%block>
 
 <%block name="jsextra">
-
 <script type="text/javascript">
-  $(document).ready(function() {
-      $("#add_user").click(function() {
-        $.ajax({
-          url: "${add_user_postback_url}",
-          type: "POST",
-          dataType: "json",
-          contentType: "application/json",
-          data:JSON.stringify({ 'email': $('#email').val()}),
-        }).done(function(data) {
-          if (data.ErrMsg != undefined)
-            $("#result").empty().append(data.ErrMsg);
-          else
-            location.reload();
-        })
-      })
+  var $newUserForm;
 
-      $(".remove-user").click(function() {
-        $.ajax({
-          url: "${remove_user_postback_url}",
-          type: "POST",
-          dataType: "json",
-          contentType: "application/json",
-          data:JSON.stringify({ 'email': $(this).data('id')}),          
-          }).done(function() {
-            location.reload();
-          })
-      });
+  function showNewUserForm(e) {
+    e.preventDefault();
+    $newUserForm.slideDown(150);
+  }
+
+  function hideNewUserForm(e) {
+    e.preventDefault();
+    $newUserForm.slideUp(150);
+  }
+
+  $(document).ready(function() {
+    $newUserForm = $('.new-user-form');
+    $newUserForm.find('.cancel-button').bind('click', hideNewUserForm);
+
+    $('.new-user-button').bind('click', showNewUserForm);
+
+    $('#add_user').click(function() {
+      $.ajax({
+        url: '${add_user_postback_url}',
+        type: 'POST',
+        dataType: 'json',
+        contentType: 'application/json',
+        data:JSON.stringify({ 'email': $('#email').val()}),
+      }).done(function(data) {
+        if (data.ErrMsg != undefined)
+          $('#result').empty().append(data.ErrMsg);
+        else
+          location.reload();
+      })
+    });
+
+    $('.remove-user').click(function() {
+      $.ajax({
+        url: '${remove_user_postback_url}',
+        type: 'POST',
+        dataType: 'json',
+        contentType: 'application/json',
+        data:JSON.stringify({ 'email': $(this).data('id')}),          
+        }).done(function() {
+          location.reload();
+        })
+    });
   });
 </script>
 </%block>
\ No newline at end of file