From bac90daf7b144ec0c938a0714ec0e88061a761a6 Mon Sep 17 00:00:00 2001
From: Ian Jennings <ian.jennings@datuhealth.com>
Date: Thu, 21 Nov 2013 23:45:06 -0700
Subject: [PATCH] Moves login options into modal. Installs bower packages for
 modal and momentjs.

Not using moment js yet but I saw it there and figured.. soon enough.. might as well.

Signed-off-by: Ian Jennings <ian.jennings@datuhealth.com>
---
 .gitignore                |   2 +
 app/index.html            |  26 +++++++-
 app/scripts/main.js       |   6 +-
 app/scripts/views/home.js |  10 ++-
 app/styles/_login.scss    | 128 ++++++++++++++++++--------------------
 app/styles/main.scss      |  29 +++++++++
 6 files changed, 125 insertions(+), 76 deletions(-)

diff --git a/.gitignore b/.gitignore
index 4de9b62..1afc7c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,5 @@ test
 .tmp
 .DS_Store
 /bower_components/
+
+bower_components/
diff --git a/app/index.html b/app/index.html
index 680ac14..4b3278d 100644
--- a/app/index.html
+++ b/app/index.html
@@ -41,7 +41,7 @@
                 <button type="submit" class="hide">Submit Your Four Words</button>
             </form>
         </div>
-        <a href="login.html" class="btn-sign-in">Sign In <i class="icon-tw-white"></i><i class="icon-fb-white"></i></a>
+        <a href="#sign-in" data-target="sign-in" class="btn-sign-in">Sign In <i class="icon-tw-white"></i><i class="icon-fb-white"></i></a>
         <div class="container">
             <!-- <section class="sotm">
                 <article id="row5">
@@ -209,9 +209,29 @@ <h2>So fresh, So clean</h2>
                         <p>Shirts</p>
                     </div>
                 </article>
-            </section>
-            
+            </section>  
         </div>
+
+        <section id="sign-in" style="display:none;" class="login-container modal">
+            <a class="modal-close" href="#">&times;</a>
+            <h1>Four Words On Shirts</h1>
+            <a href="" data-target="signin-twitter" class="btn-signin-twitter">
+                <div class="icon"></div>
+                <div class="text">
+                    Sign in with Twitter
+                </div>
+            </a>
+            <a href="" data-target="signin-facebook" class="btn-signin-facebook">
+                <div class="icon"></div>
+                <div class="text">
+                    Sign in with Facebook
+                </div>
+            </a>
+            <p class="quiet">
+                Yes, these are your only options for now.</br>
+                No, you may not complain.
+            </p>
+        </section>
         
 
         <footer>
diff --git a/app/scripts/main.js b/app/scripts/main.js
index f54f0eb..5846866 100644
--- a/app/scripts/main.js
+++ b/app/scripts/main.js
@@ -1,8 +1,12 @@
 require.config({
-    paths: {
+    'paths': {
         'jquery': 'bower_components/jquery/jquery',
         'underscore': 'bower_components/underscore-amd/underscore',
         'backbone': 'bower_components/backbone-amd/backbone',
+        'leanModal': 'bower_components/jquery-leanmodal/jquery.leanModal'
+    },
+    'shim' : {
+        'leanModal':['jquery']
     }
 });
 
diff --git a/app/scripts/views/home.js b/app/scripts/views/home.js
index 48fcd77..68cc512 100644
--- a/app/scripts/views/home.js
+++ b/app/scripts/views/home.js
@@ -1,9 +1,14 @@
-define(['backbone'], function(Backbone) {
+define(['backbone','leanModal'], function(Backbone, leanModal) {
     var HomeView = Backbone.View.extend({
-        el:'.shirt-form',
+        el:'body',
 
         initialize: function() {
             console.log( 'Home page view' );
+            $('[data-target="sign-in"]').leanModal({
+                top : 200,
+                overlay : 0.5,
+                closeButton: ".modal-close"
+            });
         },
 
         events: {
@@ -22,7 +27,6 @@ define(['backbone'], function(Backbone) {
 
         formSpace : function (e) {
             var keycode = e.which;
-            console.log(keycode);
             if (keycode === 32 || keycode === 13){
                 $(e.currentTarget).next('input').focus();
             }
diff --git a/app/styles/_login.scss b/app/styles/_login.scss
index 56e5426..2ac8b0a 100644
--- a/app/styles/_login.scss
+++ b/app/styles/_login.scss
@@ -1,85 +1,75 @@
-.login {
-    font-size:11px;
+section.login-container{
+    background:$white;
+    width:320px;
+    margin:0 auto;
+    font-size:12px;
+    text-align:center;
+    position:relative;
 
-    section.login-container{
-        padding:23% 0;
-        width:320px;
-        margin:0 auto;
-        text-align:center;
-
-        h1 {
-            font-size:20px;
-        }
+    h1 {
+        font-size:20px;
+    }
 
-        .quiet {
-            margin-top:20px;
-        }
+    .quiet {
+        margin-top:20px;
     }
+}
 
-    [class*='btn-signin']{
-        display:block;
-        @include border-radius(3px);
-        border:1px solid rgba($black,.2);
-        width:230px;
-        color:$white;
-        background:#ccc;
-        overflow:hidden;
-        margin:10px auto;
-        @include box-shadow(-2px -2px 7px rgba($black,.1) inset);
-        text-align:left;
-        
-        .icon,.text{
-            background-color:rgba($white,0);
-            @include transition(background-color .5s);
-        }
+[class*='btn-signin']{
+    display:block;
+    @include border-radius(3px);
+    border:1px solid rgba($black,.2);
+    width:230px;
+    color:$white;
+    background:#ccc;
+    overflow:hidden;
+    margin:10px auto;
+    @include box-shadow(-2px -2px 7px rgba($black,.1) inset);
+    text-align:left;
+    
+    .icon,.text{
+        background-color:rgba($white,0);
+        @include transition(background-color .5s);
+    }
 
-        .icon {
-            float:left;
-            width:35px;
-            height:35px;
-            border-right:1px solid rgba($white,.2);
-            background-repeat:no-repeat;
-            background-position:50% 50%;
-        }
-        .text {
-            float:left;
-            border-left:1px solid rgba($black, .1);
-            padding:10px 15px;
-            font-size:12px;
-            width:163px;
-        }
+    .icon {
+        float:left;
+        width:35px;
+        height:35px;
+        border-right:1px solid rgba($white,.2);
+        background-repeat:no-repeat;
+        background-position:50% 50%;
+    }
+    .text {
+        float:left;
+        border-left:1px solid rgba($black, .1);
+        padding:10px 15px;
+        font-size:12px;
+        width:163px;
+    }
 
-        &:hover{
-            .icon,.text{
-                background-color:rgba($white,.2);
-            }
+    &:hover{
+        .icon,.text{
+            background-color:rgba($white,.2);
         }
+    }
 
-        &.btn-signin-facebook{
-            background:#3b5998;
+    &.btn-signin-facebook{
+        background:#3b5998;
 
-            .icon{
-                @extend .icons-facebook-24;
-                @include sprite-background-position($icons-sprites, facebook-24, 5px, 6px);
-            }
+        .icon{
+            @extend .icons-facebook-24;
+            @include sprite-background-position($icons-sprites, facebook-24, 5px, 6px);
         }
+    }
 
-        &.btn-signin-twitter{
-            background:#00acee;
+    &.btn-signin-twitter{
+        background:#00acee;
 
-            .icon{
-                @extend .icons-twitter-24;
-                @include sprite-background-position($icons-sprites, twitter-24, 6px, 5px);
-            }
+        .icon{
+            @extend .icons-twitter-24;
+            @include sprite-background-position($icons-sprites, twitter-24, 6px, 5px);
         }
     }
-
-    footer{
-        position:fixed;
-        bottom:0;
-        width:94%;
-        padding:20px 3%;
-    }
-
 }
 
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 2b25847..d10deb1 100644
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -75,6 +75,35 @@ button {
     color:rgba($black,.3);
 }
 
+#lean_overlay {
+    position: fixed;
+    z-index:1003;
+    top: 0px;
+    left: 0px;
+    height:100%;
+    width:100%;
+    background: #000;
+    display: none;
+}
+
+.modal{
+    border:5px solid $black;
+    .modal-close{
+        position:absolute;
+        right:-4px;
+        top:-4px;
+        display:block;
+        font-size:14px;
+        background:$black;
+        color:$white;
+        width:20px;
+        height:20px;
+        line-height:20px;
+        text-align:center;
+        border-bottom:none;
+    }
+}
+
 .btn-sign-in{
     @extend button;
     float:right;