chore(front): use section and heading in settings page
This commit is contained in:
parent
02dbb7990d
commit
3584e67851
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue