whekin/household-bot
1
0
Fork 0
mirror of https://github.com/whekin/household-bot.git synced 2026-03-31 17:54:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(miniapp): tighten overview screen density

Browse Source
This commit is contained in:
whekin
2026-03-11 19:58:09 +04:00
parent 53d9dea48d
commit ac48cece8a
3 changed files with 47 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/miniapp/src/index.css
View File

@@ -284,6 +284,12 @@ button {
gap: 12px; gap: 12px;
} }
.summary-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.panel { .panel {
border-radius: 24px; border-radius: 24px;
padding: 18px; padding: 18px;
@@ -904,11 +910,7 @@ button {
padding: 32px 24px 40px; padding: 32px 24px 40px;
} }
.home-grid { .summary-card-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-grid--summary {
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
} }

2
apps/miniapp/src/screens/balances-screen.tsx
View File

@@ -94,7 +94,7 @@ export function BalancesScreen(props: Props) {
</article> </article>
)} )}
</Show> </Show>
<div class="home-grid home-grid--summary"> <div class="summary-card-grid">
<FinanceSummaryCards <FinanceSummaryCards
dashboard={props.dashboard} dashboard={props.dashboard}
utilityTotalMajor={props.utilityTotalMajor} utilityTotalMajor={props.utilityTotalMajor}

74
apps/miniapp/src/screens/home-screen.tsx
View File

@@ -46,46 +46,50 @@ type Props = {
export function HomeScreen(props: Props) { export function HomeScreen(props: Props) {
if (!props.dashboard) { if (!props.dashboard) {
return ( return (
<div class="home-grid home-grid--summary"> <div class="home-grid">
<article class="stat-card"> <div class="summary-card-grid">
<span>{props.copy.remainingLabel ?? ''}</span> <article class="stat-card">
<strong>—</strong> <span>{props.copy.remainingLabel ?? ''}</span>
</article> <strong>—</strong>
<article class="stat-card"> </article>
<span>{props.copy.shareRent ?? ''}</span> <article class="stat-card">
<strong>—</strong> <span>{props.copy.shareRent ?? ''}</span>
</article> <strong>—</strong>
<article class="stat-card"> </article>
<span>{props.copy.shareUtilities ?? ''}</span> <article class="stat-card">
<strong>—</strong> <span>{props.copy.shareUtilities ?? ''}</span>
</article> <strong>—</strong>
<article class="stat-card"> </article>
<span>{props.copy.purchasesTitle ?? ''}</span> <article class="stat-card">
<strong>—</strong> <span>{props.copy.purchasesTitle ?? ''}</span>
</article> <strong>—</strong>
</article>
</div>
</div> </div>
) )
} }
return ( return (
<div class="home-grid home-grid--summary"> <div class="home-grid">
<FinanceSummaryCards <div class="summary-card-grid">
dashboard={props.dashboard} <FinanceSummaryCards
utilityTotalMajor={props.utilityTotalMajor} dashboard={props.dashboard}
purchaseTotalMajor={props.purchaseTotalMajor} utilityTotalMajor={props.utilityTotalMajor}
labels={{ purchaseTotalMajor={props.purchaseTotalMajor}
remaining: props.copy.remainingLabel ?? '', labels={{
rent: props.copy.shareRent ?? '', remaining: props.copy.remainingLabel ?? '',
utilities: props.copy.shareUtilities ?? '', rent: props.copy.shareRent ?? '',
purchases: props.copy.purchasesTitle ?? '' utilities: props.copy.shareUtilities ?? '',
}} purchases: props.copy.purchasesTitle ?? ''
/> }}
<Show when={props.readyIsAdmin}> />
<article class="stat-card"> <Show when={props.readyIsAdmin}>
<span>{props.copy.pendingRequests ?? ''}</span> <article class="stat-card">
<strong>{String(props.pendingMembersCount)}</strong> <span>{props.copy.pendingRequests ?? ''}</span>
</article> <strong>{String(props.pendingMembersCount)}</strong>
</Show> </article>
</Show>
</div>
<Show <Show
when={props.currentMemberLine} when={props.currentMemberLine}