Clean up HTML structure, fix labels.

Signed-off-by: Marin Treselj <marin@pixelipo.com>

2 files changed, 26 insertions, 60 deletions

diff --git a/settings/css/settings.css b/settings/css/settings.css
index f20c13eacb3..5a9e4c7f053 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -2,24 +2,11 @@
  This file is licensed under the Affero General Public License version 3 or later.
  See the COPYING-README file. */
 
-select#timezone {
-	width: 15em;
-}
-
-select#languageinput {
-	width: 17em;
-}
-
 input#openid, input#webdav {
 	width: 20em;
 }
 
-input#pass1, input#pass2, input#passwordbutton {
-	width: 17em;
-}
-
 /* PERSONAL */
-
 .clear {
 	clear: both;
 }
@@ -37,7 +24,6 @@ input#pass1, input#pass2, input#passwordbutton {
 .icon-federation-menu {
 	width: 44px;
 	margin: -6px;
-	margin-right: 10px;
 	float: right;
 	text-align: right;
 }
@@ -75,12 +61,6 @@ input#pass1, input#pass2, input#passwordbutton {
 	background-image: url('../img/password.svg?v=1');
 }
 
-#avatarform {
-	min-width: 145px;
-	padding-right: 0;
-	margin-top: -2px;
-}
-
 #avatarform .avatardiv {
 	margin-bottom: 10px;
 }
@@ -152,18 +132,14 @@ input#pass1, input#pass2, input#passwordbutton {
 
 #personal-settings-avatar-container,
 #personal-settings-group-container {
-	float: left;
-}
-
-.profile-settings-container {
-	position: relative;
-	margin-left: 215px;
-	max-width: 600px;
+	display: inline-block;
+	vertical-align: top;
+	min-width: 205px;
 }
 
+.profile-settings-container,
 .personal-settings-container {
-	position: relative;
-	margin-left: 215px;
+	display: inline-block;
 	max-width: 600px;
 }
 
@@ -174,13 +150,7 @@ input#pass1, input#pass2, input#passwordbutton {
 .personal-settings-container > div,
 .profile-settings-container > div {
 	float: left;
-	height: 100px;
-	min-width: 300px;
-}
-
-.personal-settings-container.no-edit > div {
-	height: 20px;
-	min-width: 200px;
+	width: 300px;
 }
 
 #avatarform > h2,
@@ -202,24 +172,32 @@ input#pass1, input#pass2, input#passwordbutton {
 	cursor: pointer;
 }
 
+.personal-show-container,
 .personal-settings-setting-box input[type="text"],
 .personal-settings-setting-box input[type="email"],
-.personal-settings-setting-box input[type="tel"] {
-	width: 17em;
+.personal-settings-setting-box input[type="tel"],
+select#timezone,
+select#languageinput,
+input#pass1,
+input#pass2,
+input#passwordbutton {
+	width: 100%;
 }
 
 .personal-settings-container > div > form span[class^="icon-checkmark"] {
-	position: absolute;
-	left: 228px;
-	top: 82px;
+	position: relative;
+	left: 90%;
+	top: -44px;
 	pointer-events: none;
+	width: 44px;
 }
 
 /* verify accounts */
 .personal-settings-container .verify {
-	position: absolute;
-	right: 14px;
-	top: 70px;
+	position: relative;
+	left: 100%;
+	top: 0;
+	height: 0;
 }
 
 .personal-settings-container .verify img {
@@ -285,12 +263,6 @@ input#pass1, input#pass2, input#passwordbutton {
 	min-width: 60%;
 }
 
-#avatarform,
-#passwordform {
-	margin-bottom: 0;
-	padding-bottom: 0;
-}
-
 #groups {
 	overflow-wrap: break-word;
 	width: 125px;
@@ -1000,10 +972,6 @@ span.version {
 	margin: 8px 0;
 }
 
-form.section {
-	position: relative;
-}
-
 .followupsection {
 	display: block;
 	padding: 0 30px 30px 30px;
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index ee831f8f4f6..e0655b393d2 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/settings/templates/settings/personal/personal.info.php
@@ -135,7 +135,6 @@ vendor_style('jcrop/css/jquery.Jcrop');
 					<span><?php if(isset($_['email']) && !empty($_['email'])) { p($_['email']); } else { p($l->t('No email address set')); }?></span>
 				<?php } ?>
 				<?php if($_['displayNameChangeSupported']) { ?>
-					<br />
 					<em><?php p($l->t('For password reset and notifications')); ?></em>
 				<?php } ?>
 				<span class="icon-checkmark hidden"/>
@@ -308,7 +307,6 @@ vendor_style('jcrop/css/jquery.Jcrop');
 						</option>
 					<?php endforeach;?>
 				</select>
-				<br>
 				<a href="https://www.transifex.com/nextcloud/nextcloud/"
 					target="_blank" rel="noreferrer">
 					<em><?php p($l->t('Help translate'));?></em>
@@ -324,12 +322,12 @@ vendor_style('jcrop/css/jquery.Jcrop');
 			<form id="passwordform" class="section">
 				<h2 class="inlineblock"><?php p($l->t('Password'));?></h2>
 				<div id="password-error-msg" class="msg success inlineblock" style="display: none;">Saved</div>
-				<br>
+
 				<label for="pass1" class="hidden-visually"><?php p($l->t('Current password')); ?>: </label>
 				<input type="password" id="pass1" name="oldpassword"
 					placeholder="<?php p($l->t('Current password'));?>"
 					autocomplete="off" autocapitalize="none" autocorrect="off" />
-				<br>
+
 				<div class="personal-show-container">
 					<label for="pass2" class="hidden-visually"><?php p($l->t('New password'));?>: </label>
 					<input type="password" id="pass2" name="newpassword"
@@ -338,9 +336,9 @@ vendor_style('jcrop/css/jquery.Jcrop');
 						autocomplete="off" autocapitalize="none" autocorrect="off" />
 					<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="personal-show-label"></label>
 				</div>
-				<br>
+
 				<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
-				<br/>
+
 			</form>
 			<?php
 			}