granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update grid layout, hide video tile when empty

Browse source
This commit is contained in:
Justin Edmund 2025-12-21 11:35:34 -08:00
parent 7cde30a427
commit b06c43385e
1 changed files with 16 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/lib/components/party/info/PartyInfoGrid.svelte
View file

@ -2,8 +2,7 @@
import type { Party } from '$lib/types/api/party'
import DescriptionTile from './DescriptionTile.svelte'
import RaidTile from './RaidTile.svelte'
import PerformanceTile from './PerformanceTile.svelte'
import SettingsTile from './SettingsTile.svelte'
import BattleTile from './BattleTile.svelte'
import VideoTile from './VideoTile.svelte'
interface Props {
@ -18,58 +17,45 @@
// Check if data exists for each tile
const hasDescription = $derived(!!party.description)
const hasRaid = $derived(!!party.raid)
const hasPerformanceData = $derived(
party.clearTime != null ||
party.buttonCount != null ||
party.chainCount != null ||
party.summonCount != null
)
const hasVideo = $derived(!!party.videoUrl)
// Show tile if: has data OR (is owner's team and can prompt to fill)
const showDescription = $derived(hasDescription || canEdit)
const showRaid = $derived(hasRaid || canEdit)
const showPerformance = $derived(hasPerformanceData || canEdit)
const showVideo = $derived(hasVideo || canEdit)
// Settings always shown - they have default values
// Video tile only shown when there's a video (no empty placeholder)
const showVideo = $derived(hasVideo)
// Battle tile always shown - settings have default values
</script>
<div class="party-info-grid">
<!-- Row 1: Description + Raid -->
<!-- Row 1: Description + Video -->
<div class="row row-1">
{#if showDescription}
<DescriptionTile description={party.description} onOpen={onOpenDescription} />
{/if}
{#if showRaid}
<RaidTile raid={party.raid} />
{#if showVideo}
<VideoTile videoUrl={party.videoUrl} />
{/if}
</div>
<!-- Row 2: Performance, Settings, Video -->
<!-- Row 2: Battle + Raid -->
<div class="row row-2">
{#if showPerformance}
<PerformanceTile
clearTime={party.clearTime}
buttonCount={party.buttonCount}
chainCount={party.chainCount}
summonCount={party.summonCount}
clickable={canEdit}
onclick={onOpenEdit}
/>
{/if}
<SettingsTile
<BattleTile
fullAuto={party.fullAuto}
autoGuard={party.autoGuard}
autoSummon={party.autoSummon}
chargeAttack={party.chargeAttack}
clearTime={party.clearTime}
buttonCount={party.buttonCount}
chainCount={party.chainCount}
summonCount={party.summonCount}
clickable={canEdit}
onclick={onOpenEdit}
/>
{#if showVideo}
<VideoTile videoUrl={party.videoUrl} />
{#if showRaid}
<RaidTile raid={party.raid} />
{/if}
</div>
</div>
@ -98,12 +84,7 @@
}
.row-2 {
grid-template-columns: repeat(3, 1fr);
// Adjust columns based on number of children
&:has(> :nth-child(2):last-child) {
grid-template-columns: repeat(2, 1fr);
}
grid-template-columns: repeat(2, 1fr);
&:has(> :only-child) {
grid-template-columns: 1fr;
@ -118,15 +99,6 @@
.row-2 {
grid-template-columns: repeat(2, 1fr);
&:has(> :nth-child(3)) {
grid-template-columns: repeat(2, 1fr);
// Third item spans full width
> :nth-child(3) {
grid-column: 1 / -1;
}
}
}
}