Centering everything, the loading.gif also

centering new email account form horizontally and vertical adjustments also

This is a combination of 6 commits.
centering the <new email> form

stupid error in blind css

changing the structure of the markdown arround  <new email> form for it to be included into the #app-content div, and therefor it can be centered while keeping absolute positionning, in respect with the rest of the cascading css structure of the app

CSS adaptation of the new email account form

adaptation of the css structure now that content is truly relatively positionned; removes a bit of top margin to now have scroll in the form on small heighed screens

switching to a cleaner aligning method

now adding padding to the top to 'center' the form vertically

also centering the loading.gif to the form, forgot to do so.

syntax correction based on Codacy

1 files changed, 96 insertions, 94 deletions

diff --git a/templates/index.php b/templates/index.php
index 57c34e1b6..84492caae 100644
--- a/templates/index.php
+++ b/templates/index.php
@@ -264,9 +264,7 @@ script('mail', 'jquery-visibility');
 		<div id="mail_messages" class="icon-loading">
 		</div>
 
-		<div id="mail-message" class="icon-loading">
-		</div>
-	</div>
+
 
 	<form id="mail-setup" class="hidden" method="post">
 		<div class="hidden-visually">
@@ -282,104 +280,108 @@ script('mail', 'jquery-visibility');
 				<div class="icon-mail"></div>
 				<h2><?php p($l->t('Connect your mail account')) ?></h2>
 			</div>
+					<p class="grouptop">
+						<input type="text" name="mail-account-name" id="mail-account-name"
+							placeholder="<?php p($l->t('Name')); ?>"
+							value="<?php p(\OCP\User::getDisplayName(\OCP\User::getUser())); ?>"
+							autofocus />
+						<label for="mail-address" class="infield"><?php p($l->t('Mail Address')); ?></label>
+					</p>
+					<p class="groupmiddle">
+						<input type="email" name="mail-address" id="mail-address"
+							placeholder="<?php p($l->t('Mail Address')); ?>"
+							value="<?php p(\OCP\Config::getUserValue(\OCP\User::getUser(), 'settings', 'email', '')); ?>"
+							required />
+						<label for="mail-address" class="infield"><?php p($l->t('Mail Address')); ?></label>
+					</p>
+					<p class="groupbottom">
+						<input type="password" name="mail-password" id="mail-password"
+							placeholder="<?php p($l->t('IMAP Password')); ?>" value=""
+							required />
+						<label for="mail-password" class="infield"><?php p($l->t('IMAP Password')); ?></label>
+					</p>
 
-			<p class="grouptop">
-				<input type="text" name="mail-account-name" id="mail-account-name"
-					placeholder="<?php p($l->t('Name')); ?>"
-					value="<?php p(\OCP\User::getDisplayName(\OCP\User::getUser())); ?>"
-					autofocus />
-				<label for="mail-address" class="infield"><?php p($l->t('Mail Address')); ?></label>
-			</p>
-			<p class="groupmiddle">
-				<input type="email" name="mail-address" id="mail-address"
-					placeholder="<?php p($l->t('Mail Address')); ?>"
-					value="<?php p(\OCP\Config::getUserValue(\OCP\User::getUser(), 'settings', 'email', '')); ?>"
-					required />
-				<label for="mail-address" class="infield"><?php p($l->t('Mail Address')); ?></label>
-			</p>
-			<p class="groupbottom">
-				<input type="password" name="mail-password" id="mail-password"
-					placeholder="<?php p($l->t('IMAP Password')); ?>" value=""
-					required />
-				<label for="mail-password" class="infield"><?php p($l->t('IMAP Password')); ?></label>
-			</p>
 
+					<a id="mail-setup-manual-toggle" class="icon-caret-dark"><?php p($l->t('Manual configuration')); ?></a>
 
-			<a id="mail-setup-manual-toggle" class="icon-caret-dark"><?php p($l->t('Manual configuration')); ?></a>
+					<div id="mail-setup-manual" style="display:none;">
+						<p class="grouptop">
+							<input type="text" name="mail-imap-host" id="mail-imap-host"
+								placeholder="<?php p($l->t('IMAP Host')); ?>"
+								value="" />
+							<label for="mail-imap-host" class="infield"><?php p($l->t('IMAP Host')); ?></label>
+						</p>
+						<p class="groupmiddle" id="mail-imap-ssl">
+								<label for="mail-imap-sslmode"><?php p($l->t('IMAP security')); ?></label>
+								<select name="mail-imap-sslmode" id="mail-imap-sslmode" title="<?php p($l->t('IMAP security')); ?>">
+									<option value="none"><?php p($l->t('None')); ?></option>
+									<option value="ssl"><?php p($l->t('SSL/TLS')); ?></option>
+									<option value="tls"><?php p($l->t('STARTTLS')); ?></option>
+								</select>
+						</p>
+						<p class="groupmiddle">
+							<input type="number" name="mail-imap-port" id="mail-imap-port"
+								placeholder="<?php p($l->t('IMAP Port')); ?>"
+								value="143" />
+							<label for="mail-imap-port" class="infield"><?php p($l->t('IMAP Port')); ?></label>
+						</p>
+						<p class="groupmiddle">
+							<input type="text" name="mail-imap-user" id="mail-imap-user"
+								placeholder="<?php p($l->t('IMAP User')); ?>"
+								value="" />
+							<label for="mail-imap-user" class="infield"><?php p($l->t('IMAP User')); ?></label>
+						</p>
+						<p class="groupbottom">
+							<input type="password" name="mail-imap-password" id="mail-imap-password"
+								placeholder="<?php p($l->t('IMAP Password')); ?>" value=""
+								required />
+							<label for="mail-imap-password" class="infield"><?php p($l->t('IMAP Password')); ?></label>
+						</p>
 
-			<div id="mail-setup-manual" style="display:none;">
-				<p class="grouptop">
-					<input type="text" name="mail-imap-host" id="mail-imap-host"
-						placeholder="<?php p($l->t('IMAP Host')); ?>"
-						value="" />
-					<label for="mail-imap-host" class="infield"><?php p($l->t('IMAP Host')); ?></label>
-				</p>
-				<p class="groupmiddle" id="mail-imap-ssl">
-						<label for="mail-imap-sslmode"><?php p($l->t('IMAP security')); ?></label>
-						<select name="mail-imap-sslmode" id="mail-imap-sslmode" title="<?php p($l->t('IMAP security')); ?>">
-							<option value="none"><?php p($l->t('None')); ?></option>
-							<option value="ssl"><?php p($l->t('SSL/TLS')); ?></option>
-							<option value="tls"><?php p($l->t('STARTTLS')); ?></option>
-						</select>
-				</p>
-				<p class="groupmiddle">
-					<input type="number" name="mail-imap-port" id="mail-imap-port"
-						placeholder="<?php p($l->t('IMAP Port')); ?>"
-						value="143" />
-					<label for="mail-imap-port" class="infield"><?php p($l->t('IMAP Port')); ?></label>
-				</p>
-				<p class="groupmiddle">
-					<input type="text" name="mail-imap-user" id="mail-imap-user"
-						placeholder="<?php p($l->t('IMAP User')); ?>"
-						value="" />
-					<label for="mail-imap-user" class="infield"><?php p($l->t('IMAP User')); ?></label>
-				</p>
-				<p class="groupbottom">
-					<input type="password" name="mail-imap-password" id="mail-imap-password"
-						placeholder="<?php p($l->t('IMAP Password')); ?>" value=""
-						required />
-					<label for="mail-imap-password" class="infield"><?php p($l->t('IMAP Password')); ?></label>
-				</p>
+						<p class="grouptop">
+							<input type="text" name="mail-smtp-host" id="mail-smtp-host"
+								placeholder="<?php p($l->t('SMTP Host')); ?>"
+								value="" />
+							<label for="mail-smtp-host" class="infield"><?php p($l->t('SMTP Host')); ?></label>
+						</p>
+						<p class="groupmiddle" id="mail-smtp-ssl">
+							<label for="mail-smtp-sslmode"><?php p($l->t('SMTP security')); ?></label>
+							<select name="mail-smtp-sslmode" id="mail-smtp-sslmode" title="<?php p($l->t('SMTP security')); ?>">
+								<option value="none"><?php p($l->t('None')); ?></option>
+								<option value="ssl"><?php p($l->t('SSL/TLS')); ?></option>
+								<option value="tls"><?php p($l->t('STARTTLS')); ?></option>
+							</select>
+						</p>
+						<p class="groupmiddle">
+							<input type="number" name="mail-smtp-port" id="mail-smtp-port"
+								placeholder="<?php p($l->t('SMTP Port')); ?>"
+								value="587" />
+							<label for="mail-smtp-port" class="infield"><?php p($l->t('SMTP Port (default 25, ssl 465)')); ?></label>
+						</p>
+						<p class="groupmiddle">
+							<input type="text" name="mail-smtp-user" id="mail-smtp-user"
+								placeholder="<?php p($l->t('SMTP User')); ?>"
+								value="" />
+							<label for="mail-smtp-user" class="infield"><?php p($l->t('SMTP User')); ?></label>
+						</p>
+						<p class="groupbottom">
+							<input type="password" name="mail-smtp-password" id="mail-smtp-password"
+								placeholder="<?php p($l->t('SMTP Password')); ?>" value=""
+								required />
+							<label for="mail-smtp-password" class="infield"><?php p($l->t('SMTP Password')); ?></label>
+						</p>
+					</div>
 
-				<p class="grouptop">
-					<input type="text" name="mail-smtp-host" id="mail-smtp-host"
-						placeholder="<?php p($l->t('SMTP Host')); ?>"
-						value="" />
-					<label for="mail-smtp-host" class="infield"><?php p($l->t('SMTP Host')); ?></label>
-				</p>
-				<p class="groupmiddle" id="mail-smtp-ssl">
-					<label for="mail-smtp-sslmode"><?php p($l->t('SMTP security')); ?></label>
-					<select name="mail-smtp-sslmode" id="mail-smtp-sslmode" title="<?php p($l->t('SMTP security')); ?>">
-						<option value="none"><?php p($l->t('None')); ?></option>
-						<option value="ssl"><?php p($l->t('SSL/TLS')); ?></option>
-						<option value="tls"><?php p($l->t('STARTTLS')); ?></option>
-					</select>
-				</p>
-				<p class="groupmiddle">
-					<input type="number" name="mail-smtp-port" id="mail-smtp-port"
-						placeholder="<?php p($l->t('SMTP Port')); ?>"
-						value="587" />
-					<label for="mail-smtp-port" class="infield"><?php p($l->t('SMTP Port (default 25, ssl 465)')); ?></label>
-				</p>
-				<p class="groupmiddle">
-					<input type="text" name="mail-smtp-user" id="mail-smtp-user"
-						placeholder="<?php p($l->t('SMTP User')); ?>"
-						value="" />
-					<label for="mail-smtp-user" class="infield"><?php p($l->t('SMTP User')); ?></label>
-				</p>
-				<p class="groupbottom">
-					<input type="password" name="mail-smtp-password" id="mail-smtp-password"
-						placeholder="<?php p($l->t('SMTP Password')); ?>" value=""
-						required />
-					<label for="mail-smtp-password" class="infield"><?php p($l->t('SMTP Password')); ?></label>
-				</p>
-			</div>
+
+					<img id="connect-loading" src="<?php print_unescaped(OCP\Util::imagePath('core', 'loading.gif')); ?>" style="display:none;" />
+					<input type="submit" id="auto_detect_account" class="connect primary" value="<?php p($l->t('Connect')); ?>"/>
+				</fieldset>
+			</form>
 
 
-			<img id="connect-loading" src="<?php print_unescaped(OCP\Util::imagePath('core', 'loading.gif')); ?>" style="display:none;" />
-			<input type="submit" id="auto_detect_account" class="connect primary" value="<?php p($l->t('Connect')); ?>"/>
-		</fieldset>
-	</form>
 
+		<div id="mail-message" class="icon-loading">
+		</div>
+	</div>
 
 </div>