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

reorganize CrewHeader for full-width belowTitle

Browse source
This commit is contained in:
Justin Edmund 2025-12-17 22:40:09 -08:00
parent 76484b7bb0
commit 60b31e2a71
1 changed files with 33 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/lib/components/crew/CrewHeader.svelte
View file

@ -23,26 +23,30 @@
</script> </script>
<div class="section-header"> <div class="section-header">
<div class="header-info"> <div class="header-top-row">
<div class="title-row"> <div class="header-info">
{#if backHref} <div class="title-row">
<Button variant="ghost" size="small" iconOnly icon="arrow-left" href={backHref} /> {#if backHref}
{/if} <Button variant="ghost" size="small" iconOnly icon="arrow-left" href={backHref} />
<span class="header-title">{title}</span> {/if}
{#if subtitle} <span class="header-title">{title}</span>
<span class="header-subtitle">[{subtitle}]</span> {#if subtitle}
<span class="header-subtitle">[{subtitle}]</span>
{/if}
</div>
{#if description}
<p class="header-description">{description}</p>
{/if} {/if}
</div> </div>
{#if description} {#if actions}
<p class="header-description">{description}</p> <div class="header-actions">
{/if} {@render actions()}
{#if belowTitle} </div>
{@render belowTitle()}
{/if} {/if}
</div> </div>
{#if actions} {#if belowTitle}
<div class="header-actions"> <div class="header-below">
{@render actions()} {@render belowTitle()}
</div> </div>
{/if} {/if}
</div> </div>
@ -53,18 +57,29 @@
.section-header { .section-header {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: flex-start; gap: spacing.$unit;
padding: spacing.$unit-2x; padding: spacing.$unit-2x;
border-bottom: 1px solid rgba(0, 0, 0, 0.08); border-bottom: 1px solid rgba(0, 0, 0, 0.08);
} }
.header-top-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
.header-info { .header-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: spacing.$unit; gap: spacing.$unit;
} }
.header-below {
width: 100%;
}
.title-row { .title-row {
display: flex; display: flex;
align-items: center; align-items: center;