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