From 2d8a4a923f0ff02fff2aa74ac2a2aea4d860fe41 Mon Sep 17 00:00:00 2001
From: Andreas Neustifter <andreas.neustifter@gmail.com>
Date: Mon, 23 Apr 2018 19:00:47 +0000
Subject: [PATCH] Fix login dialog layout.

Rearrange login dialog distinguish better between logging und registering.
---
 view/templates/login.tpl   | 18 ++++++++------
 view/theme/vier/mobile.css |  7 ++++++
 view/theme/vier/style.css  | 50 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/view/templates/login.tpl b/view/templates/login.tpl
index e1e8c5f3a..c2dac46f6 100644
--- a/view/templates/login.tpl
+++ b/view/templates/login.tpl
@@ -4,11 +4,14 @@
 <div id="login-group" role="group" aria-labelledby="login-head">
 	<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">
 	{{include file="field_input.tpl" field=$lname}}
 	{{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>
 	
 	{{if $openid}}
@@ -17,16 +20,11 @@
 		</div>
 	{{/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" >
 		<input type="submit" name="submit" id="login-submit-button" value="{{$login|escape:'html'}}" />
 	</div>
+
+	{{include file="field_checkbox.tpl" field=$lremember}}
 	
 	{{foreach $hiddens as $k=>$v}}
 		<input type="hidden" name="{{$k}}" value="{{$v|escape:'html'}}" />
@@ -35,5 +33,9 @@
 </div>
 </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>
diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index 66721a1b8..b528ca4bd 100644
--- a/view/theme/vier/mobile.css
+++ b/view/theme/vier/mobile.css
@@ -91,6 +91,13 @@ nav ul {
     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) {
diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index 710c76f6a..aad5d4384 100644
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -2422,10 +2422,60 @@ aside #div_id_remember label {
  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 {
   margin-left:0px;
 }
 
+#login-lost-password-link {
+  margin-bottom: 10px;
+  float: right;
+}
+
 aside #register-link, aside #lost-password-link {
   display: block;
 }