Move personal settings to css grid layout

Signed-off-by: Julius Härtl <jus@bitgrid.net>

2 files changed, 136 insertions, 78 deletions

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index b5b4ecf1e37..a040ee6195a 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -100,23 +100,20 @@ input {
 	}
 }
 
-#personal-settings-avatar-container,
-#personal-settings-group-container {
-	display: inline-block;
+#personal-settings-avatar-container {
+	display: inline-grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 2fr 1fr 1fr;
 	vertical-align: top;
-	width: 225px;
 }
 
 .profile-settings-container {
-	display: inline-block;
-	max-width: 600px;
-	margin-bottom: 20px;
-	> div {
-		float: left;
-		width: 300px;
-	}
+	display: inline-grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr 2fr 1fr;
 }
 
+
 .icon-federation-menu {
 	padding-left: 16px;
 	background-size: 16px;
@@ -157,21 +154,84 @@ input {
 	}
 }
 
+#personal-settings {
+	display: grid;
+	padding: 20px;
+	max-width: 1500px;
+	grid-template-columns:1fr 2fr 1fr;
+	.section {
+		padding: 10px 10px;
+	}
+}
+
+
+@media (min-width: 1200px) and (max-width: 1400px) {
+	#personal-settings {
+		display: grid;
+		grid-template-columns: 1fr 2fr;
+		#personal-settings-avatar-container {
+			grid-template-columns: 1fr;
+			grid-template-rows: 1fr;
+		}
+		.personal-settings-container {
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: 1fr 1fr 1fr;
+		}
+		.profile-settings-container {
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: 1fr;
+			grid-column: 2;
+		}
+	}
+}
+
+@media (max-width: 1200px) {
+	#personal-settings {
+		display: grid;
+		grid-template-columns: 1fr;
+		#personal-settings-avatar-container {
+			grid-template-rows: 1fr;
+		}
+		.personal-settings-container {
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: 1fr 1fr 1fr;
+		}
+		.profile-settings-container {
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: 1fr;
+		}
+	}
+}
+
+@media (max-width: 560px) {
+	#personal-settings {
+		display: grid;
+		grid-template-columns: 1fr;
+		#personal-settings-avatar-container {
+			grid-template-rows: 1fr;
+		}
+		.personal-settings-container {
+			grid-template-columns: 1fr;
+			grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
+		}
+		.profile-settings-container {
+			grid-template-columns: 1fr;
+			grid-template-rows: 1fr 1fr;
+		}
+	}
+}
+
 .personal-settings-container {
-	display: inline-block;
-	max-width: 600px;
-	margin-bottom: 20px;
+	display: inline-grid;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: 1fr 1fr 1fr 1fr;
 	&:after {
 		clear: both;
 	}
-	&:not(#personal-settings-avatar-container) > div {
-		float: left;
-		width: 300px;
-	}
 	> div {
 		h2 {
 			position: relative;
-			margin-bottom: 5px;
+			margin-bottom: 12px;
 			display: inline-flex;
 			flex-wrap: nowrap;
 			justify-content: space-between;
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index 9f1f83621d2..24f89076275 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/settings/templates/settings/personal/personal.info.php
@@ -100,6 +100,15 @@ vendor_style('jcrop/css/jquery.Jcrop');
 				<?php } ?>
 			</form>
 		</div>
+		<div class="personal-settings-setting-box personal-settings-group-box">
+			<div id="groups" class="section">
+				<h2><?php p($l->t('Groups')); ?></h2>
+				<p><?php p($l->t('You are member of the following groups:')); ?></p>
+				<p id="groups-groups">
+					<strong><?php p(implode(', ', $_['groups'])); ?></strong>
+				</p>
+			</div>
+		</div>
 	</div>
 
 	<div class="personal-settings-container">
@@ -301,82 +310,71 @@ vendor_style('jcrop/css/jquery.Jcrop');
 		<?php } ?>
 	</div>
 
-	<div class="clear"></div>
-
-	<div id="personal-settings-group-container">
-		<div class="personal-settings-setting-box personal-settings-group-box">
-			<div id="groups" class="section">
-				<h2><?php p($l->t('Groups')); ?></h2>
-				<p><?php p($l->t('You are member of the following groups:')); ?></p>
-				<p id="groups-groups">
-				<strong><?php p(implode(', ', $_['groups'])); ?></strong>
-				</p>
-			</div>
-		</div>
-	</div>
-
 	<div class="profile-settings-container">
 		<div class="personal-settings-setting-box personal-settings-language-box">
 			<?php if (isset($_['activelanguage'])) { ?>
-			<form id="language" class="section">
-				<h2>
-					<label for="languageinput"><?php p($l->t('Language'));?></label>
-				</h2>
-				<select id="languageinput" name="lang" data-placeholder="<?php p($l->t('Language'));?>">
-					<option value="<?php p($_['activelanguage']['code']);?>">
-						<?php p($_['activelanguage']['name']);?>
-					</option>
-					<?php foreach($_['commonlanguages'] as $language):?>
-						<option value="<?php p($language['code']);?>">
-							<?php p($language['name']);?>
-						</option>
-					<?php endforeach;?>
-					<optgroup label="––––––––––"></optgroup>
-					<?php foreach($_['languages'] as $language):?>
-						<option value="<?php p($language['code']);?>">
-							<?php p($language['name']);?>
+				<form id="language" class="section">
+					<h2>
+						<label for="languageinput"><?php p($l->t('Language'));?></label>
+					</h2>
+					<select id="languageinput" name="lang" data-placeholder="<?php p($l->t('Language'));?>">
+						<option value="<?php p($_['activelanguage']['code']);?>">
+							<?php p($_['activelanguage']['name']);?>
 						</option>
-					<?php endforeach;?>
-				</select>
-				<a href="https://www.transifex.com/nextcloud/nextcloud/"
-					target="_blank" rel="noreferrer noopener">
-					<em><?php p($l->t('Help translate'));?></em>
-				</a>
-			</form>
+						<?php foreach($_['commonlanguages'] as $language):?>
+							<option value="<?php p($language['code']);?>">
+								<?php p($language['name']);?>
+							</option>
+						<?php endforeach;?>
+						<optgroup label="––––––––––"></optgroup>
+						<?php foreach($_['languages'] as $language):?>
+							<option value="<?php p($language['code']);?>">
+								<?php p($language['name']);?>
+							</option>
+						<?php endforeach;?>
+					</select>
+					<a href="https://www.transifex.com/nextcloud/nextcloud/"
+					   target="_blank" rel="noreferrer noopener">
+						<em><?php p($l->t('Help translate'));?></em>
+					</a>
+				</form>
 			<?php } ?>
 		</div>
 		<div class="personal-settings-setting-box personal-settings-password-box">
 			<?php
 			if($_['passwordChangeSupported']) {
 				script('jquery-showpassword');
-			?>
-			<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>
+				?>
+				<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>
 
-				<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" />
+					<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" />
 
-				<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"
-						placeholder="<?php p($l->t('New password')); ?>"
-						data-typetoggle="#personal-show"
-						autocomplete="off" autocapitalize="none" autocorrect="off" />
-					<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="personal-show-label"></label>
-				</div>
+					<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"
+							   placeholder="<?php p($l->t('New password')); ?>"
+							   data-typetoggle="#personal-show"
+							   autocomplete="off" autocapitalize="none" autocorrect="off" />
+						<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="personal-show-label"></label>
+					</div>
 
-				<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
+					<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
 
-			</form>
-			<?php
+				</form>
+				<?php
 			}
 			?>
 		</div>
 		<span class="msg"></span>
 	</div>
-</div>
 
-<div class="clear"></div>
+	<div id="personal-settings-group-container">
+
+	</div>
+
+</div>
\ No newline at end of file