Fixed login widget for vivo-basic

This commit is contained in:
mb863 2010-11-19 14:52:41 +00:00
parent ca76cfa4bd
commit a3b8550e29
2 changed files with 157 additions and 146 deletions

View file

@ -1,151 +1,161 @@
/* $This file is distributed under the terms of the license in /doc/license.txt$ */ /* $This file is distributed under the terms of the license in /doc/license.txt$ */
/* styles for log in */ /* styles for log in */
#formLogin {
width:600px; #log-in-form label,
padding:0px; #log-in-form input.text,
margin:0px; #log-in-form #password,
text-align:left; #log-in-form #confirmPassword{
display:block;
} }
#log-in-form label.label-remember-me{
.noOuterBox { display:block;
width:340px;
padding:0px;
border: none;
margin:0px;
} }
#log-in-form p.submit {
#formLogin h2 { float:left;
font-size:1.3em; margin-bottom:0;
line-height:1em;
margin-top:0px;
margin-bottom:1em;
color:#111;
} }
#log-in-form input.checkbox-remember-me {
float:left;
#formLogin h6 { height:14px;
font-size:1.2em; padding:0;
line-height:1em; margin-top:13px;
margin-top:0px; margin-left:20px;
margin-bottom:1em;
color:#111;
} }
#log-in-form .label-remember-me {
#formLogin form { display:block;
margin: 0; float:left;
padding: 0; width:100px;
margin:0;
padding:0;
margin-top:10px;
margin-right:25px;
padding-right:10px;
} }
p.forgot-password {
#formLogin label { clear:both;
display:block; margin-bottom:0;
margin-bottom:0.5em;
font-weight:bold;
} }
p.request-account {
#formLogin label span { width:219px;
color:#900; float:left;
}
#formLogin input {
display:block;
margin-bottom:1.5em;
width: 200px;
}
#formLogin textarea {
width: 300px;
display:block;
margin-bottom:1.5em;
}
#formLogin .checkBox {
display:inline;
width:1em;
margin-bottom: 1em;
}
#formLogin p.small {
font-size: 0.8em;
}
#formLogin input.submit {
width: auto;
padding: 0 0.9em;
display:inline;
}
.requestAccount {
padding: 1em 0 0 2em;
margin-bottom:0;
}
.requestAccountNoOutterBox {
padding: 1em 0 0 0;
margin-bottom:0;
} }
#errorAlert { #errorAlert {
color:#900; color:#900;
padding:0px; padding:0px;
margin-bottom:5px; margin-bottom:5px;
height:30px; height:30px;
} }
#errorAlert img { #errorAlert img {
float:left; float:left;
margin:0; margin:0;
padding:0; padding:0;
vertical-align:middle; vertical-align:middle;
} }
#errorAlert p { #errorAlert p {
padding-left:35px; padding-left:30px;
font-size:0.9em; font-size:0.9em;
line-height:30px; line-height:30px;
} }
#confirmationAlert {
##confirmationAlert { color:#169f43;
color:#169f43; padding:0px;
padding:0px; margin-bottom:5px;
margin-bottom:5px; height:30px;
height:30px;
} }
#confirmationAlert img {
##confirmationAlert img { float:left;
float:left; margin:0;
margin:0; padding:0;
padding:0; vertical-align:middle;
vertical-align:middle;
} }
#confirmationAlert p { #confirmationAlert p {
padding-left:30px; padding-left:30px;
font-size:0.9em; font-size:0.9em;
line-height:30px; line-height:30px;
} }
.formFieldAlert { .formFieldAlert {
border:2px solid #900; border:2px solid #900;
} }
.red { .red {
color:#900; color:#900;
} }
#loginFormAndLinks {
display: none;
}
p.passwordNote { p.passwordNote {
margin:0; margin:0;
padding:0; padding:0;
margin-top:-8px; margin-top:-8px;
font-size:0.8em; font-size:0.8em;
color:#615e5e; color:#615e5e;
padding-top:15px;
}
.or {
display:inline;
vertical-align:middle;
} }
.or { /*
display:inline; #formLogin {
vertical-align:middle; width:600px;
padding:0px;
margin:0px;
text-align:left;
border:1px solid red;
} }
.noOuterBox {
width:340px;
padding:0px;
border: none;
margin:0px;
}
#formLogin h2 {
font-size:1.3em;
line-height:1em;
margin-top:0px;
margin-bottom:1em;
color:#111;
}
#formLogin h6 {
font-size:1.2em;
line-height:1em;
margin-top:0px;
margin-bottom:1em;
color:#111;
}
#formLogin form {
margin: 0;
padding: 0;
}
#formLogin label {
display:block;
margin-bottom:0.5em;
font-weight:bold;
}
#formLogin label span {
color:#900;
}
#formLogin input {
display:block;
margin-bottom:1.5em;
width: 200px;
}
#formLogin textarea {
width: 300px;
display:block;
margin-bottom:1.5em;
}
#formLogin .checkBox {
display:inline;
width:1em;
margin-bottom: 1em;
}
#formLogin p.small {
font-size: 0.8em;
}
#formLogin input.submit {
width: auto;
padding: 0 0.9em;
display:inline;
}
*/

View file

@ -31,29 +31,27 @@
</#if> </#if>
<#if errorMessage??> <#if errorMessage??>
<section id="errorAlert"><img src="${urls.siteIcons}/iconAlert.png" alert="Error alert icon"/> <div id="errorAlert"><img src="${urls.siteIcons}/iconAlert.png" alert="Error alert icon"/>
<p>${errorMessage}</p> <p>${errorMessage}</p>
</section> </div>
</#if> </#if>
<section id="loginFormAndLinks"> <form role="form" id="log-in-form" action="${formAction}" method="post" name="log-in-form" />
<label for="email">Email</label>
<input class="text-field" name="loginName" id="loginName" type="text" required />
<form id="log-in-form" action="${formAction}" method="post" name="log-in-form" /> <label for="password">Password</label>
<label for="email">Email</label> <input class="text-field" name="loginPassword" id="password" type="password" required />
<input class="text-field" name="loginName" id="loginName" type="text" required />
<label for="password">Password</label> <p class="submit"><input name="loginForm" type="submit" class="green button" value="Log in"/></p>
<input class="text-field" name="loginPassword" id="password" type="password" required />
<p class="submit"><input name="loginForm" type="submit" class="green button" value="Log in"/></p> <input class="checkbox-remember-me" name="remember-me" type="checkbox" value="" />
<label class="label-remember-me" for="remember-me">Remember me</label>
</form>
<input class="checkbox-remember-me" name="remember-me" type="checkbox" value="" /> <p class="forgot-password"><a href="#">Forgot your password?</a></p>
<label class="label-remember-me" for="remember-me">Remember me</label> <p class="request-account"><a class="blue button" href="#">Request an account</a> </p>
</form>
<p class="forgot-password"><a href="#">Forgot your password?</a></p>
<p class="request-account"><a class="blue button" href="#">Request an account</a> </p>
</section>
</section><!-- #log-in --> </section><!-- #log-in -->
</#macro> </#macro>
@ -62,18 +60,21 @@
<h2>Log in</h2> <h2>Log in</h2>
<#if errorMessage??> <#if errorMessage??>
<div id="errorAlert"><img src="${urls.siteIcons}/iconAlert.png" width="24" height="24" alert="Error alert icon"/> <div id="errorAlert" role="alert"><img src="${urls.siteIcons}/iconAlert.png" width="24" height="24" alert="Error alert icon"/>
<p>${errorMessage}</p> <p>${errorMessage}</p>
</div> </div>
</#if> </#if>
<form id="log-in-form" action="${formAction}" method="post" name="log-in-form" /> <form role="form" id="log-in-form" action="${formAction}" method="post" name="log-in-form" required />
<label for="newPassword">New Password</label> <label for="newPassword">New Password</label>
<input id="newPassword" class="focus" type="password" name="newPassword" /> <input id="newPassword" class="focus" type="password" name="newPassword" required />
<p class="passwordNote">Minimum of 6 characters in length.</p> <p class="passwordNote">Minimum of 6 characters in length.</p>
<label for="confirmPassword">Confirm Password</label> <label for="confirmPassword">Confirm Password</label>
<input id="confirmPassword" type="password" name="confirmPassword" /> <input id="confirmPassword" type="password" name="confirmPassword" />
<input name="passwordChangeForm" type="submit" class="submit" value="Save Changes"/> <span class="or">or <a class="cancel" href="${cancelUrl}">Cancel</a></span>
<p class="submit"><input name="passwordChangeForm" type="submit" class="green button" value="Log in"/> <span class="or">or <a class="cancel" href="${cancelUrl}">Cancel</a></span></p>
</form> </form>
</section> </section>
</#macro> </#macro>