problem: icons on rocket card have a bad layout

resolve https://github.com/nostrocket/hypergolic/issues/99
This commit is contained in:
Bob
2024-08-19 11:51:38 +08:00
parent a42372f99b
commit 98ef54348a

View File

@@ -19,8 +19,13 @@
<Card.Header> <Card.Header>
<Card.Title> <Card.Title>
<div class="flex flex-nowrap items-stretch"> <div class="flex flex-nowrap items-stretch">
{rocket.Name()}<BadgeMaker right <div>
><div slot="icon"><RocketIcon /></div> {rocket.Name()}
</div>
<BadgeMaker right>
<div slot="icon">
<RocketIcon />
</div>
<div slot="content"> <div slot="content">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Avatar <Avatar
@@ -35,29 +40,31 @@
class="inline-block truncate" class="inline-block truncate"
/> />
</div> </div>
</div></BadgeMaker </div>
> </BadgeMaker>
</div> </div>
</Card.Title> </Card.Title>
{#if rocket.Mission()}<Card.Description>MISSION: {rocket.Mission()}</Card.Description> {#if rocket.Mission()}<Card.Description>MISSION: {rocket.Mission()}</Card.Description>
{/if} {/if}
</Card.Header> </Card.Header>
<Card.Content> <Card.Content>
<BadgeMaker <div class="flex items-center justify-start gap-2">
><div slot="icon"><ShoppingCart /></div> <BadgeMaker
<div slot="content">{rocket.Products().size}</div></BadgeMaker ><div slot="icon"><ShoppingCart /></div>
> <div slot="content">{rocket.Products().size}</div></BadgeMaker
<BadgeMaker >
><div slot="icon"><BicepsFlexed /></div> <BadgeMaker
<div slot="content">{rocket.ApprovedMeritRequests().size}</div></BadgeMaker ><div slot="icon"><BicepsFlexed /></div>
> <div slot="content">{rocket.ApprovedMeritRequests().size}</div></BadgeMaker
<BadgeMaker >
><div slot="icon"><User /></div> <BadgeMaker
<div slot="content">{rocket.Owners().size}</div></BadgeMaker ><div slot="icon"><User /></div>
> <div slot="content">{rocket.Owners().size}</div></BadgeMaker
>
</div>
</Card.Content> </Card.Content>
<Card.Footer> <Card.Footer>
<div class="flex flex-wrap justify-between gap-2 lg:gap-1"> <div class="flex w-full flex-col flex-wrap justify-between gap-2 lg:gap-1">
{#if $devmode} {#if $devmode}
<Button <Button
on:click={() => { on:click={() => {
@@ -66,6 +73,7 @@
variant="outline">Print to Console</Button variant="outline">Print to Console</Button
>{/if} >{/if}
<Button <Button
class="w-full"
on:click={() => { on:click={() => {
goto(`${base}/rockets/${rocket.URL()}`); goto(`${base}/rockets/${rocket.URL()}`);
}}>View Full Rocket <ChevronRight class="h-4 w-4" /></Button }}>View Full Rocket <ChevronRight class="h-4 w-4" /></Button