Oliver/Gravwell-Online
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Allow half-ing the card for the order-preview

Browse source
This commit is contained in:
Oliver Akins 2022-07-30 17:44:17 -06:00
parent e4dfc8aa3f
commit 4601ed480c
No known key found for this signature in database
GPG key ID: 3C2014AF9457AF99
1 changed files with 13 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

17
web-svelte/src/components/Card.svelte
View file

@ -7,6 +7,7 @@ export let hidden: boolean = false;
export let button: boolean = true; export let button: boolean = true;
export let buttonText: string = "Use Fuel Card"; export let buttonText: string = "Use Fuel Card";
export let card: FuelCard; export let card: FuelCard;
export let half: boolean = false;
const emit = createEventDispatcher(); const emit = createEventDispatcher();
@ -27,7 +28,7 @@ if (card.type == "stationary") {
<div <div
class="card {hidden ? 'hidden' : ''}" class="card {hidden ? 'hidden' : ''} {half ? 'half' : ''}"
style="--colour: {colour};" style="--colour: {colour};"
on:mouseenter="{() => emit(`hover`, { card, visible: true })}" on:mouseenter="{() => emit(`hover`, { card, visible: true })}"
on:mouseleave="{() => emit(`hover`, { card, visible: false })}" on:mouseleave="{() => emit(`hover`, { card, visible: false })}"
@ -40,7 +41,7 @@ if (card.type == "stationary") {
<h1>{card.symbol}</h1> <h1>{card.symbol}</h1>
{card.name} {card.name}
</div> </div>
{#if button} {#if button && !half}
<div class="button-container"> <div class="button-container">
<SciFiButton <SciFiButton
classes="use-fuel-card-button" classes="use-fuel-card-button"
@ -99,7 +100,7 @@ $border-radius: 10px;
height: $size; height: $size;
&.hexagon { &.hexagon {
background-image: url(/public/assets/hexagon.svg); background-image: url(/assets/hexagon.svg);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 85%; background-size: 85%;
@ -107,7 +108,7 @@ $border-radius: 10px;
} }
&.circle { &.circle {
background-image: url(/public/assets/circle.svg); background-image: url(/assets/circle.svg);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 85%; background-size: 85%;
@ -125,5 +126,13 @@ $border-radius: 10px;
} }
} }
&.half {
padding-top: 15px;
padding-bottom: 15px;
> .main-content {
margin-bottom: unset;
}
}
} }
</style> </style>