rockfic/next
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(pages): move stuff to default layout

Browse Source 
this allows layout to be shared between non-error and error pages without repeating code
This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧ 2023-12-09 17:02:56 -05:00
parent e8aea81b0b
commit c9be671507
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
2 changed files with 85 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app.vue
View File

@ -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 <NuxtLayout>
:theme="{ <NuxtPage />
token: { <!-- <NuxtWelcome /> -->
colorPrimary: '#f14668', </NuxtLayout>
colorSuccess: '#2be396', <nuxt-error-boundary>
colorWarning: '#face14', <template #error="{ error, clearError }">
colorInfo: '#15c6e3', <error-bound :error="error" />
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> </template>
<NuxtLayout> </nuxt-error-boundary>
<NuxtPage />
<!-- <NuxtWelcome /> -->
</NuxtLayout>
</a-config-provider>
</template> </template>
<style> <style>
body[data-theme="dark"], body[data-theme="dark"],

135
layouts/default.vue
View File

@ -14,78 +14,96 @@
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-layout class="ylayout" has-sider> <a-config-provider
<a-layout class="mlayout"> :theme="{
<a-layout-header class="alayhead"> token: {
<div style="display: flex; align-items: center; flex-wrap: wrap"> colorPrimary: '#f14668',
<a-typography-title class="siteTitle"> Rockfic </a-typography-title> colorSuccess: '#2be396',
<div class="stat-block"> colorWarning: '#face14',
<div> colorInfo: '#15c6e3',
<a-typography-text> Band fiction that rocks </a-typography-text> colorTextBase: darkBool ? '#fff' : '#101010',
<a-typography-text type="secondary"> },
With {{ totals.stories }} stories by algorithm: darkBool ? theme.darkAlgorithm : theme.defaultAlgorithm,
{{ totals.authors }} authors }"
</a-typography-text> >
<template #renderEmpty>
<a-typography-title> ¯\_(ツ)_/¯ </a-typography-title>
<i> Nothing here but crickets. </i>
</template>
<a-layout class="ylayout" has-sider>
<a-layout class="mlayout">
<a-layout-header class="alayhead">
<div style="display: flex; align-items: center; flex-wrap: wrap">
<a-typography-title class="siteTitle"> Rockfic </a-typography-title>
<div class="stat-block">
<div>
<a-typography-text> Band fiction that rocks </a-typography-text>
<a-typography-text type="secondary">
With {{ totals?.stories ?? 0 }} stories by
{{ totals?.authors ?? 0 }} authors
</a-typography-text>
</div>
</div>
<navbar />
</div>
</a-layout-header>
<a-layout-content style="flex-grow: 1">
<slot />
</a-layout-content>
<a-layout-footer style="bottom: 100%">
<cfooter />
</a-layout-footer>
</a-layout>
<a-layout-sider
:zero-width-trigger-style="{
background: '#e92662',
padding: '1.2em',
position: 'fixed',
right: 0,
borderRadius: '15%',
color: 'white',
border: '2.4px solid #fffFFF80',
top: '75vh',
'z-index': 99999999,
}"
:theme="darko ? 'dark' : 'light'"
:breakpoint="'lg'"
v-model:collapsed="collapsed"
:collapsible="true"
:collapsed-width="0"
:style="{
color: col,
height: '100%',
position: 'fixed',
right: '0px',
borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`,
}"
>
<sidebar-thing />
<template #trigger>
<div class="outerst" @click="() => (collapsed = !collapsed)">
<div :class="sideTriggerVal">
<icon istyle="solid" name="chevron-right" :size="30" />
</div> </div>
</div> </div>
<navbar /> </template>
</div> </a-layout-sider>
</a-layout-header>
<a-layout-content style="flex-grow: 1">
<slot />
</a-layout-content>
<a-layout-footer style="bottom: 100%">
<cfooter />
</a-layout-footer>
</a-layout> </a-layout>
<a-layout-sider <!-- <div class="mlayout">
:zero-width-trigger-style="{
background: '#e92662',
padding: '1.2em',
position: 'fixed',
right: 0,
borderRadius: '15%',
color: 'white',
border: '2.4px solid #fffFFF80',
top: '75vh',
}"
:theme="darko ? 'dark' : 'light'"
:breakpoint="'lg'"
v-model:collapsed="collapsed"
:collapsible="true"
:collapsed-width="0"
:style="{
color: col,
height: '100%',
position: 'fixed',
right: '0px',
borderLeft: `2px solid ${darko ? '#fff' : '#ccc'}`,
}"
>
<sidebar-thing />
<template #trigger>
<div class="outerst" @click="() => (collapsed = !collapsed)">
<div :class="sideTriggerVal">
<icon istyle="solid" name="chevron-right" :size="30" />
</div>
</div>
</template>
</a-layout-sider>
</a-layout>
<!-- <div class="mlayout">
<a-skeleton/> <a-skeleton/>
<a-skeleton/> <a-skeleton/>
<a-skeleton/> <a-skeleton/>
@ -93,6 +111,7 @@
<a-skeleton/> <a-skeleton/>
<a-skeleton/> <a-skeleton/>
</div> --> </div> -->
</a-config-provider>
</template> </template>
<style scoped> <style scoped>