Add sign-in modal

401.spt

@@ -10,6 +10,15 @@ suppress_sidebar = True
     {{ sign_in_using(button_class='large') }}
 </div>
 {% endblock %}
+
+{% block scripts %}
+<script>
+$(document).ready(function() {
+	Gratipay.signIn.openSignInToContinueModal();
+});
+</script>
+{{ super() }}
+{% endblock %}
 [---] application/json via stdlib_percent
 { "error_code": 401
 , "error_message_short": "Unauthenticated"

js/gratipay.js

@@ -14,7 +14,7 @@ Gratipay.init = function() {
     Gratipay.warnOffUsersFromDeveloperConsole();
     Gratipay.adaptToLongUsernames();
     Gratipay.forms.initCSRF();
-    Gratipay.signIn();
+    Gratipay.signIn.wireUpButton();
     Gratipay.signOut();
     Gratipay.payments.initSupportGratipay();
     Gratipay.tabs.init();
@@ -108,34 +108,6 @@ Gratipay.jsonml = function(jsonml) {
     return node;
 };
 
-Gratipay.signIn = function() {
-    $('.sign-in > .dropdown').mouseenter(function(e) {
-        clearTimeout($(this).data('timeoutId'));
-        $(this).addClass('open');
-    }).mouseleave(function(e) {
-        var $this = $(this),
-            timeoutId = setTimeout(function() {
-                $this.removeClass('open');
-            }, 100);
-        $this.data('timeoutId', timeoutId);
-    });
-
-    $('.dropdown-toggle').click(function(e) {
-        if ($('.sign-in > .dropdown').hasClass('open')) {
-            e.preventDefault();
-            return false;
-        }
-        else {
-            $(this).addClass('open');
-        }
-    });
-
-    // disable the tip-changed prompt when trying to sign in
-    $('form.auth-button').submit(function() {
-        $(window).off('beforeunload.tips');
-    });
-};
-
 Gratipay.signOut = function() {
     $('a#sign-out').click(function(e) {
         e.preventDefault();

js/gratipay/sign-in.js

@@ -0,0 +1,22 @@
+Gratipay.signIn = {};
+
+Gratipay.signIn.wireUpButton = function() {
+    $('.sign-in button').click(Gratipay.signIn.openSignInOrSignUpModal);
+}
+
+Gratipay.signIn.openSignInToContinueModal = function () {
+    Gratipay.signIn.replaceTextInModal('sign-in-to-continue');
+    Gratipay.modal.open('#sign-in-modal');
+}
+
+Gratipay.signIn.openSignInOrSignUpModal = function () {
+    Gratipay.signIn.replaceTextInModal('sign-in-or-sign-up');
+    Gratipay.modal.open('#sign-in-modal');
+}
+
+Gratipay.signIn.replaceTextInModal = function(dataKey) {
+    $('#sign-in-modal').find('.sign-in-togglable').each(function () {
+        var textToReplace = $(this).data(dataKey);
+        $(this).text(textToReplace);
+    });
+}

scss/components/modal.scss

@@ -45,7 +45,8 @@
     left: 0;
     text-align: center;
     display: none;
-    background: transparentize($black, 0.3);
+    background: transparentize($light-brown, 0.3);
+    z-index: 1000;
 }
 
 .modal {
@@ -55,19 +56,19 @@
     display: inline-block;
     position: relative;
     @include border-radius($border-radius);
-    @include box-shadow(0, 0, 50px, $black);
-
     margin-top: 15vh;
 
     header {
         text-align: left;
         width: 100%;
         height: $header-height;
         border: 1px solid $darker-black;
-        background: white;
+        background: $darker-black;
+
         @include border-radius($border-radius $border-radius 0 0);
 
         h2 {
+            color: $almost-white;
             margin: 0;
             font-size: 20px;
             padding: 0px 20px 0px 20px;
@@ -80,7 +81,7 @@
             border-top: 1px solid $darker-black;
             border-right: 1px solid $darker-black;
             border-bottom: 1px solid $darker-black;
-            color: $darker-black;
+            color: $almost-white;
             vertical-align: middle;
             position: absolute;
             top: 0px;
@@ -91,7 +92,10 @@
             @include border-radius(0 $border-radius 0 0);
 
             &:hover {
-                background-color: $light-brown;
+                background-color: $gray;
+                border-top: 1px solid $gray;
+                border-right: 1px solid $gray;
+                border-bottom: 1px solid $gray;
             }
         }
     }
@@ -103,8 +107,7 @@
         text-align: left;
         overflow: auto;
         max-height: 70vh;
-        z-index: 0;
-        background: $lightest-gray;
+        background: white;
         @include border-radius(0 0 $border-radius $border-radius);
     }
 }

scss/components/sign_in.scss

@@ -1,81 +1,25 @@
 .sign-in {
     display: inline-block;
     vertical-align: middle;
-    .dropdown-toggle {
+
+    button {
         background: $green;
         @include border-radius(3px);
         color: #fff;
         padding: 0 8px;
         display: block;
         font-size: 13px;
         line-height: 25px;
-        .caret {
-            border-top: 4px solid #fff;
-            border-right: 4px solid transparent;
-            border-left: 4px solid transparent;
-            margin-top: 11px;
-        }
-        &.highlight {
-            @include box-shadow(0, 0, 8px, $green);
+
+        &:hover {
             background: $darker-green;
         }
     }
-    .open .dropdown-toggle, .dropdown-toggle:hover {
-        background: $darker-green;
-    }
-    .dropdown-menu {
-        top: 24px;
-        @include border-radius(3px);
-        border: 0;
-        box-shadow: none;
-        background: $green;
-        min-width: 140px; /* centering on unclaimed package page is based on this */
-        li {
-            margin: 0;
-            list-style: none;
-            &.facebook      button { @include has-icon("facebook"); }
-            &.google        button { @include has-icon("google"); }
-            &.twitter       button { @include has-icon("twitter"); }
-            &.github        button { @include has-icon("github"); }
-            &.bitbucket     button { @include has-icon("bitbucket"); }
-            &.openstreetmap button { @include has-icon("openstreetmap"); }
-            &:hover button {
-                background: $darker-green;
-            }
-        }
-        button {
-            color: #fff;
-            display: block;
-            width: 100%;
-            padding: 3px 8px;
-            margin: 0;
-            text-align: left;
-            position: relative;
-            font-size: 13px;
-            border: none;
-            @include border-radius(0);
-            background: none;
-        }
-        button:before {
-            position: absolute;
-            top: 4px;
-            right: 5px;
-        }
-        form {
-            display: block;
-            margin: 0;
-            padding: 0;
-        }
-    }
+
     #header & {
         float: right;
-        &:hover {
-            .dropdown-toggle {
-                background: transparentize($gold, 0.8);
-                border-color: $gold;
-            }
-        }
-        .dropdown-toggle {
+
+        button {
             @include border-radius(0);
             border-top: 4px solid transparent;
             background: none;
@@ -92,19 +36,78 @@
                 margin-top: 4px;
             }
         }
-        .dropdown-menu {
-            left: auto;
-            top: auto;
-            right: 0;
-            margin-top: 0;
-            @include border-radius(0);
-            background: $gold;
+
+        &:hover {
             button {
-                color: $black;
-                &:hover {
-                    background: transparentize($brown, 0.8);
-                }
+                background: transparentize($gold, 0.8);
+                border-color: $gold;
             }
         }
     }
 }
+
+#sign-in-modal .modal {
+    max-width: 400px;
+    width: 90%;
+    section {
+        padding: 20px;
+        text-align: center;
+
+        p {
+            font-size: 14px;
+        }
+    }
+
+    .auth-links {
+        margin-top: 5px;
+    }
+
+    .auth-links li {
+        display: inline-block;
+        margin: 5px 0px 0px 0px;
+
+        & > * {
+            display: inline;
+        }
+    }
+
+    .auth-links button {
+        text-align: left;
+        background: $green;
+        color: white;
+        padding: 15px 45px 15px 15px;
+        position: relative;
+        font: normal 14px $Ideal;
+
+        span {
+            vertical-align: middle;
+        }
+
+        span.icon {
+            position: absolute;
+            right: 9px;
+            font-size: 16px;
+        }
+
+        span.icon.facebook      { @include has-icon("facebook"); }
+        span.icon.twitter       { @include has-icon("twitter"); }
+        span.icon.google        { @include has-icon("google"); }
+        span.icon.github        { @include has-icon("github"); }
+        span.icon.openstreetmap { @include has-icon("openstreetmap"); }
+        span.icon.bitbucket     { @include has-icon("bitbucket"); }
+
+        &:hover {
+            background: $darker-green;
+        }
+    }
+}
+
+@media (max-width: 600px) {
+    #sign-in-modal .modal .auth-links li {
+        display: block;
+
+        button {
+            width: 100%;
+        }
+    }
+}

scss/mixins/icons.scss

@@ -9,13 +9,11 @@
     font-style: normal;
 }
 
-@mixin icon($name: "", $font-size: 16px, $margin-right: 4px) {
+@mixin icon($name: "") {
   font-family: 'icomoon';
   speak: none;
   font-weight: normal;
   font-variant: normal;
-  font-size: $font-size;
-  margin-right: $margin-right;
   text-transform: none;
   -webkit-font-smoothing: antialiased;
 
@@ -27,8 +25,8 @@
   @else if $name == "bitbucket"     { content: "\e005"; }
 }
 
-@mixin has-icon($name: "", $font-size: 16px, $margin-right: 4px) {
+@mixin has-icon($name: "") {
   &:before {
-    @include icon($name, $font-size, $margin-right);
+    @include icon($name);
   }
 }

scss/variables.scss

@@ -25,5 +25,7 @@ $gold: #FFC300;
 $white: #FFF;
 $blue: #0073cf;
 
+$almost-white: #FCFCFC;
+
 // search result item width
 $people-column-width: 90px;

templates/base.html

@@ -29,6 +29,7 @@
     {% endif %}
 </head>
 <body{% if page_id %} id="{{ page_id }}"{% endif %}>
+    {% include "templates/sign-in-modal.html" %}
 
     <div id="wrapper">
         <a class="github-ribbon" href="https://github.com/gratipay/gratipay.com">