Fix login dialog layout.

Rearrange login dialog distinguish better between logging und registering.
This commit is contained in:
Andreas Neustifter 2018-04-23 19:00:47 +00:00
parent 5d1d0d1a9f
commit 2d8a4a923f
3 changed files with 67 additions and 8 deletions

View file

@ -4,11 +4,14 @@
<div id="login-group" role="group" aria-labelledby="login-head"> <div id="login-group" role="group" aria-labelledby="login-head">
<input type="hidden" name="auth-params" value="login" /> <input type="hidden" name="auth-params" value="login" />
<div id="login-head" class="sr-only">{{$login}}</div> <h3 id="login-head" class="sr-only">{{$login}}</h3>
<div id="login_standard"> <div id="login_standard">
{{include file="field_input.tpl" field=$lname}} {{include file="field_input.tpl" field=$lname}}
{{include file="field_password.tpl" field=$lpassword}} {{include file="field_password.tpl" field=$lpassword}}
<div id="login-lost-password-link">
<a href="lostpass" title="{{$lostpass|escape:'html'}}" id="lost-password-link" >{{$lostlink}}</a>
</div>
</div> </div>
{{if $openid}} {{if $openid}}
@ -17,17 +20,12 @@
</div> </div>
{{/if}} {{/if}}
{{include file="field_checkbox.tpl" field=$lremember}}
<div id="login-extra-links">
{{if $register}}<a href="register" title="{{$register.title|escape:'html'}}" id="register-link">{{$register.desc}}</a>{{/if}}
<a href="lostpass" title="{{$lostpass|escape:'html'}}" id="lost-password-link" >{{$lostlink}}</a>
</div>
<div id="login-submit-wrapper" > <div id="login-submit-wrapper" >
<input type="submit" name="submit" id="login-submit-button" value="{{$login|escape:'html'}}" /> <input type="submit" name="submit" id="login-submit-button" value="{{$login|escape:'html'}}" />
</div> </div>
{{include file="field_checkbox.tpl" field=$lremember}}
{{foreach $hiddens as $k=>$v}} {{foreach $hiddens as $k=>$v}}
<input type="hidden" name="{{$k}}" value="{{$v|escape:'html'}}" /> <input type="hidden" name="{{$k}}" value="{{$v|escape:'html'}}" />
{{/foreach}} {{/foreach}}
@ -35,5 +33,9 @@
</div> </div>
</form> </form>
<div id="login-extra-links">
<h3 id="login-head" class="sr-only">{{$register.title|escape:'html'}}</h3>
{{if $register}}<a href="register" title="{{$register.title|escape:'html'}}" id="register-link">{{$register.desc}}</a>{{/if}}
</div>
<script type="text/javascript"> $(document).ready(function() { $("#id_{{$lname.0}}").focus();} );</script> <script type="text/javascript"> $(document).ready(function() { $("#id_{{$lname.0}}").focus();} );</script>

View file

@ -91,6 +91,13 @@ nav ul {
width: 100% !important; height: 110px !important; width: 100% !important; height: 110px !important;
} }
#login-extra-links, #login-form {
/* width: 341px; */
width: 100%;
}
#id_remember_label {
width: unset;
}
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {

View file

@ -2422,10 +2422,60 @@ aside #div_id_remember label {
float: inherit; float: inherit;
} }
#login-group {
overflow: hidden;
}
#login-head {
position: unset;
width: unset;
height: unset;
margin-bottom: 10px;
}
div #wrapper_username {
padding: 0px;
}
div #wrapper_password {
padding: 0px;
margin-bottom: 0px;
}
#div_id_remember {
float: left;
width: unset;
}
#remember_tip {
display: none;
}
#login-submit-wrapper {
float: right;
}
#login-form {
margin-top: 20px;
}
#login-extra-links, #login-form {
/* width: 341px; */
width: 341px;
clear: both;
border-top: 3px solid white;
padding-top: 20px;
}
aside div #login-submit-button { aside div #login-submit-button {
margin-left:0px; margin-left:0px;
} }
#login-lost-password-link {
margin-bottom: 10px;
float: right;
}
aside #register-link, aside #lost-password-link { aside #register-link, aside #lost-password-link {
display: block; display: block;
} }