Make sign-up box validate and make error notices less in-your-face

pull/1/head
eric 2013-08-15 12:43:20 -04:00
parent 39251b2363
commit f607ab026d
6 changed files with 34 additions and 7 deletions

View File

@ -36,7 +36,7 @@ function put_un_in_cookie(){
{% block login_pitch %}<h3>You'll need an account, since we won't charge your card unless the campaign succeeds!</h3>{% endblock %}
<div class="halfcolumn2 login_box">
<h3>Get an Unglue.it account:</h3>
<p>... we just have to confirm your email address.</p>
<p class="bigger">... we just have to confirm your email address.</p>
<form class="login" action='{% url registration_register %}' method='post' onsubmit="return put_un_in_cookie();">{% csrf_token %}
<div class="user-name">
<label>Username</label>

View File

@ -15,8 +15,11 @@ function put_un_in_cookie(){
<h3>Sign up for a Unglue.it account:</h3>
<form method='post' action='' onsubmit="return put_un_in_cookie();">{% csrf_token %}
{{ form }}
<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" />
</form>

View File

@ -1 +1 @@
.header-text{height:36px;line-height:36px;display:block;text-decoration:none;font-weight:bold;letter-spacing:-0.05em}.panelborders{border-width:1px 0;border-style:solid none;border-color:#fff}.roundedspan{border:1px solid #d4d4d4;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;padding:1px;color:#fff;margin:0 8px 0 0;display:inline-block}.roundedspan>span{padding:7px 7px;min-width:15px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;text-align:center;display:inline-block}.roundedspan>span .hovertext{display:none}.roundedspan>span:hover .hovertext{display:inline}.mediaborder{padding:5px;border:solid 5px #edf3f4}.actionbuttons{width:auto;height:36px;line-height:36px;background:#8dc63f;-moz-border-radius:32px;-webkit-border-radius:32px;border-radius:32px;color:white;cursor:pointer;font-size:13px;font-weight:bold;padding:0 15px;border:0;margin:5px 0}.errors{-moz-border-radius:16px;-webkit-border-radius:16px;border-radius:16px;border:solid #e35351 3px;clear:both;width:90%;height:auto;line-height:16px;padding:7px 0;font-weight:bold;font-size:13px;text-align:center}.errors li{list-style:none;border:0}#login_centerer{padding:10px;width:960px}#registration{width:960px;padding:10px;margin:0 auto;padding:10px 0;font-size:13px;line-height:19.5px}#registration .helptext{font-style:italic}#registration .helptext:before{white-space:pre;content:"\A"}.login_box{border:solid 3px #d6dde0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin:10px auto;padding:10px;width:45%}.login_box .google_signup{padding:30px 0}.login_box .google_signup div{height:48px;line-height:48px;float:left;padding-left:5px;font-size:15px;display:inline-block}.login_box .google_signup img{float:left;height:48px;width:48px}.login_box .google_signup img{margin-right:15px}.login_box .google_signup a{font-size:20px}.login_box input[type="text"],.login_box input[type="password"]{width:90%}#login{border:solid 3px #d6dde0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin:10px auto;float:none;padding:10px;width:50%}#login .google_signup{padding:30px 0}#login .google_signup div{height:32px;line-height:32px;float:left;padding-left:5px;font-size:15px;display:inline-block}#login .google_signup img{float:left;height:32px;width:32px}#login input[type="text"],#login input[type="password"]{width:90%}.actionbutton{width:auto;height:36px;line-height:36px;background:#8dc63f;-moz-border-radius:32px;-webkit-border-radius:32px;border-radius:32px;color:white;cursor:pointer;font-size:13px;font-weight:bold;padding:0 15px;border:0;margin:5px 0;float:left}#welcomesearch label{display:block;margin:0 auto;font-size:19px;padding-bottom:10px}#welcomesearch p{margin-bottom:5px}#welcomesearch form{margin:0 auto;width:210px;background:url("/static/images/landingpage/search-box-two.png") 0 0 no-repeat;height:36px;display:block;overflow:hidden}#welcomesearch input.inputbox{border:0;color:#66942e;height:26px;line-height:26px;font-size:13px;float:left;padding:0;margin:5px 0 5px 20px;width:149px;outline:0}#welcomesearch input.inputbox:focus{border:0}#welcomesearch input.greenbutton[type="submit"]{background:url("/static/images/landingpage/search-button-two.png") 0 0 no-repeat;width:40px;height:40px;padding:0;margin:0;border:0;display:block;float:right;text-indent:-10000px;font-size:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0}.welcomealternatives{border-top:1px solid #d6dde0;margin-top:10px;padding-top:5px}label:before{content:"\A";white-space:pre}
.header-text{height:36px;line-height:36px;display:block;text-decoration:none;font-weight:bold;letter-spacing:-0.05em}.panelborders{border-width:1px 0;border-style:solid none;border-color:#fff}.roundedspan{border:1px solid #d4d4d4;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;padding:1px;color:#fff;margin:0 8px 0 0;display:inline-block}.roundedspan>span{padding:7px 7px;min-width:15px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;text-align:center;display:inline-block}.roundedspan>span .hovertext{display:none}.roundedspan>span:hover .hovertext{display:inline}.mediaborder{padding:5px;border:solid 5px #edf3f4}.actionbuttons{width:auto;height:36px;line-height:36px;background:#8dc63f;-moz-border-radius:32px;-webkit-border-radius:32px;border-radius:32px;color:white;cursor:pointer;font-size:13px;font-weight:bold;padding:0 15px;border:0;margin:5px 0}.errors{-moz-border-radius:16px;-webkit-border-radius:16px;border-radius:16px;border:solid #e35351 3px;clear:both;width:90%;height:auto;line-height:16px;padding:7px 0;font-weight:bold;font-size:13px;text-align:center}.errors li{list-style:none;border:0}#login_centerer{padding:10px;width:960px}#registration{width:960px;padding:10px;margin:0 auto;padding:10px 0;font-size:13px;line-height:19.5px}#registration .helptext{font-style:italic}#registration .helptext:before{white-space:pre;content:"\A"}.login_box{border:solid 3px #d6dde0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin:10px auto;padding:9px;width:45%}.login_box .google_signup{padding:30px 0}.login_box .google_signup div{height:48px;line-height:48px;float:left;padding-left:5px;font-size:15px;display:inline-block}.login_box .google_signup img{float:left;height:48px;width:48px}.login_box .google_signup img{margin-right:15px}.login_box .google_signup a{font-size:20px}.login_box input[type="text"],.login_box input[type="password"]{width:90%}#login{border:solid 3px #d6dde0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin:10px auto;float:none;padding:10px;width:50%}#login .google_signup{padding:30px 0}#login .google_signup div{height:32px;line-height:32px;float:left;padding-left:5px;font-size:15px;display:inline-block}#login .google_signup img{float:left;height:32px;width:32px}#login input[type="text"],#login input[type="password"]{width:90%}.actionbutton{width:auto;height:36px;line-height:36px;background:#8dc63f;-moz-border-radius:32px;-webkit-border-radius:32px;border-radius:32px;color:white;cursor:pointer;font-size:13px;font-weight:bold;padding:0 15px;border:0;margin:5px 0;float:left}#welcomesearch label{display:block;margin:0 auto;font-size:19px;padding-bottom:10px}#welcomesearch p{margin-bottom:5px}#welcomesearch form{margin:0 auto;width:210px;background:url("/static/images/landingpage/search-box-two.png") 0 0 no-repeat;height:36px;display:block;overflow:hidden}#welcomesearch input.inputbox{border:0;color:#66942e;height:26px;line-height:26px;font-size:13px;float:left;padding:0;margin:5px 0 5px 20px;width:149px;outline:0}#welcomesearch input.inputbox:focus{border:0}#welcomesearch input.greenbutton[type="submit"]{background:url("/static/images/landingpage/search-button-two.png") 0 0 no-repeat;width:40px;height:40px;padding:0;margin:0;border:0;display:block;float:right;text-indent:-10000px;font-size:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0}.welcomealternatives{border-top:1px solid #d6dde0;margin-top:10px;padding-top:5px}label:before{content:"\A";white-space:pre}

File diff suppressed because one or more lines are too long

View File

@ -27,7 +27,7 @@
border: solid 3px @blue-grey;
.one-border-radius(5px);
margin: 10px auto;
padding: 10px;
padding: 9px;
width: 45%;
.google_signup {

View File

@ -227,6 +227,10 @@ input[type="submit"], a.fakeinput {
padding:0;
}
.bigger {
font-size: @font-size-larger;
}
ul.menu{
list-style:none;
padding:0;
@ -253,6 +257,25 @@ ul.menu{
}
}
/* less in-your-face errors */
.p_form .errorlist {
.one-border-radius(16px);
border: none;
color:@call-to-action;
clear: none;
width: 100%;
height: auto;
line-height: 16px;
padding: 0;
font-weight: normal;
font-size: 13px;
text-align: left;
display: inline;
li {
display: inline;
}
}
/* add class clearfix to floats to make them self-clear */
.clearfix:after {
content: ".";
@ -427,7 +450,8 @@ ul.menu{
form.login, #login form {
label {
display: block;
line-height: 18px;
line-height: 20px;
font-size: @font-size-larger;
}
input {