rockfic/next
1
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;
let darkBool = dop?.user?.profile?.nightMode || false;
console.log("l->", useNuxtApp().$loaded);
useNuxtApp().$loaded.value = true;
// provide("user", ref(dop?.user || null));
provide("dark", darkBool);
useHead({
@ -35,27 +34,15 @@
// });
</script>
<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>
<NuxtLayout>
<NuxtPage />
<!-- <NuxtWelcome /> -->
</NuxtLayout>
<nuxt-error-boundary>
<template #error="{ error, clearError }">
<error-bound :error="error" />
</template>
<NuxtLayout>
<NuxtPage />
<!-- <NuxtWelcome /> -->
</NuxtLayout>
</a-config-provider>
</nuxt-error-boundary>
</template>
<style>
body[data-theme="dark"],

135
layouts/default.vue
View File

@ -14,78 +14,96 @@
const collapsed = ref<boolean>(true);
collapsed.value = true;
const sideTriggerVal = computed(() => {
let th = collapsed.value ? " collapsed" : "";
return `sider-trigger${th}`;
});
const darkBool = inject<boolean>("dark");
// const {data: rd } = await useApiFetch<ISidebarItem[]>("/sidebar")
// provide("sidebar-items", rd.data)
provide("collapsed", collapsed);
const loaded = inject<Ref<boolean>>("loaded");
let darko = inject("dark");
</script>
<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 }} stories by
{{ totals.authors }} authors
</a-typography-text>
<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="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>
<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>
</template>
</a-layout-sider>
</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',
}"
: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">
<!-- <div class="mlayout">
<a-skeleton/>
<a-skeleton/>
<a-skeleton/>
@ -93,6 +111,7 @@
<a-skeleton/>
<a-skeleton/>
</div> -->
</a-config-provider>
</template>
<style scoped>