Merge pull request #620 from poikilotherm/fix_mobile_layout

Fix for #618, correcting the login layout on mobile screens.

modules/core/templates/loginuserpass.php

@@ -36,7 +36,7 @@ if ($this->data['errorcode'] !== null) {
     <form action="?" method="post" name="f">
         <table>
             <tr>
-                <td rowspan="2" id="loginicon">
+                <td rowspan="2" class="loginicon">
                     <img alt=""
                         src="/<?php echo $this->data['baseurlpath']; ?>resources/icons/experience/gtk-dialog-authentication.48x48.png" />
                 </td>
@@ -146,8 +146,8 @@ if ($this->data['errorcode'] !== null) {
                 <?php
             }
             ?>
-            <tr id="regularsubmit">
-                <td></td><td></td>
+            <tr id="submit">
+                <td class="loginicon"></td><td></td>
                 <td>
                     <button class="btn"
                             onclick="this.value='<?php echo $this->t('{login:processing}'); ?>';
@@ -156,14 +156,6 @@ if ($this->data['errorcode'] !== null) {
                     </button>
                 </td>
             </tr>
-            <tr id="mobilesubmit">
-                <td></td><td></td>
-                <td>
-                    <button class="btn" tabindex="6">
-                        <?php echo $this->t('{login:login_button}'); ?>
-                    </button>
-                </td>
-            </tr>
         </table>
         <?php
         foreach ($this->data['stateparams'] as $name => $value) {

www/resources/default.css

@@ -58,7 +58,7 @@ a:link, a:visited {
 }
 a:visited {
 	color: #999;
-} 
+}
 
 a:hover, a:active {
 	color: #069;
@@ -91,11 +91,11 @@ dt {
 
 #wrap {
 	background: #fff;
-	
+
 	border: 1px solid #fff;
 	position: relative;
 	text-align: left;
-	
+
 	margin: 20px 75px 2em 75px;
 	max-width: 950px;
 }
@@ -114,7 +114,7 @@ dt {
 	text-decoration: none;
 	color: #333;
 	border-bottom: 1px solid #333;
-	
+
 }
 
 #header {
@@ -284,15 +284,15 @@ th.rowtitle {
 }
 
 .metadatabox {
-	overflow: scroll; 
-	border: 1px solid #eee; 
+	overflow: scroll;
+	border: 1px solid #eee;
 	padding: 0.5em;
 	border-radius: 3px;
 }
 div.preferredidp {
 	border: 1px dashed #ccc;
 	background: #eee;
-	padding: 2px 2em 2px 2em;	
+	padding: 2px 2em 2px 2em;
 }
 
 table.modules {
@@ -322,14 +322,14 @@ table.attributes tr.even td {
 }
 
 table.attributes tr td {
-	border-bottom: 1px solid #bbb; 
+	border-bottom: 1px solid #bbb;
 	border-left: 0px;
-	border-right: 0px;	
+	border-right: 0px;
 	background: #fff;
 	padding-top: 5px;
 	padding-left: 1em;
 	padding-right: 1em;
-	
+
 	vertical-align: top;
 }
 
@@ -374,12 +374,12 @@ caption {
 	float: left;
 }
 
-#mobilesubmit, #mobile_remember_username, #mobile_remember_me {
+#mobile_remember_username, #mobile_remember_me {
 	display: none;
 }
 
 @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
-	#header, #languagebar, #footer, .erroricon, #loginicon, .logintext, #regularsubmit,
+	#header, #languagebar, #footer, .erroricon, .loginicon, .logintext,
 	#regular_remember_username, #regular_remember_me {
 		display: none;
 	}
@@ -392,7 +392,7 @@ caption {
 	h1,h2,h3,h4 {
 		font-size: 110%;
 	}
-		
+
 	#content {
 		margin-bottom: 10px;
 		padding: 0;