Merge pull request #70 from EbookFoundation/foundation/signup

make registration/login responsive

frontend/templates/registration/login.html

@@ -2,7 +2,6 @@
 
 {% block title %}Log in to Unglue.it{% endblock %}
 {% block doccontent %}
-<div id="lightbox_content">
 
 {% if form.errors %}
 {% for error in form.non_field_errors %}
@@ -16,7 +15,6 @@ Make sure the username box has your <b>username, not your email</b> -- some brow
         <p>
             We've sent your book to your Kindle.  Happy reading!
         </p>
-        
         <p>
             In the future you can send yourself unglued ebooks with one click.  Log in, or sign up, and we'll add your Kindle email to your profile so you never have to enter it again.
         </p>
@@ -31,14 +29,19 @@ Make sure the username box has your <b>username, not your email</b> -- some brow
 <a href="{% url 'libraryauth_password_reset' %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}{{ request.get_full_path|urlencode}}{% endif %}">Forgot</a> your password?  <a href="{% url 'registration_register' %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}{{ request.get_full_path|urlencode}}{% endif %}">Need an account</a>?  <a href="/faq/basics/account">Other questions</a>?
 
 
-<br /><br />
+<div class="google-signup">
-
+    <a  class="btn btn-social btn-google-plus" href="{% url 'social:begin' "google-oauth2" %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}{{ request.get_full_path|urlencode}}{% endif %}" >
-   <a  class="btn btn-social btn-google-plus" href="{% url 'social:begin' "google-oauth2" %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}{{ request.get_full_path|urlencode}}{% endif %}" ><i class="fa fa-google"></i>Sign in with Google</a>
+        <i class="fa fa-google"></i>
-   <a  class="btn btn-social btn-yahoo" href="{% url 'social:begin' "yahoo" %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}{{ request.get_full_path|urlencode}}{% endif %}" ><i class="fa fa-yahoo"></i>Sign in with Yahoo!</a>
+        Sign in with Google
+    </a>
+    <a  class="btn btn-social btn-yahoo" href="{% url 'social:begin' "yahoo" %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}{{ request.get_full_path|urlencode}}{% endif %}" >
+        <i class="fa fa-yahoo"></i>
+        Sign in with Yahoo!
+    </a>
+</div>
 {% else %}
 <div>
 You are already logged in as <a href="{% url 'supporter' user %}">{{ user.username }}</a>.
 </div>
 {% endif %}
-</div>
 {% endblock %}

frontend/templates/registration/login_form.html

@@ -1,11 +1,10 @@
 <!-- login_form.html -->
 <form method="post" action="{% url 'superlogin' %}" class="login">{% csrf_token %}
-    {{ form.username.label_tag }}    
+    {{ form.username.label_tag }}
     {{ form.username }}
     {{ form.password.label_tag }}
     {{ form.password }}
-    <br />
+    <input type="submit" name="submit" class="button success float-center" value="Sign in"/>
-    <input type="submit" name="submit" value="Sign in with Password" />
 
 <input type="hidden" name="next" value="{% if next %}{{ next }}{% else %}/{% endif %}" />
 </form>

frontend/templates/registration/registration_base.html

@@ -34,18 +34,15 @@ $j(document).ready(function() {
 {% block extra_head %}
 	<link href="{% sass_src 'scss/documentation2.scss' %}" rel="stylesheet" type="text/css" />
 {% block extra_extra_head %}
-    <link type="text/css" rel="stylesheet" href="{% sass_src 'scss/registration2.scss' %}" />
+    <link type="text/css" rel="stylesheet" href="{% sass_src 'scss/registration.scss' %}" />
 {% endblock %}
 {% endblock %}
 
 {% block content %}
-<div id="registration">
+<div class="registration">
-<div id="login_centerer">
+    <div class="registration-content login-border">
-<div id="login">
+        {% block doccontent %}
-{% block doccontent %}
+        {% endblock %}
-{% endblock %}
+    </div>
-</div>
+</div>
-</div>
-</div>
-<div class="spacer"></div>
 {% endblock %}

frontend/templates/registration/registration_form.html

@@ -1,40 +1,47 @@
 {% extends "registration/registration_base.html" %}
 
 {% block title %}Register for an account{% endblock %}
+
 {% block extra_js %}
 {{ block.super }}
 <script type="text/javascript">
-function put_un_in_cookie(){
+ function put_un_in_cookie(){
-    $j.cookie('un', $j('#id_username').val(), {path: '/', expires: 90 });
+     $j.cookie('un', $j('#id_username').val(), {path: '/', expires: 90 });
-    return true;
+     return true;
-}
+ }
 </script>
 {% endblock %}
+
+
 {% block doccontent %}
 {% if not user.is_authenticated %}
 
 <h3>Sign up for a Unglue.it account:</h3>
 
-    <form method='post' action='#' class="p_form" onsubmit="return put_un_in_cookie();">{% csrf_token %}
+<form method='post' action='#' class="p_form" onsubmit="return put_un_in_cookie();">{% csrf_token %}
-        <div>{{ form.username.label }}: {{ form.username.errors }}<br />{{ form.username }}</div>
+    <div>{{ form.username.label }}: {{ form.username.errors }}<br />{{ form.username }}</div>
-        <div>{{ form.email.label }}: {{ form.email.errors }}<br />{{ form.email }}</div>
+    <div>{{ form.email.label }}: {{ form.email.errors }}<br />{{ form.email }}</div>
-        <div>{{ form.password1.label }}: {{ form.password1.errors }}<br />{{ form.password1 }}</div>
+    <div>{{ form.password1.label }}: {{ form.password1.errors }}<br />{{ form.password1 }}</div>
-        <div>{{ form.password2.label }}: {{ form.password2.errors }}<br />{{ form.password2 }}</div>
+    <div>{{ form.password2.label }}: {{ form.password2.errors }}<br />{{ form.password2 }}</div>
-        <input type="submit" value="Send activation email"  onclick="this.disabled=true,this.form.submit();" />
+    <input type="submit" class="button success float-center" value="Send activation email"  onclick="this.disabled=true,this.form.submit();" />
-    </form>
+</form>
 
 
-<div class="google_signup">
+<div class="google-signup">
-	<h3>...or</h3>
+    <span class="linetext-outer"><span class="linetext-inner" >or</span></span>
-   <a  class="btn btn-social btn-google-plus" href="{% url 'social:begin' "google-oauth2" %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}/next/{% endif %}" ><i class="fa fa-google"></i>Sign in with Google</a>
+    <a class="btn btn-social btn-google-plus" href="{% url 'social:begin' "google-oauth2" %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}/next/{% endif %}" >
-   <a  class="btn btn-social btn-yahoo" href="{% url 'social:begin' "yahoo" %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}/next/{% endif %}" ><i class="fa fa-yahoo"></i>Sign in with Yahoo!</a>
+        <i class="fa fa-google"></i>
+        Sign in with Google
+    </a>
+    <a class="btn btn-social btn-yahoo" href="{% url 'social:begin' "yahoo" %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}/next/{% endif %}" >
+        <i class="fa fa-yahoo"></i>
+        Sign in with Yahoo!
+    </a>
 </div>
 {% else %}
 <div>
-You are already logged in as <a href="{% url 'supporter' user %}">{{ user.username }}</a>.
+    You are already logged in as <a href="{% url 'supporter' user %}">{{ user.username }}</a>.
 </div>
 {% endif %}
 
-</div>
-
 {% endblock %}

static/scss/registration.scss

@@ -0,0 +1,136 @@
+@import "variables";
+@import "settings";
+@import "foundation";
+
+.registration {
+    display: flex;
+
+    justify-content: center;
+
+    .helptext {
+        font-style: italic;
+
+        &:before {
+            white-space: pre;
+            content: "\A";
+        }
+    }
+}
+
+.google-signup {
+    display: flex;
+    flex-direction: column;
+
+    & > *{
+        margin: 7px 0px;
+    }
+}
+
+.linetext-outer {
+    display: inline-block;
+    width:100%;
+    text-align:center;
+    border-bottom: 1px solid $blue-grey;
+    line-height:0.1em;
+    margin:10px 0 20px;
+}
+.linetext-inner {
+    background:#fff;
+    padding:0 10px;
+}
+
+
+.login_box {
+    border: solid 3px $blue-grey;
+    @include one-border-radius(5px);
+    margin: 10px auto;
+    padding: 9px;
+    width: 45%;
+
+    .google_signup {
+        padding: 21px;
+    }
+
+    input[type="text"], input[type="password"] {
+        width: 90%;
+    }
+}
+
+@include breakpoint(medium) {
+    .login-border {
+        border: solid 3px $blue-grey;
+        @include one-border-radius(5px);
+        padding: 14px;
+    }
+}
+
+
+.actionbutton {
+    @include actionbuttons;
+    float: left;
+}
+
+#welcomesearch {
+    label {
+        display: block;
+        margin: 0 auto;
+        font-size: $font-size-header;
+        padding-bottom: 10px;
+    }
+
+    p {
+        margin-bottom: 5px;
+    }
+
+    form {
+        margin: 0 auto;
+        width:210px;
+        background:url("#{$image-base}landingpage/search-box-two.png") 0 0 no-repeat;
+        height:36px;
+        display:block;
+        overflow:hidden;
+    }
+
+    input {
+        &.inputbox {
+            border:none;
+            color:#66942e;
+            @include height(26px);
+            font-size: $font-size-default;
+            float:left;
+            padding:0;
+            margin:5px 0 5px 20px;
+            width: 149px;
+            outline: none;
+
+            &:focus {
+                border: none;
+            }
+        }
+
+        &.greenbutton[type="submit"] {
+            background:url("#{$image-base}landingpage/search-button-two.png") 0 0 no-repeat;
+            width:40px;
+            height:40px;
+            padding:0;
+            margin:0;
+            border:none;
+            display:block;
+            float: right;
+            text-indent:-10000px;
+			      font-size:0;
+			      @include one-border-radius(0);
+		    }
+	  }
+}
+
+.welcomealternatives {
+	  border-top: 1px solid $blue-grey;
+	  margin-top: 10px;
+	  padding-top: 5px;
+}
+
+label:before {
+    content: "\A";
+    white-space: pre;
+}

static/scss/registration2.scss

@@ -1,124 +0,0 @@
-@import "variables.scss";
-
-#login_centerer {
-    padding:10px;
-    width: 960px;
-}
-
-#registration {
-	width: 960px;
-	padding: 10px;
-	margin: 0 auto;
-	padding: 10px 0;
-	font-size: $font-size-default;
-	line-height: $font-size-default*1.5;
-
-	.helptext {
-	    font-style: italic;
-
-	    &:before {
-	        white-space: pre;
-	        content: "\A";
-	    }
-	}
-}
-
-.login_box {
-	border: solid 3px $blue-grey;
-	@include one-border-radius(5px);
-	margin: 10px auto;
-	padding: 9px;
-	width: 45%;
-
-	.google_signup {
-		padding: 21px;
-	}
-
-	input[type="text"], input[type="password"] {
-	    width: 90%;
-	}
-}
-
-#login {
-	border: solid 3px $blue-grey;
-	@include one-border-radius(5px);
-	margin: 10px auto;
-	float: none;
-	padding: 10px;
-	width: 50%;
-
-
-	input[type="text"], input[type="password"] {
-	    width: 90%;
-	}
-}
-
-.actionbutton {
-	@include actionbuttons;
-	float: left;
-}
-
-#welcomesearch {
-	label {
-		display: block;
-		margin: 0 auto;
-		font-size: $font-size-header;
-		padding-bottom: 10px;
-	}
-
-	p {
-		margin-bottom: 5px;
-	}
-
-	form {
-		margin: 0 auto;
-		width:210px;
-		background:url("#{$image-base}landingpage/search-box-two.png") 0 0 no-repeat;
-		height:36px;
-		display:block;
-		overflow:hidden;
-	}
-
-	input {
-		&.inputbox {
-			border:none;
-			color:#66942e;
-			@include height(26px);
-			font-size: $font-size-default;
-			float:left;
-			padding:0;
-			margin:5px 0 5px 20px;
-			width: 149px;
-    	    outline: none;
-
-    	    &:focus {
-    	    	border: none;
-    	    }
-		}
-
-		&.greenbutton[type="submit"] {
-			background:url("#{$image-base}landingpage/search-button-two.png") 0 0 no-repeat;
-			width:40px;
-			height:40px;
-			padding:0;
-			margin:0;
-			border:none;
-			display:block;
-			float: right;
-			text-indent:-10000px;
-			font-size:0;
-			@include one-border-radius(0);
-		}
-	}
-}
-
-.welcomealternatives {
-	border-top: 1px solid $blue-grey;
-	margin-top: 10px;
-	padding-top: 5px;
-}
-
-label:before {
-    content: "\A";
-    white-space: pre;
-}

static/scss/sitewide4.scss

@@ -216,15 +216,6 @@ h3 {
     }
 }
 
-input[type="submit"], a.fakeinput {
-	background: $call-to-action;
-	color: white;
-	font-weight: bold;
-	padding: 0.5em 1em;
-	cursor: pointer;
-}
-
-
 .loader-gif[disabled="disabled"], .loader-gif.show-loading {
     background: url('/static/images/loading.gif') center no-repeat !important;
 }
@@ -449,53 +440,6 @@ input[type="submit"], a.fakeinput {
     line-height: normal;
 }
 
-form.login, #login form {
-    label {
-        display: block;
-        line-height: 20px;
-        font-size: $font-size-larger;
-    }
-
-    input {
-        width: 90%;
-        @include one-border-radius(5px);
-        border: 1px solid $blue-grey;
-        @include height(18px);
-        margin-bottom: 6px;
-
-        &[type=submit] {
-            text-decoration: capitalize;
-            @include actionbuttons;
-        }
-
-        &:focus {
-            border: solid 1px $call-to-action;
-        }
-    }
-
-	input[type="text"], input[type="password"] {
-    	@include height($font-size-default*1.75);
-        margin-bottom: $font-size-default;
-        border-width: 2px;
-	}
-
-	input[type="submit"] {
-	    font-size: $font-size-larger;
-	}
-
-
-    span.helptext {
-        display: block;
-        margin-top: -11px;
-        font-style: italic;
-        font-size: $font-size-default;
-    }
-}
-
-#lightbox_content a.btn {
-    color: #FFF;
-}
-
 .js-search {
     float:left;
     padding-top:25px;