Merge branch 'prototype' into dormsbee/multicourse

lms/static/js/toggle_login_modal.js

+$(document).ready(function () {
+  $('a.login').click(function() {
+    $('.modal-wrapper').addClass("visible");
+  });
+  $('div.close-modal').click(function() {
+    $('.modal-wrapper').removeClass("visible");
+  });
+});

lms/static/sass/_shared_login_modal.scss

@@ -2,7 +2,7 @@
   @include background-image(radial-gradient(50% 50%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.7)));
   bottom: 0;
   content: "";
-  //display: none;
+  display: none;
   left: 0;
   position: fixed;
   right: 0;
@@ -14,27 +14,43 @@
   }
 
   .login-modal {
-    background: rgba(200, 200, 200, 1);
+    background: rgba(0,0,0, 0.6);
+    border: 1px solid rgba(0, 0, 0, 0.9);
     @include border-radius(4px);
-    @include box-shadow(0 5px 35px 0px rgba(0,0,0, 0.2));
+    @include box-shadow(0 10px 60px 10px rgba(0,0,0, 0.5));
     color: #fff;
-    padding: 6px;
-    width: grid-width(8);
-    @include vertically-and-horizontally-centered(430px, grid-width(8));
+    padding: 10px;
+    width: grid-width(7);
+    @include vertically-and-horizontally-centered(400px, grid-width(7));
     z-index: 10;
 
     .inner-wrapper {
-      background: rgba(235, 235, 235, 1);
-      border: 1px solid rgba(180, 180, 180, 1);
+      @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
       @include border-radius(4px);
-      @include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 1px 0 0 rgba(255, 255, 255, 0.3));
-      height: 410px;
+      border: 1px solid rgba(0, 0, 0, 0.9);
+      @include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
+      height: 380px;
+      overflow: hidden;
       padding: 30px;
       position: relative;
 
+      &::before {
+        @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
+        content: "";
+        display: block;
+        height: 400px;
+        left: 0px;
+        margin: 0 auto;
+        position: absolute;
+        bottom: -140px;
+        width: 100%;
+      }
+
       header {
         margin-bottom: 30px;
+        padding-top: 5px;
         position: relative;
+        z-index: 2;
 
         &::after {
           @extend .faded-hr-divider;
@@ -45,27 +61,21 @@
         }
 
         h3 {
-          color: $base-font-color;
-          font: normal 2.2rem/2.4rem $sans-serif;
+          color: $lighter-base-font-color;
+          font: normal 1.4rem/1.8rem $serif;
           padding-bottom: 20px;
           text-align: center;
           text-shadow: 0 1px rgba(255,255,255, 0.4);
           text-transform: uppercase;
           vertical-align: middle;
-
-          img {
-            @include inline-block;
-            display: none;
-            height: 60px;
-            margin-right: 10px;
-            vertical-align: middle;
-          }
         }
 
       }
 
       form {
         @include clearfix;
+        position: relative;
+        z-index: 2;
 
         label {
           display: none;
@@ -75,9 +85,19 @@
           background: rgb(230,230,230);
           border: 1px solid rgb(200,200,200);
           @include border-radius(3px);
+          @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
           display: block;
-          margin-bottom: 40px;
-          padding: 6px 10px;
+          margin-bottom: 60px;
+          padding: 8px 10px;
+          position: relative;
+
+          &::before {
+            @extend .faded-hr-divider;
+            bottom: -30px;
+            content: "";
+            display: block;
+            position: absolute;
+          }
         }
 
         input[type="checkbox"] {
@@ -96,34 +116,18 @@
           display: block;
           height: 45px;
           margin: 0 auto;
-          width: 50%;
+          width: 70%;
         }
       }
 
       .login-extra {
-        margin-top: 40px;
-        padding: 20px 0px;
+        padding: 15px 0px;
         position: relative;
-        @include transition(opacity 0.15s linear);
-
-        &:hover {
-          p {
-            opacity: 1;
-          }
-        }
 
-        &::before {
-          @extend .faded-hr-divider;
-          content: "";
-          display: block;
-          position: absolute;
-          top: 0px;
-        }
 
         p {
           color: $lighter-base-font-color;
           font: normal italic 1.2rem/1.6rem $serif;
-          opacity: 0.7;
           text-align: center;
 
           a {
@@ -133,50 +137,40 @@
           }
 
           span + a {
-            border-left: 1px solid rgb(200,200,200);
-            margin-left: 10px;
-            padding-left: 10px;
+            margin-left: 15px;
           }
         }
       }
 
       .close-modal {
-        background: rgba(200,200,200, 0.7);
-        border: 1px solid rgba(180,180,180, 0.7);
-        @include border-radius(50px);
+        //background: rgb(240,240,240);
+        //border: 1px solid rgba(180,180,180, 0.7);
+        @include border-radius(2px);
+        //@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.1));
+        cursor: pointer;
         @include inline-block;
-        padding: 4px;
+        padding: 5px 10px;
         position: absolute;
-        right: -16px;
-        top: -16px;
+        right: 5px;
+        top: 5px;
         @include transition(all, 0.15s, ease-out);
 
         .inner {
-          background: rgb(255,255,255);
-          border: 1px solid rgb(180,180,180);
-          @include border-radius(50px);
-          @include box-shadow(0 1px 0 0 rgba(255, 255, 255, 0.3));
-          height: 26px;
-          width: 26px;
-
           p {
-            color: rgb(210,210,210);
-            font: normal 15px/17px $sans-serif;
-            padding-top: 4px;
+            color: $lighter-base-font-color;
+            font: normal 1.2rem/1.2rem $sans-serif;
             text-align: center;
-            text-shadow: 0 -1px rgba(0,0,0, 0.3);
+            text-shadow: 0 1px rgba(255,255,255, 0.8);
             @include transition(all, 0.15s, ease-out);
           }
         }
 
         &:hover {
-          background: rgba(200,200,200, 1);
-          border: 1px solid rgba(180,180,180, 1);
-          cursor: pointer;
-          @include box-shadow(0 1px 3px 0 rgba(0,0,0, 0.15));
+          //background: rgb(235,235,235);
+          //@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.125));
 
           p {
-            color: lighten(red, 15%);
+            color: $base-font-color;
           }
         }
       }

lms/templates/login_modal.html

@@ -4,7 +4,7 @@
   <section class="login-modal">
     <div class="inner-wrapper">
       <header>
-        <h3><img src="${static.url('images/edx_bw.png')}">Log In</h3>
+        <h3>Log In</h3>
       </header>
 
       <form id="login_form" method="post">
@@ -16,19 +16,19 @@
           <input name="remember" type="checkbox">
           Remember me
         </label>
-        <input name="submit" type="submit" value="Log In">
+        <input name="submit" type="submit" value="Submit">
       </form>
 
       <section class="login-extra">
         <p>
-          <span>Not enrolled? <a href="#">Sign up here.</a></span>
-          <a href="#" class="pwd-reset">Forgot your password?</a>
+          <span>Not enrolled? <a href="#">Sign up.</a></span>
+          <a href="#" class="pwd-reset">Forgot password?</a>
         </p>
       </section>
 
       <div class="close-modal">
         <div class="inner">
-          <p>✖</p>
+          <p>&#10005;</p>
         </div>
       </div>
     </div>

lms/templates/main.html

@@ -68,6 +68,7 @@
   <%block name="js_extra"/>
   <script src="${static.url('js/my_courses_dropdown.js')}"></script>
   <script src="${static.url('js/sticky_footer.js')}"></script>
+  <script src="${static.url('js/toggle_login_modal.js')}"></script>
   <script src="${static.url('js/sticky_filter.js')}"></script>
 
 </body>

lms/templates/navigation.html

@@ -42,7 +42,7 @@
           <a href="#">Jobs</a>
         </li>
         <li>
-          <a href="/dashboard">Log In</a>
+          <a href="#" class="login">Log In</a>
         </li>
         <li>
           <a href="#">Sign Up</a>