EbookFoundation
/
regluit
mirror of https://github.com/EbookFoundation/regluit.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #70 from EbookFoundation/foundation/signup 

make registration/login responsive
foundation/welcome
Jonah Mania 2018-05-01 23:34:34 -04:00 committed by GitHub
parent ce1be71d8e 75467649e9
commit 9b82048ca6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 180 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/templates/registration/login.html
View File

@ -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 />
<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>
<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 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 %}" >
<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 %}{{ 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 %}

3
frontend/templates/registration/login_form.html
View File

@ -4,8 +4,7 @@
{{ form.username }}
{{ form.password.label_tag }}
{{ form.password }}
<br />
<input type="submit" name="submit" value="Sign in with Password" />
<input type="submit" name="submit" class="button success float-center" value="Sign in"/>
<input type="hidden" name="next" value="{% if next %}{{ next }}{% else %}/{% endif %}" />
</form>

17
frontend/templates/registration/registration_base.html
View File

@ -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 id="login_centerer">
<div id="login">
{% block doccontent %}
{% endblock %}
</div>
</div>
</div>
<div class="spacer"></div>
<div class="registration">
<div class="registration-content login-border">
{% block doccontent %}
{% endblock %}
</div>
</div>
{% endblock %}

31
frontend/templates/registration/registration_form.html
View File

@ -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 });
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.email.label }}: {{ form.email.errors }}<br />{{ form.email }}</div>
<div>{{ form.password1.label }}: {{ form.password1.errors }}<br />{{ form.password1 }}</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();" />
</form>
<input type="submit" class="button success float-center" value="Send activation email" onclick="this.disabled=true,this.form.submit();" />
</form>
<div class="google_signup">
<h3>...or</h3>
<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-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 class="google-signup">
<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-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 %}

136
static/scss/registration.scss Normal file
View File

@ -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;
}

124
static/scss/registration2.scss
View File

@ -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;
}

56
static/scss/sitewide4.scss
View File

@ -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;