Multiple fixes for CSS, added proper auth checking

src/boot/routes.js

@@ -7,10 +7,8 @@ import Interactions from 'components/interactions/interactions.vue'
 import DMs from 'components/dm_timeline/dm_timeline.vue'
 import UserProfile from 'components/user_profile/user_profile.vue'
 import Search from 'components/search/search.vue'
-import Settings from 'components/settings/settings.vue'
 import Registration from 'components/registration/registration.vue'
 import PasswordReset from 'components/password_reset/password_reset.vue'
-import UserSettings from 'components/user_settings/user_settings.vue'
 import FollowRequests from 'components/follow_requests/follow_requests.vue'
 import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
 import Notifications from 'components/notifications/notifications.vue'
@@ -56,12 +54,10 @@ export default (store) => {
     { name: 'external-user-profile', path: '/users/:id', component: UserProfile },
     { name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
     { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
-    { name: 'settings', path: '/settings', component: Settings },
     { name: 'registration', path: '/registration', component: Registration },
     { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
     { name: 'registration-token', path: '/registration/:token', component: Registration },
     { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
-    { name: 'user-settings', path: '/user-settings', component: UserSettings, beforeEnter: validateAuthenticatedRoute },
     { name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
     { name: 'login', path: '/login', component: AuthForm },
     { name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) },

src/components/modal/modal.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     v-show="isOpen"
-    v-body-scroll-lock="isOpen"
+    v-body-scroll-lock="isOpen && !noBackground"
     class="modal-view"
-    :class="{ 'modal-background': !noBackground }"
+    :class="classes"
     @click.self="$emit('backdropClicked')"
   >
     <slot />
@@ -21,6 +21,14 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+  computed: {
+    classes () {
+      return {
+        'modal-background': !this.noBackground,
+        'open': this.isOpen
+      }
+    }
   }
 }
 </script>
@@ -40,6 +48,7 @@ export default {
   pointer-events: none;
   animation-duration: 0.2s;
   animation-name: modal-background-fadein;
+  opacity: 0;
 
   > * {
     pointer-events: initial;
@@ -50,8 +59,8 @@ export default {
     background-color: rgba(0, 0, 0, 0.5);
   }
 
-  body:not(.scroll-locked) & {
+  &.open {
-    opacity: 0;
+    opacity: 1;
   }
 }
 

src/components/settings_modal/settings_modal.scss

@@ -1,12 +1,21 @@
 @import 'src/_variables.scss';
 .settings-modal {
+  overflow: hidden;
 
   .settings_tab-switcher {
     height: 100%;
   }
   &.peek {
     .settings-modal-panel {
-      transform: translateY(calc(100% - 50px));
+      /* Explanation:
+       * Modal is positioned vertically centered.
+       * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
+       * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
+       * + 100% - we move modal completely off-screen, it's top boundary touches
+       *   bottom of the screen
+       * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
+       */
+      transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
     }
   }
 
@@ -25,17 +34,22 @@
   .panel-body {
     height: 100%;
     overflow-y: hidden;
-  }
-  .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
-    margin: 1em 1em 1.4em;
-    padding-bottom: 1.4em;
 
     .btn {
       min-height: 28px;
       min-width: 10em;
       padding: 0 2em;
     }
+  }
+
+  .full-height {
+    height: 100%;
+  }
+
+  .setting-item {
+    border-bottom: 2px solid var(--fg, $fallback--fg);
+    margin: 1em 1em 1.4em;
+    padding-bottom: 1.4em;
 
     > div {
       margin-bottom: .5em;

src/components/settings_modal/settings_modal.vue

@@ -1,6 +1,5 @@
 <template>
 <Modal
-  v-if="isLoggedIn && !resettingForm"
   :is-open="modalActivated"
   class="settings-modal"
   :class="{ peek: modalPeeked }"
@@ -25,15 +24,57 @@
         :scrollableTabs="true"
         ref="tabSwitcher"
         >
-        <div :label="$t('settings.general')"><GeneralTab /></div>
+        <div
-        <div :label="$t('settings.profile_tab')"><ProfileTab /></div>
+          :label="$t('settings.general')"
-        <div :label="$t('settings.security_tab')"><SecurityTab /></div>
+          >
-        <div :label="$t('settings.filtering')"><FilteringTab /></div>
+          <GeneralTab />
-        <div :label="$t('settings.theme')"><ThemeTab /></div>
+        </div>
-        <div :label="$t('settings.notifications')"><NotificationsTab /></div>
+        <div v-if="isLoggedIn"
-        <div :label="$t('settings.data_import_export_tab')"><DataImportExportTab /></div>
+             :label="$t('settings.profile_tab')"
-        <div :label="$t('settings.mutes_and_blocks')"><MutesAndBlocksTab /></div>
+             >
-        <div :label="$t('settings.version.title')"><VersionTab /></div>
+          <ProfileTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.security_tab')"
+          >
+          <SecurityTab />
+        </div>
+        <div
+          :label="$t('settings.filtering')"
+          >
+          <FilteringTab />
+        </div>
+        <div
+          :label="$t('settings.theme')"
+          >
+          <ThemeTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.notifications')"
+          >
+          <NotificationsTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.data_import_export_tab')"
+          >
+          <DataImportExportTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.mutes_and_blocks')"
+          :fullHeight="true"
+          class="full-height"
+          >
+          <MutesAndBlocksTab />
+        </div>
+        <div
+          :label="$t('settings.version.title')"
+          >
+          <VersionTab />
+        </div>
       </tab-switcher>
     </div>
   </div>

src/components/settings_modal/tabs/mutes_and_blocks_tab.vue

@@ -1,7 +1,10 @@
 <template>
-  <tab-switcher>
+<tab-switcher
+  :scrollableTabs="true"
+  class="mutes-and-blocks-tab"
+  >
   <div :label="$t('settings.blocks_tab')">
-      <div class="profile-edit-usersearch-wrapper">
+    <div class="usersearch-wrapper">
       <Autosuggest
         :filter="filterUnblockedUsers"
         :query="queryUserIds"
@@ -21,10 +24,10 @@
         slot="header"
         slot-scope="{selected}"
         >
-          <div class="profile-edit-bulk-actions">
+        <div class="bulk-actions">
           <ProgressButton
             v-if="selected.length > 0"
-              class="btn btn-default"
+            class="btn btn-default bulk-action-button"
             :click="() => blockUsers(selected)"
             >
             {{ $t('user_card.block') }}
@@ -59,7 +62,7 @@
   <div :label="$t('settings.mutes_tab')">
     <tab-switcher>
       <div label="Users">
-          <div class="profile-edit-usersearch-wrapper">
+        <div class="usersearch-wrapper">
           <Autosuggest
             :filter="filterUnMutedUsers"
             :query="queryUserIds"
@@ -79,7 +82,7 @@
             slot="header"
             slot-scope="{selected}"
             >
-              <div class="profile-edit-bulk-actions">
+            <div class="bulk-actions">
               <ProgressButton
                 v-if="selected.length > 0"
                 class="btn btn-default"
@@ -115,7 +118,7 @@
       </div>
 
       <div :label="$t('settings.domain_mutes')">
-          <div class="profile-edit-domain-mute-form">
+        <div class="domain-mute-form">
           <input
             v-model="newDomainToMute"
             :placeholder="$t('settings.type_domains_to_mute')"
@@ -123,7 +126,7 @@
             @keyup.enter="muteDomain"
             >
           <ProgressButton
-              class="btn btn-default"
+            class="btn btn-default domain-mute-button"
             :click="muteDomain"
             >
             {{ $t('domain_mute_card.mute') }}
@@ -140,7 +143,7 @@
             slot="header"
             slot-scope="{selected}"
             >
-              <div class="profile-edit-bulk-actions">
+            <div class="bulk-actions">
               <ProgressButton
                 v-if="selected.length > 0"
                 class="btn btn-default"
@@ -170,4 +173,4 @@
 </template>
 
 <script src="./mutes_and_blocks_tab.js"></script>
-<!-- <style lang="scss" src="./profile.scss"></style> -->
+<style lang="scss" src="./mutes_and_blocks_tab.scss"></style>

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -1,5 +1,6 @@
 @import 'src/_variables.scss';
 .theme-tab {
+  padding-bottom: 2em;
   .theme-warning {
     display: flex;
     align-items: baseline;

src/components/tab_switcher/tab_switcher.js

@@ -69,7 +69,6 @@ export default Vue.component('tab-switcher', {
         if (!slot.tag) return
         const classesTab = ['tab']
         const classesWrapper = ['tab-wrapper']
-
         if (this.activeIndex === index) {
           classesTab.push('active')
           classesWrapper.push('active')
@@ -101,12 +100,17 @@ export default Vue.component('tab-switcher', {
     const contents = this.$slots.default.map((slot, index) => {
       if (!slot.tag) return
       const active = this.activeIndex === index
+      const classes = [ active ? 'active' : 'hidden' ]
+      if (slot.data.attrs.fullHeight) {
+        classes.push('full-height')
+      }
+
       if (this.renderOnlyFocused) {
         return active
-          ? <div class="active">{slot}</div>
+          ? <div class={classes.join(' ')}>{slot}</div>
-          : <div class="hidden"></div>
+          : <div class={classes.join(' ')}></div>
       }
-      return <div class={active ? 'active' : 'hidden' }>{slot}</div>
+      return <div class={classes.join(' ')}>{slot}</div>
     })
 
     return (

src/components/tab_switcher/tab_switcher.scss

@@ -59,7 +59,6 @@
       flex: 1 0 auto;
       overflow-y: auto;
       overflow-x: hidden;
-      padding-top: 5px;
       flex-direction: column;
       &::after {
         content: '';
@@ -78,6 +77,9 @@
           border-right-color: $fallback--border;
           border-right-color: var(--border, $fallback--border);
         }
+        &:last-child .tab {
+          margin-bottom: 0;
+        }
       }
       .tab {
         box-sizing: content-box;
@@ -87,8 +89,8 @@
         min-width: 1px;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
-        // padding-right: 200px;
+        padding-right: calc(1em + 200px);
-        // margin-right: 6px - 200px;
+        margin-right: 6px - 200px;
         margin-left: 6px;
       }