Improve personal settings layout

Signed-off-by: Marco <marcoambrosini@icloud.com>
nextcloud · Mar 11, 2024 · f80b06a · f80b06a
1 parent 53220d0
commit f80b06a
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 67 deletions.
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
@@ -86,11 +86,17 @@ select {
 }
 
 #personal-settings {
-	display: grid;
+	display: flex;
 	padding: 20px;
-	max-width: 1700px;
-	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
-	grid-column-gap: 10px;
+	max-width: 1600px;
+	margin: auto;
+	flex-wrap: wrap-reverse;
+	justify-content: center;
+	gap: 16px;
+
+	label {
+		font-weight: bold;
+	}
 
 	.section {
 		padding: 10px 10px;
@@ -101,6 +107,7 @@ select {
 		}
 
 		h3 {
+			font-weight: bold;
 			> label {
 				font-weight: bold;
 			}

diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue
@@ -69,12 +69,10 @@ html {
 a {
 	display: block;
 	height: 44px;
-	width: min(100%, 290px);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	line-height: 44px;
 	padding: 0 16px;
-	margin: 14px auto;
 	border-radius: var(--border-radius-pill);
 	color: var(--color-text-maxcontrast);
 	background-color: transparent;

diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
@@ -95,7 +95,6 @@ export default {
 	display: flex;
 	flex-direction: column;
 	position: relative;
-	width: min(100%, 290px);
 	height: 116px;
 	margin: 14px auto;
 	border-radius: var(--border-radius-large);

diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue
@@ -24,14 +24,15 @@
 	<section>
 		<HeaderBar :is-heading="true" :readable="propertyReadable" />
 
-		<ProfileCheckbox :profile-enabled.sync="profileEnabled" />
+		<div class="profile-section_controls-wrapper">
+			<ProfileCheckbox :profile-enabled.sync="profileEnabled" />
+			<EditProfileAnchorLink :profile-enabled="profileEnabled" />
+		</div>
 
 		<ProfilePreviewCard :organisation="organisation"
 			:display-name="displayName"
 			:profile-enabled="profileEnabled"
 			:user-id="userId" />
-
-		<EditProfileAnchorLink :profile-enabled="profileEnabled" />
 	</section>
 </template>
 
@@ -103,4 +104,9 @@ section {
 		cursor: default;
 	}
 }
+
+.profile-section_controls-wrapper {
+	display: flex;
+	align-items: center;
+}
 </style>
diff --git a/...ettings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/...ettings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
@@ -21,9 +21,7 @@
 -->
 
 <template>
-	<!-- TODO remove this inline margin placeholder once the settings layout is updated -->
-	<section id="profile-visibility"
-		:style="{ marginLeft }">
+	<section id="profile-visibility">
 		<HeaderBar :is-heading="true" :readable="heading" />
 
 		<em :class="{ disabled }">
@@ -79,10 +77,6 @@ export default {
 			visibilityParams: Object.entries(profileConfig)
 				.map(([paramId, { appId, displayId, visibility }]) => ({ id: paramId, appId, displayId, visibility }))
 				.sort(compareParams),
-			// TODO remove this when not used once the settings layout is updated
-			marginLeft: window.matchMedia('(min-width: 1600px)').matches
-				? window.getComputedStyle(document.getElementById('vue-avatar-section')).getPropertyValue('width').trim()
-				: '0px',
 		}
 	},
 
@@ -121,8 +115,9 @@ export default {
 <style lang="scss" scoped>
 section {
 	padding: 30px;
-	max-width: 900px;
+	max-width: 800px;
 	width: 100%;
+	margin: auto;
 
 	em {
 		display: block;

diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
@@ -133,7 +133,7 @@ export default {
 
 <style lang="scss" scoped>
 	.headerbar-label {
-		font-weight: normal;
+		font-weight: bold;
 		display: inline-flex;
 		width: 100%;
 		margin: 12px 0 0 0;

diff --git a/apps/settings/templates/settings/personal/personal.info.php b/apps/settings/templates/settings/personal/personal.info.php
@@ -44,64 +44,69 @@
 <?php endif; ?>
 
 <div id="personal-settings">
-	<h2 class="hidden-visually"><?php p($l->t('Personal info')); ?></h2>
-	<div id="vue-avatar-section"></div>
-	<?php if ($_['profileEnabledGlobally']) : ?>
-		<div class="personal-settings-setting-box personal-settings-setting-box-profile">
-			<div id="vue-profile-section"></div>
-		</div>
-		<div class="personal-settings-setting-box personal-settings-setting-box-detail">
-			<div id="vue-details-section"></div>
+	<div class-"personal-settings__left-column">
+		<div class="personal-settings-setting-box"></div>
+		<div id="vue-displayname-section"></div>
+
+		<div class="personal-settings-setting-box">
+			<div id="vue-email-section"></div>
 		</div>
-	<?php else: ?>
-		<div class="personal-settings-setting-box personal-settings-setting-box-detail--without-profile">
-			<div id="vue-details-section"></div>
+		<div class="personal-settings-setting-box">
+			<div id="vue-phone-section"></div>
 		</div>
-	<?php endif; ?>
-	<div class="personal-settings-setting-box">
-		<div id="vue-displayname-section"></div>
-	</div>
-	<div class="personal-settings-setting-box">
-		<div id="vue-email-section"></div>
-	</div>
-	<div class="personal-settings-setting-box">
-		<div id="vue-phone-section"></div>
-	</div>
-	<div class="personal-settings-setting-box">
-		<div id="vue-location-section"></div>
-	</div>
-	<div class="personal-settings-setting-box personal-settings-language-box">
-		<div id="vue-language-section"></div>
-	</div>
-	<div class="personal-settings-setting-box personal-settings-locale-box">
-		<div id="vue-locale-section"></div>
-	</div>
-	<div class="personal-settings-setting-box">
-		<div id="vue-website-section"></div>
-	</div>
-	<div class="personal-settings-setting-box">
-		<div id="vue-twitter-section"></div>
-	</div>
-	<div class="personal-settings-setting-box">
-		<div id="vue-fediverse-section"></div>
-	</div>
-	<?php if ($_['profileEnabledGlobally']) : ?>
 		<div class="personal-settings-setting-box">
-			<div id="vue-organisation-section"></div>
+			<div id="vue-location-section"></div>
 		</div>
 		<div class="personal-settings-setting-box">
-			<div id="vue-role-section"></div>
+			<div id="vue-website-section"></div>
 		</div>
 		<div class="personal-settings-setting-box">
-			<div id="vue-headline-section"></div>
+			<div id="vue-twitter-section"></div>
 		</div>
 		<div class="personal-settings-setting-box">
-			<div id="vue-biography-section"></div>
+			<div id="vue-fediverse-section"></div>
 		</div>
-	<?php endif; ?>
-	<span class="msg"></span>
-
-	<div id="personal-settings-group-container"></div>
+		<?php if ($_['profileEnabledGlobally']) : ?>
+			<div class="personal-settings-setting-box">
+				<div id="vue-organisation-section"></div>
+			</div>
+			<div class="personal-settings-setting-box">
+				<div id="vue-role-section"></div>
+			</div>
+			<div class="personal-settings-setting-box">
+				<div id="vue-headline-section"></div>
+			</div>
+			<div class="personal-settings-setting-box">
+				<div id="vue-biography-section"></div>
+			</div>
+		<?php endif; ?>
+		<span class="msg"></span>
+		<div id="personal-settings-group-container"></div>
+	</div>
+	<div class="personal-settings__right-column">
+		<h2 class="hidden-visually"><?php p($l->t('Personal info')); ?></h2>
+		<div id="vue-avatar-section"></div>
+		<?php if ($_['profileEnabledGlobally']) : ?>
+			<div class="personal-settings-setting-box personal-settings-setting-box-profile">
+				<div id="vue-profile-section"></div>
+			</div>
+			<div class="personal-settings-setting-box personal-settings-setting-box-detail">
+				<div id="vue-details-section"></div>
+			</div>
+		<?php else: ?>
+			<div class="personal-settings-setting-box personal-settings-setting-box-detail--without-profile">
+				<div id="vue-details-section"></div>
+			</div>
+		<?php endif; ?>
+		<div class="personal-settings-setting-box personal-settings-language-box">
+				<div id="vue-language-section"></div>
+			</div>
+		<div class="personal-settings-setting-box personal-settings-locale-box">
+			<div id="vue-locale-section"></div>
+		</div>
+	</div>
+
+
 </div>
 <?php if ($_['profileEnabledGlobally']) : ?>
 	<div class="personal-settings-section">