Fixed login widget for vivo-basic
This commit is contained in:
mb863
parent
ca76cfa4bd
commit
a3b8550e29
2 changed files with 157 additions and 146 deletions
|
|
@ -1,20 +1,113 @@
|
||||||
/* $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 */
|
||||||
|
|
||||||
|
#log-in-form label,
|
||||||
|
#log-in-form input.text,
|
||||||
|
#log-in-form #password,
|
||||||
|
#log-in-form #confirmPassword{
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
#log-in-form label.label-remember-me{
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
#log-in-form p.submit {
|
||||||
|
float:left;
|
||||||
|
margin-bottom:0;
|
||||||
|
}
|
||||||
|
#log-in-form input.checkbox-remember-me {
|
||||||
|
float:left;
|
||||||
|
height:14px;
|
||||||
|
padding:0;
|
||||||
|
margin-top:13px;
|
||||||
|
margin-left:20px;
|
||||||
|
}
|
||||||
|
#log-in-form .label-remember-me {
|
||||||
|
display:block;
|
||||||
|
float:left;
|
||||||
|
width:100px;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
margin-top:10px;
|
||||||
|
margin-right:25px;
|
||||||
|
padding-right:10px;
|
||||||
|
}
|
||||||
|
p.forgot-password {
|
||||||
|
clear:both;
|
||||||
|
margin-bottom:0;
|
||||||
|
}
|
||||||
|
p.request-account {
|
||||||
|
width:219px;
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#errorAlert {
|
||||||
|
color:#900;
|
||||||
|
padding:0px;
|
||||||
|
margin-bottom:5px;
|
||||||
|
height:30px;
|
||||||
|
}
|
||||||
|
#errorAlert img {
|
||||||
|
float:left;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
vertical-align:middle;
|
||||||
|
}
|
||||||
|
#errorAlert p {
|
||||||
|
padding-left:30px;
|
||||||
|
font-size:0.9em;
|
||||||
|
line-height:30px;
|
||||||
|
}
|
||||||
|
#confirmationAlert {
|
||||||
|
color:#169f43;
|
||||||
|
padding:0px;
|
||||||
|
margin-bottom:5px;
|
||||||
|
height:30px;
|
||||||
|
}
|
||||||
|
#confirmationAlert img {
|
||||||
|
float:left;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
vertical-align:middle;
|
||||||
|
}
|
||||||
|
#confirmationAlert p {
|
||||||
|
padding-left:30px;
|
||||||
|
font-size:0.9em;
|
||||||
|
line-height:30px;
|
||||||
|
}
|
||||||
|
.formFieldAlert {
|
||||||
|
border:2px solid #900;
|
||||||
|
}
|
||||||
|
.red {
|
||||||
|
color:#900;
|
||||||
|
}
|
||||||
|
p.passwordNote {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
margin-top:-8px;
|
||||||
|
font-size:0.8em;
|
||||||
|
color:#615e5e;
|
||||||
|
padding-top:15px;
|
||||||
|
}
|
||||||
|
.or {
|
||||||
|
display:inline;
|
||||||
|
vertical-align:middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
#formLogin {
|
#formLogin {
|
||||||
width:600px;
|
width:600px;
|
||||||
padding:0px;
|
padding:0px;
|
||||||
margin:0px;
|
margin:0px;
|
||||||
text-align:left;
|
text-align:left;
|
||||||
|
border:1px solid red;
|
||||||
}
|
}
|
||||||
|
|
||||||
.noOuterBox {
|
.noOuterBox {
|
||||||
width:340px;
|
width:340px;
|
||||||
padding:0px;
|
padding:0px;
|
||||||
border: none;
|
border: none;
|
||||||
margin:0px;
|
margin:0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#formLogin h2 {
|
#formLogin h2 {
|
||||||
font-size:1.3em;
|
font-size:1.3em;
|
||||||
line-height:1em;
|
line-height:1em;
|
||||||
|
|
@ -22,8 +115,6 @@
|
||||||
margin-bottom:1em;
|
margin-bottom:1em;
|
||||||
color:#111;
|
color:#111;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#formLogin h6 {
|
#formLogin h6 {
|
||||||
font-size:1.2em;
|
font-size:1.2em;
|
||||||
line-height:1em;
|
line-height:1em;
|
||||||
|
|
@ -31,18 +122,15 @@
|
||||||
margin-bottom:1em;
|
margin-bottom:1em;
|
||||||
color:#111;
|
color:#111;
|
||||||
}
|
}
|
||||||
|
|
||||||
#formLogin form {
|
#formLogin form {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#formLogin label {
|
#formLogin label {
|
||||||
display:block;
|
display:block;
|
||||||
margin-bottom:0.5em;
|
margin-bottom:0.5em;
|
||||||
font-weight:bold;
|
font-weight:bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
#formLogin label span {
|
#formLogin label span {
|
||||||
color:#900;
|
color:#900;
|
||||||
}
|
}
|
||||||
|
|
@ -52,100 +140,22 @@
|
||||||
margin-bottom:1.5em;
|
margin-bottom:1.5em;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#formLogin textarea {
|
#formLogin textarea {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
display:block;
|
display:block;
|
||||||
margin-bottom:1.5em;
|
margin-bottom:1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#formLogin .checkBox {
|
#formLogin .checkBox {
|
||||||
display:inline;
|
display:inline;
|
||||||
width:1em;
|
width:1em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#formLogin p.small {
|
#formLogin p.small {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#formLogin input.submit {
|
#formLogin input.submit {
|
||||||
width: auto;
|
width: auto;
|
||||||
padding: 0 0.9em;
|
padding: 0 0.9em;
|
||||||
display:inline;
|
display:inline;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
.requestAccount {
|
|
||||||
padding: 1em 0 0 2em;
|
|
||||||
margin-bottom:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.requestAccountNoOutterBox {
|
|
||||||
padding: 1em 0 0 0;
|
|
||||||
margin-bottom:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#errorAlert {
|
|
||||||
color:#900;
|
|
||||||
padding:0px;
|
|
||||||
margin-bottom:5px;
|
|
||||||
height:30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#errorAlert img {
|
|
||||||
float:left;
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
vertical-align:middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
#errorAlert p {
|
|
||||||
padding-left:35px;
|
|
||||||
font-size:0.9em;
|
|
||||||
line-height:30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
##confirmationAlert {
|
|
||||||
color:#169f43;
|
|
||||||
padding:0px;
|
|
||||||
margin-bottom:5px;
|
|
||||||
height:30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
##confirmationAlert img {
|
|
||||||
float:left;
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
vertical-align:middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
#confirmationAlert p {
|
|
||||||
padding-left:30px;
|
|
||||||
font-size:0.9em;
|
|
||||||
line-height:30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formFieldAlert {
|
|
||||||
border:2px solid #900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.red {
|
|
||||||
color:#900;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loginFormAndLinks {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
p.passwordNote {
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
margin-top:-8px;
|
|
||||||
font-size:0.8em;
|
|
||||||
color:#615e5e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.or {
|
|
||||||
display:inline;
|
|
||||||
vertical-align:middle;
|
|
||||||
}
|
|
||||||
|
|
@ -31,14 +31,12 @@
|
||||||
</#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" />
|
||||||
|
|
||||||
<form id="log-in-form" action="${formAction}" method="post" name="log-in-form" />
|
|
||||||
<label for="email">Email</label>
|
<label for="email">Email</label>
|
||||||
<input class="text-field" name="loginName" id="loginName" type="text" required />
|
<input class="text-field" name="loginName" id="loginName" type="text" required />
|
||||||
|
|
||||||
|
|
@ -53,7 +51,7 @@
|
||||||
|
|
||||||
<p class="forgot-password"><a href="#">Forgot your password?</a></p>
|
<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>
|
<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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue