Improve personal settings layout

Signed-off-by: Marco Ambrosini <[email protected]>
Signed-off-by: nextcloud-command <[email protected]>

Author: marcoambrosini

apps/settings/css/settings.css

@@ -86,11 +86,15 @@ select {
 }
 
 #personal-settings {
-	display: grid;
+	display: flex;
+	flex-direction: column;
 	padding: 20px;
-	max-width: 1700px;
-	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
-	grid-column-gap: 10px;
+	max-width: 800px;
+	margin: auto;
+
+	label {
+		font-weight: bold;
+	}
 
 	.section {
 		padding: 10px 10px;
@@ -101,6 +105,7 @@ select {
 		}
 
 		h3 {
+			font-weight: bold;
 			> label {
 				font-weight: bold;
 			}

apps/settings/css/settings.css.map

@@ -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;

apps/settings/css/settings.scss

@@ -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);

apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue

@@ -24,14 +24,15 @@
 	<section>
 		<HeaderBar :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>

apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue

@@ -22,8 +22,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 +78,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 +116,9 @@ export default {
 <style lang="scss" scoped>
 section {
 	padding: 30px;
-	max-width: 900px;
+	max-width: 800px;
 	width: 100%;
+	margin: auto;
 
 	em {
 		display: block;

apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.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;