refactor(activity): migrate to PageShell + ColumnsLayout
Replace .activity-page wrapper + SidebarLayout with PageShell + ColumnsLayout cols="events-sidebar". Delete the now-redundant flex-chain CSS that PageShell owns. Adds .loading-state to the visual mask list to handle the connections-mobile race between the loading and loaded states.
This commit is contained in:
parent
89c9a5e4a2
commit
eb2544a42d
2 changed files with 8 additions and 16 deletions
|
|
@ -1,11 +1,9 @@
|
|||
<template>
|
||||
<div class="activity-page">
|
||||
<PageHeader
|
||||
title="Activity Log"
|
||||
subtitle="Your activity and milestones in the Guild"
|
||||
/>
|
||||
|
||||
<SidebarLayout :limit="5">
|
||||
<PageShell
|
||||
title="Activity Log"
|
||||
subtitle="Your activity and milestones in the Guild"
|
||||
>
|
||||
<ColumnsLayout cols="events-sidebar" :limit="5">
|
||||
<ClientOnly>
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading && !entries.length" class="state-box">
|
||||
|
|
@ -66,8 +64,8 @@
|
|||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</SidebarLayout>
|
||||
</div>
|
||||
</ColumnsLayout>
|
||||
</PageShell>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -142,13 +140,6 @@ useHead({ title: 'Activity Log - Ghost Guild' })
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.activity-page {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ---- STATE BOXES ---- */
|
||||
.state-box {
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue