Make signup responsive
nicholas antonov
parent
7f6c9cf0dc
commit
adf275de3e
|
|
@ -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">
|
||||
{% block doccontent %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -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="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 %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,135 @@
|
|||
@import "variables.scss";
|
||||
|
||||
.registration {
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
.helptext {
|
||||
font-style: italic;
|
||||
|
||||
&:before {
|
||||
white-space: pre;
|
||||
content: "\A";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.google-signup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue