refactor: address review comments

components/Layout/Settings/AdminSettings.vue

@@ -29,13 +29,17 @@
           :to="adminItem.link"
           :value="isCurrentLink(adminItem.link)"
           class="pb-0"
+          three-line
         >
           <v-list-item-avatar>
             <v-icon v-text="adminItem.icon" />
           </v-list-item-avatar>
           <v-list-item-content>
             <v-list-item-title v-text="adminItem.name" />
-            <v-list-item-subtitle v-text="adminItem.description" />
+            <v-list-item-subtitle
+              class="align-self-start"
+              v-text="adminItem.description"
+            />
           </v-list-item-content>
           <v-list-item-action>
             <v-icon>mdi-chevron-right</v-icon>
@@ -72,7 +76,7 @@ export default Vue.extend({
             icon: 'mdi-devices',
             name: this.$t('settingsSections.admin.devices.name'),
             description: this.$t('settingsSections.admin.devices.description'),
-            link: undefined
+            link: '/settings/admin/devices'
           },
           {
             icon: 'mdi-library-shelves',

components/Layout/Settings/SelectedDeviceInfo.vue

@@ -56,6 +56,7 @@
       </v-row>
     </v-card-text>
     <v-card-actions>
+      <v-spacer />
       <v-btn color="error" @click="$emit('delete-selected')">
         {{ $t('settings.devices.delete') }}
       </v-btn>

components/Layout/Settings/SettingsPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="elevation-0" :loading="loading">
+  <v-card class="elevation-0" :loading="loading" color="transparent">
     <template #progress>
       <slot name="progress" />
     </template>
@@ -11,12 +11,23 @@
       />
       <v-card-actions>
         <slot name="actions" />
-        <v-btn icon :href="helpLink" target="_blank">
-          <v-icon>mdi-help-circle</v-icon>
-        </v-btn>
+        <v-tooltip v-if="!noHelp" bottom>
+          <template #activator="{ on, attrs }">
+            <v-btn
+              icon
+              :href="helpLink"
+              target="_blank"
+              v-bind="attrs"
+              v-on="on"
+            >
+              <v-icon>mdi-help-circle</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $t('settings.help') }}</span>
+        </v-tooltip>
       </v-card-actions>
     </div>
-    <v-container class="pa-5 ma-0 parent">
+    <v-container class="parent pa-6">
       <slot name="content" />
     </v-container>
   </v-card>
@@ -41,6 +52,11 @@ export default Vue.extend({
       type: String,
       required: false,
       default: ''
+    },
+    noHelp: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   }
 });
@@ -53,5 +69,6 @@ export default Vue.extend({
 
 .parent {
   max-width: 100%;
+  min-width: 100%;
 }
 </style>

components/Layout/Settings/UserSettings.vue

@@ -15,13 +15,17 @@
         :to="userItem.link"
         :inactive="userItem.sync"
         :value="isCurrentLink(userItem.link)"
+        three-line
       >
         <v-list-item-avatar>
           <v-icon v-text="userItem.icon" />
         </v-list-item-avatar>
         <v-list-item-content>
           <v-list-item-title v-text="userItem.name" />
-          <v-list-item-subtitle v-text="userItem.description" />
+          <v-list-item-subtitle
+            class="align-self-start"
+            v-text="userItem.description"
+          />
         </v-list-item-content>
         <v-list-item-action>
           <v-icon v-if="!userItem.sync">mdi-chevron-right</v-icon>
@@ -40,13 +44,17 @@
           :key="adminItem.name"
           nuxt
           :to="adminItem.link"
+          three-line
         >
           <v-list-item-avatar>
             <v-icon v-text="adminItem.icon" />
           </v-list-item-avatar>
           <v-list-item-content>
             <v-list-item-title v-text="adminItem.name" />
-            <v-list-item-subtitle v-text="adminItem.description" />
+            <v-list-item-subtitle
+              class="align-self-start"
+              v-text="adminItem.description"
+            />
           </v-list-item-content>
           <v-list-item-action>
             <v-icon>mdi-chevron-right</v-icon>

locales/en-US.json

@@ -211,7 +211,6 @@
   "server": "Server",
   "serverVersion": "Server version",
   "serverVersionTooLow": "Server version needs to be 10.7.0 or higher",
-  "settings": {
   "settings": {
     "about": "About",
     "accountAndClient": "Account & client",
@@ -263,6 +262,7 @@
       "noDevicesFound": "No devices found",
       "userName": "Username"
     },
+    "help": "Help",
     "playback": {
       "video": {
         "video": "Video",

pages/settings.vue

@@ -1,13 +1,21 @@
 <template>
-  <div class="grid pa-2" :class="$vuetify.breakpoint.smAndDown ? 'sm' : null">
+  <v-row>
     <v-fade-transition appear mode="out-in">
       <v-col
         v-if="
           $vuetify.breakpoint.mdAndUp ||
           ($vuetify.breakpoint.smAndDown && inMenu)
         "
+        xl="3"
+        lg="3"
+        md="3"
+        sm="auto"
+        xs="auto"
       >
-        <v-card :class="$vuetify.breakpoint.smAndDown ? null : 'column'">
+        <v-card
+          :class="$vuetify.breakpoint.smAndDown ? null : 'menu mr-0'"
+          class="ma-5 mb-0"
+        >
           <v-fade-transition
             appear
             mode="out-in"
@@ -30,7 +38,10 @@
       </v-col>
     </v-fade-transition>
     <v-col>
-      <v-card :class="$vuetify.breakpoint.smAndDown ? null : 'column'">
+      <v-card
+        class="ma-5 ml-0 mb-0 transparent elevation-0"
+        color="transparent"
+      >
         <v-container>
           <v-fade-transition mode="out-in">
             <nuxt-child :key="$route.fullPath" keep-alive />
@@ -38,7 +49,7 @@
         </v-container>
       </v-card>
     </v-col>
-  </div>
+  </v-row>
 </template>
 
 <script lang="ts">
@@ -92,20 +103,10 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-.grid {
-  display: grid;
-  grid-template-columns: 35% 65%;
-  grid-template-rows: 91vh;
-}
-
-.sm {
-  grid-template-columns: 100% !important;
-  grid-template-rows: unset !important;
-}
-
-.column {
-  max-height: 100%;
-  min-height: 100%;
+.menu {
+  max-height: 90vh;
+  position: sticky;
+  top: 9vh;
   overflow-y: scroll;
 }
 </style>

pages/settings/admin/devices.vue

@@ -1,5 +1,8 @@
 <template>
-  <settings-page page-title="settings.devices.devices">
+  <settings-page
+    page-title="settings.devices.devices"
+    help-link="https://jellyfin.org/docs/general/server/devices.html"
+  >
     <template #actions>
       <v-btn
         v-if="devices"
@@ -9,13 +12,6 @@
       >
         {{ $t('settings.devices.deleteAll') }}
       </v-btn>
-      <v-btn
-        ref="noreferrer noopener"
-        href="https://jellyfin.org/docs/general/server/devices.html"
-        target="_blank"
-      >
-        {{ $t('settings.help') }}
-      </v-btn>
     </template>
     <template #content>
       <v-col>

pages/settings/admin/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <settings-page page-title="settings.serverDashboard">
+  <settings-page page-title="settings.serverDashboard" no-help>
     <template #content>
       <server-info-card />
     </template>

pages/settings/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <settings-page page-title="settings.about">
+  <settings-page page-title="settings.about" no-help>
     <template #content>
       <v-img
         contain
@@ -14,7 +14,7 @@
 
 <style lang="scss" scoped>
 .logo {
-  max-width: 40%;
+  max-width: 30%;
   margin: 0 auto;
 }
 </style>