v11

src/pages/account/SettingsPage.vue

@@ -1,87 +1,85 @@
 <template>
-    <pn-page-card>
+    <pn-page-template>
     <template #title>
       {{ $t('settings__title') }}
     </template>
 
-    <pn-scroll-list>
-      <q-list separator>
-        <q-item-label header>{{ $t('settings__software_title') }}</q-item-label>
+    <q-list>
+      <q-item-label header>{{ $t('settings__software_title') }}</q-item-label>
+
+      <pn-item-btm-dialog
+        title="settings__language"
+        caption="settings__software_title"
+        icon="mdi-translate"
+        iconColor="primary"
+        >
+        <template #value>
+          {{ localeOptions.find(el => el.value === locale)?.label }}
+        </template>
+        <pn-list-selector
+          v-model="locale"
+          :options="localeOptions"
+        />
+      </pn-item-btm-dialog>
+
+      <pn-item-btm-dialog
+        title="settings__font_size"
+        caption="settings__software_title"
+        icon="mdi-format-size"
+        iconColor="primary"
+        >
+        <template #value>
+          {{ $t(fontSizeLabel) }}
+        </template>
+        <pn-list-selector
+          v-model="fontSize"
+          :options="fontSizeOptions"
+        />
+      </pn-item-btm-dialog>
+
+      <template v-if="authStore.isAuth">
+        <q-item-label
+          class="q-mt-md"
+          header
+          >
+          {{ $t('settings__bot_title') }}
+        </q-item-label>
 
         <pn-item-btm-dialog
           title="settings__language"
-          caption="settings__software_title"
+          caption="settings__bot_title"
           icon="mdi-translate"
           iconColor="primary"
           >
           <template #value>
-            {{ localeOptions.find(el => el.value === locale)?.label }}
+            {{ localeOptions.find(el => el.value === localeBot)?.label }}
           </template>
           <pn-list-selector
-            v-model="locale"
+            v-model="localeBot"
             :options="localeOptions"
           />
         </pn-item-btm-dialog>
 
         <pn-item-btm-dialog
-          title="settings__font_size"
-          caption="settings__software_title"
-          icon="mdi-format-size"
+          title="settings__timezone"
+          caption="settings__bot_title"
+          icon="mdi-map-clock-outline"
           iconColor="primary"
+          v-if="timeZoneBot"
           >
           <template #value>
-            {{ $t(fontSizeLabel) }}
+            {{ timeZoneBot.tz }}
+            {{ timeZoneBot.offsetString }}
           </template>
-          <pn-list-selector
-            v-model="fontSize"
-            :options="fontSizeOptions"
+
+          <pn-time-zone-selector
+            v-model="timeZoneBot"
+            :locale
           />
         </pn-item-btm-dialog>
-
-        <template v-if="authStore.isAuth">
-          <q-item-label
-            class="q-mt-md"
-            header
-            >
-            {{ $t('settings__bot_title') }}
-          </q-item-label>
-
-          <pn-item-btm-dialog
-            title="settings__language"
-            caption="settings__bot_title"
-            icon="mdi-translate"
-            iconColor="primary"
-            >
-            <template #value>
-              {{ localeOptions.find(el => el.value === localeBot)?.label }}
-            </template>
-            <pn-list-selector
-              v-model="localeBot"
-              :options="localeOptions"
-            />
-          </pn-item-btm-dialog>
-
-          <pn-item-btm-dialog
-            title="settings__timezone"
-            caption="settings__bot_title"
-            icon="mdi-map-clock-outline"
-            iconColor="primary"
-            v-if="timeZoneBot"
-            >
-            <template #value>
-              {{ timeZoneBot.tz }}
-              {{ timeZoneBot.offsetString }}
-            </template>
-
-            <pn-time-zone-selector
-              v-model="timeZoneBot"
-              :locale
-            />
-          </pn-item-btm-dialog>
-        </template>
-      </q-list>
-    </pn-scroll-list>
-  </pn-page-card>
+      </template>
+    </q-list>
+  </pn-page-template>
 </template>
 
 <script setup lang="ts">