jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(activity): migrate to PageShell + ColumnsLayout

Browse source 
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:
Jennie Robinson Faber 2026-04-08 16:45:12 +01:00
parent 89c9a5e4a2
commit eb2544a42d
2 changed files with 8 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

23
app/pages/member/activity.vue
View file

@ -1,11 +1,9 @@
<template> <template>
<div class="activity-page"> <PageShell
<PageHeader title="Activity Log"
title="Activity Log" subtitle="Your activity and milestones in the Guild"
subtitle="Your activity and milestones in the Guild" >
/> <ColumnsLayout cols="events-sidebar" :limit="5">
<SidebarLayout :limit="5">
<ClientOnly> <ClientOnly>
<!-- Loading State --> <!-- Loading State -->
<div v-if="loading && !entries.length" class="state-box"> <div v-if="loading && !entries.length" class="state-box">
@ -66,8 +64,8 @@
</div> </div>
</template> </template>
</ClientOnly> </ClientOnly>
</SidebarLayout> </ColumnsLayout>
</div> </PageShell>
</template> </template>
<script setup> <script setup>
@ -142,13 +140,6 @@ useHead({ title: 'Activity Log - Ghost Guild' })
</script> </script>
<style scoped> <style scoped>
.activity-page {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
/* ---- STATE BOXES ---- */ /* ---- STATE BOXES ---- */
.state-box { .state-box {
display: flex; display: flex;

1
e2e/visual/pages.spec.js
View file

@ -78,6 +78,7 @@ function commonMasks(page) {
page.locator('.filter-bar'), page.locator('.filter-bar'),
page.locator('.skills-bar'), page.locator('.skills-bar'),
page.locator('.connections-section'), page.locator('.connections-section'),
page.locator('.loading-state'),
] ]
} }