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

refactor(pages, components): rearrange layout

Browse Source 
sidebars now open beside the actual page content instead of beside the body
This commit is contained in:
✑ ☙◦❀ The Tablet ☯ GamerGirlandCo ❀◦❧ 2024-04-20 20:59:30 -04:00
parent 05a20ff94e
commit 1a3135c6c4
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
1 changed files with 68 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
layouts/default.vue
View File

@ -50,67 +50,76 @@
<i> Nothing here but crickets. </i>
</template>
<a-layout class="ylayout">
<a-layout-header class="alayhead">
<div style="display: flex; align-items: center; flex-wrap: wrap">
<div class="siteTitle">Rockfic</div>
<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 v-if="!!bp['md']" :inline="false" />
</div>
<a-button class="mobileTrigger" type="primary" @click="() => (collapsed = !collapsed)" v-if="!bp['md']">
<menu-unfold-outlined v-if="nav" />
<menu-fold-outlined v-else />
</a-button>
</a-layout-header>
<a-layout class="mlayout" has-sider style="padding-top: 1em">
<a-layout-sider :trigger="null" :collapsed="true" :collapsed-width="0" :collapsible="true" v-model:collapsed="collapsed" v-if="!bp['md']">
<navbar inline />
</a-layout-sider>
<a-layout-content style="flex-grow: 1">
<slot />
</a-layout-content>
<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" />
<a-layout>
<a-layout-header class="alayhead" :style="{ backgroundColor: darkBool ? '#141414' : '#f5f5f5' }">
<div style="display: flex; align-items: center; flex-wrap: wrap">
<div class="siteTitle">Rockfic</div>
<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>
</template>
</a-layout-sider>
<navbar v-if="!!bp['md']" :inline="false" />
</div>
<a-button class="mobileTrigger" type="primary" @click="() => (nav = !nav)" v-if="!bp['md']">
<menu-unfold-outlined v-if="nav" />
<menu-fold-outlined v-else />
</a-button>
</a-layout-header>
<a-layout class="mlayout" has-sider style="padding-top: 1em">
<a-layout-sider
:trigger="null"
:theme="darkBool ? 'dark' : 'light'"
:collapsed="nav"
:collapsed-width="0"
:collapsible="true"
v-model:collapsed="collapsed"
v-if="!bp['md']"
>
<navbar inline />
</a-layout-sider>
<a-layout-content style="flex-grow: 1">
<slot />
</a-layout-content>
<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,
right: '-3px',
alignSelf: 'stretch',
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>
<a-layout-footer style="bottom: 100%">
<cfooter />
</a-layout-footer>
</a-layout>
<a-layout-footer style="bottom: 100%">
<cfooter />
</a-layout-footer>
</a-layout>
<!-- <div class="mlayout">
<a-skeleton/>
@ -137,7 +146,7 @@
.sideWrap {
height: 100vh;
right: -1rem;
right: -3rem;
width: inherit;
/* display: flex;
flex-direction: column;