Improve personal settings layout

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

apps/settings/css/settings.scss

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

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

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