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

This commit is contained in:
ArneBo 2025-03-20 09:58:07 +01:00
parent 02dbb7990d
commit 3584e67851
2 changed files with 154 additions and 158 deletions

View File

@ -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>

View File

@ -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"