chore(front): use section and heading in settings page

front/src/components/admin/SettingsGroup.vue

@@ -8,7 +8,7 @@ import { useStore } from '~/store'
 import useLogger from '~/composables/useLogger'
 import { useI18n } from 'vue-i18n'
 
-import Layout from '~/components/ui/Layout.vue'
+import Section from '~/components/ui/Section.vue'
 import Toggle from '~/components/ui/Toggle.vue'
 import Input from '~/components/ui/Input.vue'
 import Alert from '~/components/ui/Alert.vue'
@@ -106,15 +106,17 @@ const save = async () => {
 </script>
 
 <template>
-  <Layout
+  <Section
+    align-left
+    no-items
+    :h2="group.label"
+  >
+    <form
       :id="group.id"
-    form
       class="ui form component-settings-group"
+      style="grid-column: 1 / -1;"
       @submit.prevent="save"
     >
-    <h2>
-      {{ group.label }}
-    </h2>
       <Alert
         v-if="errors.length > 0"
         red
@@ -137,6 +139,7 @@ const save = async () => {
       >
         {{ t('components.admin.SettingsGroup.message.success') }}
       </Alert>
+      <Spacer :size="16" />
       <div
         v-for="(setting, key) in settings"
         :key="key"
@@ -197,6 +200,7 @@ const save = async () => {
             :label="setting.verbose_name"
           />
           <!-- eslint-enable vue/valid-v-model -->
+          <Spacer :size="8" />
           <p v-if="setting.help_text">
             {{ setting.help_text }}
           </p>
@@ -249,6 +253,7 @@ const save = async () => {
             >
           </div>
         </div>
+        <Spacer />
       </div>
       <Button
         type="submit"
@@ -257,6 +262,8 @@ const save = async () => {
       >
         {{ t('components.admin.SettingsGroup.button.save') }}
       </Button>
-    <Spacer :size="32" />
-  </Layout>
+    </form>
+  </Section>
+  <Spacer />
+  <Spacer />
 </template>

front/src/views/admin/Settings.vue

@@ -2,10 +2,8 @@
 import type { SettingsGroup as SettingsGroupType } from '~/types'
 
 import axios from 'axios'
-import $ from 'jquery'
 
-import { ref, nextTick, onMounted, computed, watch } from 'vue'
-import { useCurrentElement } from '@vueuse/core'
+import { ref, nextTick, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
@@ -13,6 +11,7 @@ import SettingsGroup from '~/components/admin/SettingsGroup.vue'
 
 import Layout from '~/components/ui/Layout.vue'
 import Loader from '~/components/ui/Loader.vue'
+import Header from '~/components/ui/Header.vue'
 import Toc from '~/components/ui/Toc.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
@@ -156,17 +155,6 @@ if (route.hash) {
   scrollTo(route.hash.slice(1))
 }
 
-const el = useCurrentElement()
-onMounted(async () => {
-  await nextTick()
-  $(el.value).find('select.dropdown').dropdown()
-})
-
-watch(settingsData, async () => {
-  await nextTick()
-  $(el.value).find('.sticky').sticky({ context: '#settings-grid' })
-})
-
 const isLoading = ref(false)
 const fetchSettings = async () => {
   isLoading.value = true
@@ -192,6 +180,7 @@ await nextTick()
     :class="['ui', {'loading': isLoading}]"
   >
     <Loader v-if="isLoading" />
+    <Header :h1="labels.settings" />
     <div
       v-if="settingsData"
       id="settings-grid"