refactor(pages): move stuff to default layout

this allows layout to be shared between non-error and error pages without repeating code
This commit is contained in:
parent e8aea81b0b
commit c9be671507
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
2 changed files with 85 additions and 79 deletions

23
app.vue

@ -10,7 +10,6 @@
const dop = data?.value as any; const dop = data?.value as any;
let darkBool = dop?.user?.profile?.nightMode || false; let darkBool = dop?.user?.profile?.nightMode || false;
console.log("l->", useNuxtApp().$loaded); console.log("l->", useNuxtApp().$loaded);
useNuxtApp().$loaded.value = true;
// provide("user", ref(dop?.user || null)); // provide("user", ref(dop?.user || null));
provide("dark", darkBool); provide("dark", darkBool);
useHead({ useHead({
@ -35,27 +34,15 @@
// }); // });
</script> </script>
<template> <template>
<a-config-provider
:theme="{
token: {
colorPrimary: '#f14668',
colorSuccess: '#2be396',
colorWarning: '#face14',
colorInfo: '#15c6e3',
colorTextBase: darkBool ? '#fff' : '#101010',
},
algorithm: darkBool ? theme.darkAlgorithm : theme.defaultAlgorithm,
}"
>
<template #renderEmpty>
<a-typography-title> ¯\_()_/¯ </a-typography-title>
<i> Nothing here but crickets. </i>
</template>
<NuxtLayout> <NuxtLayout>
<NuxtPage /> <NuxtPage />
<!-- <NuxtWelcome /> --> <!-- <NuxtWelcome /> -->
</NuxtLayout> </NuxtLayout>
</a-config-provider> <nuxt-error-boundary>
<template #error="{ error, clearError }">
<error-bound :error="error" />
</template>
</nuxt-error-boundary>
</template> </template>
<style> <style>
body[data-theme="dark"], body[data-theme="dark"],

@ -14,19 +14,36 @@
const collapsed = ref<boolean>(true); const collapsed = ref<boolean>(true);
collapsed.value = true;
const sideTriggerVal = computed(() => { const sideTriggerVal = computed(() => {
let th = collapsed.value ? " collapsed" : ""; let th = collapsed.value ? " collapsed" : "";
return `sider-trigger${th}`; return `sider-trigger${th}`;
}); });
const darkBool = inject<boolean>("dark");
// const {data: rd } = await useApiFetch<ISidebarItem[]>("/sidebar") // const {data: rd } = await useApiFetch<ISidebarItem[]>("/sidebar")
// provide("sidebar-items", rd.data) // provide("sidebar-items", rd.data)
provide("collapsed", collapsed); provide("collapsed", collapsed);
const loaded = inject<Ref<boolean>>("loaded");
let darko = inject("dark"); let darko = inject("dark");
</script> </script>
<template> <template>
<a-config-provider
:theme="{
token: {
colorPrimary: '#f14668',
colorSuccess: '#2be396',
colorWarning: '#face14',
colorInfo: '#15c6e3',
colorTextBase: darkBool ? '#fff' : '#101010',
},
algorithm: darkBool ? theme.darkAlgorithm : theme.defaultAlgorithm,
}"
>
<template #renderEmpty>
<a-typography-title> ¯\_()_/¯ </a-typography-title>
<i> Nothing here but crickets. </i>
</template>
<a-layout class="ylayout" has-sider> <a-layout class="ylayout" has-sider>
<a-layout class="mlayout"> <a-layout class="mlayout">
<a-layout-header class="alayhead"> <a-layout-header class="alayhead">
@ -36,8 +53,8 @@
<div> <div>
<a-typography-text> Band fiction that rocks </a-typography-text> <a-typography-text> Band fiction that rocks </a-typography-text>
<a-typography-text type="secondary"> <a-typography-text type="secondary">
With {{ totals.stories }} stories by With {{ totals?.stories ?? 0 }} stories by
{{ totals.authors }} authors {{ totals?.authors ?? 0 }} authors
</a-typography-text> </a-typography-text>
</div> </div>
</div> </div>
@ -61,6 +78,7 @@
color: 'white', color: 'white',
border: '2.4px solid #fffFFF80', border: '2.4px solid #fffFFF80',
top: '75vh', top: '75vh',
'z-index': 99999999,
}" }"
:theme="darko ? 'dark' : 'light'" :theme="darko ? 'dark' : 'light'"
:breakpoint="'lg'" :breakpoint="'lg'"
@ -93,6 +111,7 @@
<a-skeleton/> <a-skeleton/>
<a-skeleton/> <a-skeleton/>
</div> --> </div> -->
</a-config-provider>
</template> </template>
<style scoped> <style scoped>