style tweaks to tabs and static pages; key bindings for new user form

cms/static/sass/_base.scss

@@ -61,7 +61,7 @@ h1 {
 .window {
     background: #fff;
     border-radius: 3px;
-    @include box-shadow(0 1px 1px rgba(0, 0, 0, .2));
+    @include box-shadow(0 1px 1px rgba(0,0,0,0.2), 0 0 0 1px rgba(0, 0, 0, 0.1));
 }
 
 .sidebar {
@@ -187,10 +187,6 @@ code {
     .details {
       margin-bottom: 30px;
       font-size: 14px;
-
-      .new-button {
-        margin-right: 30px;
-      }
     }
 
     h4 {

cms/static/sass/_courseware.scss

+
 input.courseware-unit-search-input {
 	float: left;
 	width: 260px;
@@ -10,7 +11,7 @@ input.courseware-unit-search-input {
 	border-radius: 3px;
 	margin: 15px 0;
 	padding-bottom: 12px;
-	@include box-shadow(0 1px 1px rgba(0, 0, 0, .2));
+	@include box-shadow(0 1px 1px rgba(0,0,0,0.2), 0 0 0 1px rgba(0, 0, 0, 0.1));
 
 	&:first-child {
 		margin-top: 0;

cms/static/sass/_static-pages.scss

@@ -6,6 +6,10 @@
     padding: 12px 0;
   }
 
+  .new-tab {
+    margin-bottom: 15px;
+  }
+
   .unit-body {
     padding: 30px 40px;
   }

cms/static/sass/_users.scss

@@ -5,21 +5,7 @@
   }
 
   .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;
+    margin-bottom: 15px;
   }
 
   .new-user-form {
@@ -55,16 +41,17 @@
 
     .add-button {
       @include blue-button;
+      padding: 6px 20px 8px;
     }
 
     .cancel-button {
       @include white-button;
+      padding: 6px 20px 8px;
     }
   }
 
   .user-list {
     border: 1px solid $mediumGrey;
-    border-top: none;
     background: $lightGrey;
 
     li {

cms/templates/edit-tabs.html

@@ -22,10 +22,12 @@
     </div>
     <article class="unit-body window">
       <div class="details">
-        <a href="#" class="new-button new-tab left">
+        <p>Here you can add and manage additional pages for your course. These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.</p>
+      </div>
+      <div class="list-header">
+        <a href="#" class="new-button new-tab">
           <span class="plus-icon white"></span>New Tab
         </a>
-        <p>Here you can add and manage additional pages for your course. These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.</p>
       </div>
       <div class="tab-list">
         <ol class='components'>

cms/templates/manage_users.html

@@ -11,22 +11,20 @@
       <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 course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.</p>
       </div>
-      <div class="list-header">
       %if allow_actions:
-        <a href="#" class="new-user-button">
-          <span class="plus-icon"></span>New User
+      <a href="#" class="new-button new-user-button">
+        <span class="plus-icon white"></span>New User
       </a>
       %endif
-      </div>
       %if allow_actions:
-      <div class="new-user-form">
+      <form class="new-user-form">
         <div id="result"></div>
         <div class="form-elements">
           <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">add user</a>
-          <a href="#" class="cancel-button">cancel</a>
-        </div>
+          <input type="submit" value="Add User" id="add_user" class="add-button" />
+          <input type="button" value="Cancel" class="cancel-button" />
         </div>
+      </form>
       %endif
       <div>
         <ol class="user-list">
@@ -57,6 +55,7 @@
   function showNewUserForm(e) {
     e.preventDefault();
     $newUserForm.slideDown(150);
+    $newUserForm.find('.email-input').focus();
   }
 
   function hideNewUserForm(e) {
@@ -66,13 +65,15 @@
     $('#email').val('');
   }
 
-  $(document).ready(function() {
-    $newUserForm = $('.new-user-form');
-    $newUserForm.find('.cancel-button').bind('click', hideNewUserForm);
+  function checkForCancel(e) {
+    if(e.which == 27) {
+      e.data.$cancelButton.click();
+    }
+  }
 
-    $('.new-user-button').bind('click', showNewUserForm);
+  function addUser(e) {
+    e.preventDefault();
 
-    $('#add_user').click(function() {
     $.ajax({
       url: '${add_user_postback_url}',
       type: 'POST',
@@ -84,8 +85,17 @@
         $('#result').show().empty().append(data.ErrMsg);
       else
         location.reload();
-      })
     });
+  }
+
+  $(document).ready(function() {
+    $newUserForm = $('.new-user-form');
+    var $cancelButton = $newUserForm.find('.cancel-button');    
+    $newUserForm.bind('submit', addUser);
+    $cancelButton.bind('click', hideNewUserForm);
+
+    $('.new-user-button').bind('click', showNewUserForm);
+    $body.bind('keyup', { $cancelButton: $cancelButton }, checkForCancel);
 
     $('.remove-user').click(function() {
       $.ajax({