refactor(account): migrate member/account to PageShell vocabulary
- Replace .member-account-page + .account-authenticated flex chains with <PageShell> - Replace <SidebarLayout> with <ColumnsLayout cols=events-sidebar> - Replace .account-columns grid with nested <ColumnsLayout cols=2> + named slots - Replace all 5 .account-col-inset wrappers with <PageSection> components - Rename .account-section--danger → .danger-section - Delete ~75 lines of layout CSS (flex chains, grid, asymmetric paddings, collapse rules)
This commit is contained in:
parent
f267b35214
commit
37fceac3fd
1 changed files with 163 additions and 259 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="member-account-page">
|
||||
<PageShell>
|
||||
<!-- Unauthenticated -->
|
||||
<div v-if="!memberData" class="loading">
|
||||
<p>Please sign in to access your account settings.</p>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="account-authenticated">
|
||||
<template v-else>
|
||||
<!-- PAGE HEADER -->
|
||||
<PageHeader
|
||||
title="Account Settings"
|
||||
|
|
@ -19,12 +19,11 @@
|
|||
/>
|
||||
|
||||
<!-- CONTENT AREA WITH EVENTS SIDEBAR -->
|
||||
<SidebarLayout>
|
||||
<div class="account-columns">
|
||||
<ColumnsLayout cols="events-sidebar">
|
||||
<ColumnsLayout cols="2">
|
||||
<!-- LEFT COLUMN: Membership Status & Email -->
|
||||
<div class="account-col-left">
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<template #left>
|
||||
<PageSection>
|
||||
<div class="section-label">Current Membership</div>
|
||||
|
||||
<div class="membership-card">
|
||||
|
|
@ -68,11 +67,9 @@
|
|||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</PageSection>
|
||||
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">Email</div>
|
||||
|
||||
<div v-if="!showEmailEdit" class="email-display">
|
||||
|
|
@ -115,11 +112,9 @@
|
|||
<div class="email-hint">
|
||||
Used for login magic links and notifications
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</PageSection>
|
||||
|
||||
<section class="account-section account-section--danger">
|
||||
<div class="account-col-inset">
|
||||
<PageSection divider="top" class="danger-section">
|
||||
<div class="section-label danger">Danger Zone</div>
|
||||
<div class="danger-zone">
|
||||
<p>
|
||||
|
|
@ -153,14 +148,12 @@
|
|||
Cancel Membership
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</PageSection>
|
||||
</template>
|
||||
|
||||
<!-- RIGHT COLUMN: Change Contribution & Circle -->
|
||||
<div class="account-col-right">
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<template #right>
|
||||
<PageSection>
|
||||
<div class="section-label">Change Contribution</div>
|
||||
|
||||
<TierPicker v-model="selectedTier" :tiers="tiers" />
|
||||
|
|
@ -177,11 +170,9 @@
|
|||
>
|
||||
{{ isUpdating ? "Updating…" : "Update Contribution" }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</PageSection>
|
||||
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">Change Circle</div>
|
||||
|
||||
<CirclePicker
|
||||
|
|
@ -195,13 +186,12 @@
|
|||
>
|
||||
{{ isUpdating ? "Updating…" : "Update Circle" }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarLayout>
|
||||
</div>
|
||||
</div>
|
||||
</PageSection>
|
||||
</template>
|
||||
</ColumnsLayout>
|
||||
</ColumnsLayout>
|
||||
</template>
|
||||
</PageShell>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -385,82 +375,11 @@ const confirmCancelMembership = async () => {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.member-account-page {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
flex: 1;
|
||||
padding: 48px 32px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.account-authenticated {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ---- TWO-COLUMN LAYOUT ---- */
|
||||
.account-columns {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
}
|
||||
.account-col-left,
|
||||
.account-col-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.account-col-left {
|
||||
border-right: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
/* Full-column rules: border on block-level section */
|
||||
.account-section {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.account-section + .account-section {
|
||||
margin-top: 24px;
|
||||
border-top: 1px dashed var(--border);
|
||||
padding-top: 20px;
|
||||
}
|
||||
.account-section + .account-section.account-section--danger {
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.account-col-left > .account-section:first-child .account-col-inset,
|
||||
.account-col-right > .account-section:first-child .account-col-inset {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.account-col-left > .account-section:last-child .account-col-inset,
|
||||
.account-col-right > .account-section:last-child .account-col-inset {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.account-col-left .account-col-inset {
|
||||
padding-left: 28px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.account-col-right .account-col-inset {
|
||||
padding-left: 24px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
/* ---- MEMBERSHIP CARD ---- */
|
||||
.membership-card {
|
||||
border: 1px dashed var(--border);
|
||||
|
|
@ -567,14 +486,14 @@ const confirmCancelMembership = async () => {
|
|||
}
|
||||
|
||||
/* ---- DANGER ZONE ---- */
|
||||
.account-section--danger {
|
||||
.danger-section {
|
||||
background: var(--ember-bg);
|
||||
}
|
||||
|
||||
.account-section--danger .section-label.danger {
|
||||
.danger-section .section-label.danger {
|
||||
color: var(--ember);
|
||||
}
|
||||
.account-section--danger .danger-zone p {
|
||||
.danger-section .danger-zone p {
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
|
|
@ -610,19 +529,4 @@ const confirmCancelMembership = async () => {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 1024px) {
|
||||
.account-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.account-col-left {
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
.account-col-left .account-col-inset,
|
||||
.account-col-right .account-col-inset {
|
||||
padding-left: 28px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue