fix(webapp): better settings ux (#8347)

* Scroll to notification settings when opened (for mobile)

* scroll to settings content when clicking on menu entry

* Scroll to settings content on mobile and fix weird loading state

* Add fail-safety

* Fix linting

webapp/pages/settings.vue

@@ -5,14 +5,14 @@
     </ds-space>
     <ds-space margin="large" />
     <ds-flex gutter="small">
-      <ds-flex-item :width="{ base: '100%', md: '200px' }">
+      <div class="menu-container">
         <ds-menu :routes="routes" :is-exact="() => true" />
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '100%', md: 1 }">
+      </div>
+      <div class="settings-content" id="settings-content">
         <transition name="slide-up" appear>
           <nuxt-child />
         </transition>
-      </ds-flex-item>
+      </div>
     </ds-flex>
   </div>
 </template>
@@ -87,3 +87,24 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.menu-container {
+  width: 100%;
+}
+.settings-content {
+  flex: 1;
+  padding: 0 24px;
+  margin-top: 32px;
+}
+
+@media screen and (min-width: 600px) {
+  .settings-content {
+    margin-top: 0;
+  }
+
+  .menu-container {
+    width: 200px;
+  }
+}
+</style>

webapp/pages/settings/blocked-users.vue

@@ -75,8 +75,10 @@
 <script>
 import { blockedUsers, unblockUser } from '~/graphql/settings/BlockedUsers'
 import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     ProfileAvatar,
   },

webapp/pages/settings/data-download.vue

@@ -26,8 +26,10 @@ import { mapGetters } from 'vuex'
 import { userDataQuery } from '~/graphql/User'
 import BaseButton from '~/components/_new/generic/BaseButton/BaseButton.vue'
 import isEmpty from 'lodash/isEmpty'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     BaseButton,
   },

webapp/pages/settings/delete-account.vue

@@ -4,8 +4,10 @@
 
 <script>
 import DeleteData from '~/components/DeleteData/DeleteData.vue'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     DeleteData,
   },

webapp/pages/settings/embeds.vue

@@ -39,8 +39,10 @@
 import axios from 'axios'
 import { mapGetters, mapMutations } from 'vuex'
 import { updateUserMutation } from '~/graphql/User.js'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   head() {
     return {
       title: this.$t('settings.embeds.name'),

webapp/pages/settings/index.vue

@@ -47,10 +47,12 @@ import { mapGetters, mapMutations } from 'vuex'
 import UniqueSlugForm from '~/components/utils/UniqueSlugForm'
 import { updateUserMutation } from '~/graphql/User'
 import { queryLocations } from '~/graphql/location'
+import scrollToContent from './scroll-to-content.js'
 
 let timeout
 
 export default {
+  mixins: [scrollToContent],
   name: 'NewsFeed',
   data() {
     return {

webapp/pages/settings/invites.vue

@@ -7,8 +7,10 @@
 
 <script>
 import HcEmpty from '~/components/Empty/Empty'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     HcEmpty,
   },

webapp/pages/settings/languages.vue

@@ -7,8 +7,10 @@
 
 <script>
 import HcEmpty from '~/components/Empty/Empty'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     HcEmpty,
   },

webapp/pages/settings/muted-users.vue

@@ -72,8 +72,10 @@
 <script>
 import { mutedUsers, unmuteUser } from '~/graphql/settings/MutedUsers'
 import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     ProfileAvatar,
   },

webapp/pages/settings/my-email-address/index.vue

@@ -31,8 +31,10 @@ import { mapGetters } from 'vuex'
 import { AddEmailAddressMutation } from '~/graphql/EmailAddress.js'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
 import normalizeEmail from '~/components/utils/NormalizeEmail'
+import scrollToContent from '../scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     SweetalertIcon,
   },

webapp/pages/settings/my-organizations.vue

@@ -7,8 +7,10 @@
 
 <script>
 import HcEmpty from '~/components/Empty/Empty'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     HcEmpty,
   },

webapp/pages/settings/my-social-media.vue

@@ -35,8 +35,10 @@ import {
 } from '~/graphql/SocialMedia.js'
 import MySomethingList from '~/components/_new/features/MySomethingList/MySomethingList.vue'
 import SocialMediaListItem from '~/components/_new/features/SocialMedia/SocialMediaListItem.vue'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     MySomethingList,
     SocialMediaListItem,

webapp/pages/settings/notifications.vue

@@ -29,8 +29,10 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import { updateUserMutation } from '~/graphql/User'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   data() {
     return {
       emailNotificationSettings: [],

webapp/pages/settings/privacy.vue

@@ -12,8 +12,10 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import { updateUserMutation } from '~/graphql/User'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   data() {
     return {
       shoutsAllowed: false,

webapp/pages/settings/scroll-to-content.js

@@ -0,0 +1,13 @@
+export default {
+  mounted() {
+    if (document.documentElement.clientWidth >= 600) return
+
+    const content = document.getElementById('settings-content')
+
+    if (!content) return
+
+    content.scrollIntoView({
+      behavior: 'smooth',
+    })
+  },
+}

webapp/pages/settings/security.vue

@@ -7,8 +7,10 @@
 
 <script>
 import ChangePassword from '~/components/Password/Change'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     ChangePassword,
   },