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