blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web/donate: bring up repeated card css to container

Browse source 
also fixed some scaling quirks on mobile
This commit is contained in:
wukko 2024-08-09 13:13:48 +06:00
parent 209833c8ea
commit 937d12ddff
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
4 changed files with 121 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
web/src/components/donate/DonateCardContainer.svelte Normal file
View file

@ -0,0 +1,85 @@
<script lang="ts">
export let id: string;
</script>
<div {id} class="donate-card">
<slot></slot>
</div>
<style>
:global(.donate-card) {
--donate-card-main-padding: var(--donate-border-radius);
--donate-card-padding: 12px;
display: flex;
flex-direction: column;
width: 100%;
border-radius: var(--donate-border-radius);
gap: calc(var(--donate-card-main-padding) / 2);
color: white;
background: linear-gradient(
180deg,
var(--donate-gradient-end) 0%,
var(--donate-gradient-start) 80%
);
box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--donate-border-opacity))
inset;
}
:global(.donate-card button) {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
border-radius: var(--donate-card-padding);
background: rgba(255, 255, 255, 0.05);
padding: 14px 18px;
color: var(--white);
gap: 0;
letter-spacing: -0.3px;
}
:global(.donate-card button:not(:focus-visible)) {
box-shadow: none;
}
:global(.donate-card button:active) {
background: rgba(255, 255, 255, 0.1);
}
@media (hover: hover) {
:global(.donate-card button:hover) {
background: rgba(255, 255, 255, 0.1);
}
}
:global(.donate-card button.selected) {
background: rgba(255, 255, 255, 0.15);
}
:global(.donate-card button.selected:not(:focus-visible)) {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset !important;
}
:global(.donate-card-subtitle) {
font-size: 13px;
color: var(--white);
opacity: 0.5;
line-height: 1.5;
}
:global(.donate-card-title) {
display: flex;
align-items: center;
font-size: 16px;
gap: 4px;
}
@media screen and (max-width: 550px) {
:global(.donate-card) {
--donate-card-main-padding: 18px;
}
}
</style>

113
web/src/components/donate/DonateOptionsCard.svelte
View file

@ -5,6 +5,8 @@
import IconCoin from "@tabler/icons-svelte/IconCoin.svelte"; import IconCoin from "@tabler/icons-svelte/IconCoin.svelte";
import IconCalendarRepeat from "@tabler/icons-svelte/IconCalendarRepeat.svelte"; import IconCalendarRepeat from "@tabler/icons-svelte/IconCalendarRepeat.svelte";
import DonateCardContainer from "$components/donate/DonateCardContainer.svelte";
import DonationOption from "$components/donate/DonationOption.svelte"; import DonationOption from "$components/donate/DonationOption.svelte";
import IconCup from "@tabler/icons-svelte/IconCup.svelte"; import IconCup from "@tabler/icons-svelte/IconCup.svelte";
@ -49,7 +51,7 @@
}; };
</script> </script>
<div id="donation-box"> <DonateCardContainer id="donation-box">
<div id="donation-types" role="tablist" aria-orientation="horizontal"> <div id="donation-types" role="tablist" aria-orientation="horizontal">
<button <button
id="donation-type-once" id="donation-type-once"
@ -60,8 +62,8 @@
role="tab" role="tab"
> >
<div class="donation-type-icon"><IconCoin /></div> <div class="donation-type-icon"><IconCoin /></div>
<div class="donation-title">{$t("donate.card.once")}</div> <div class="donate-card-title">{$t("donate.card.once")}</div>
<div class="donation-subtitle"> <div class="donate-card-subtitle">
{$t("donate.card.processor.stripe")} {$t("donate.card.processor.stripe")}
</div> </div>
</button> </button>
@ -74,8 +76,8 @@
role="tab" role="tab"
> >
<div class="donation-type-icon"><IconCalendarRepeat /></div> <div class="donation-type-icon"><IconCalendarRepeat /></div>
<div class="donation-title">{$t("donate.card.monthly")}</div> <div class="donate-card-title">{$t("donate.card.monthly")}</div>
<div class="donation-subtitle"> <div class="donate-card-subtitle">
{$t("donate.card.processor.liberapay")} {$t("donate.card.processor.liberapay")}
</div> </div>
</button> </button>
@ -124,111 +126,40 @@
<IconArrowRight /> <IconArrowRight />
</button> </button>
</div> </div>
<div class="donation-subtitle processor-mobile"> <div class="donate-card-subtitle processor-mobile">
{$t(`donate.card.processor.${processor}`)} {$t(`donate.card.processor.${processor}`)}
</div> </div>
</div> </DonateCardContainer>
<style> <style>
#donation-box { :global(#donation-box) {
--donation-box-main-padding: var(--donate-border-radius);
--donation-box-padding: 12px;
display: flex;
flex-direction: column;
width: 100%;
max-width: 480px; max-width: 480px;
padding: var(--donate-card-main-padding) 0;
padding: var(--donation-box-main-padding) 0;
border-radius: var(--donate-border-radius);
gap: calc(var(--donation-box-main-padding) / 2);
color: white;
background: linear-gradient(
180deg,
var(--donate-gradient-end) 0%,
var(--donate-gradient-start) 80%
);
box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--donate-border-opacity))
inset;
} }
#donation-types, #donation-types,
#donation-options, #donation-options,
#donation-custom { #donation-custom {
padding: 0 var(--donation-box-main-padding); padding: 0 var(--donate-card-main-padding);
} }
#donation-types { #donation-types {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: var(--donation-box-padding); gap: var(--donate-card-padding);
overflow: scroll; overflow: scroll;
} }
.donation-type,
:global(.donation-option) {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
border-radius: var(--donation-box-padding);
background: rgba(255, 255, 255, 0.05);
padding: 14px 18px;
color: var(--white);
gap: 0;
letter-spacing: -0.3px;
}
.donation-type { .donation-type {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
:global(#donation-box button:not(:focus-visible)) {
box-shadow: none;
}
:global(#donation-box button:active) {
background: rgba(255, 255, 255, 0.1);
}
@media (hover: hover) {
:global(#donation-box button:hover) {
background: rgba(255, 255, 255, 0.1);
}
}
.donation-type.selected {
background: rgba(255, 255, 255, 0.15);
}
.donation-type.selected:not(:focus-visible) {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset !important;
}
.donation-subtitle {
line-height: 1.5;
}
.donation-type-icon :global(svg) { .donation-type-icon :global(svg) {
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
:global(.donation-title) {
display: flex;
align-items: center;
font-size: 16px;
gap: 4px;
}
:global(.donation-subtitle) {
font-size: 13px;
color: var(--white);
opacity: 0.5;
}
#donation-options { #donation-options {
display: flex; display: flex;
overflow-x: scroll; overflow-x: scroll;
@ -324,19 +255,23 @@
.processor-mobile { .processor-mobile {
display: none; display: none;
text-align: center; text-align: center;
font-size: 13px;
} }
@media screen and (max-width: 550px) { @media screen and (max-width: 550px) {
#donation-box { :global(#donation-box .donate-card-title) {
--donation-box-main-padding: 18px;
}
.donation-title {
font-size: 14px; font-size: 14px;
} }
.donation-type .donation-subtitle { :global(#donation-box .donate-card-subtitle) {
font-size: 12px;
}
.donation-type-icon :global(svg) {
width: 26px;
height: 26px;
}
.donation-type .donate-card-subtitle {
display: none; display: none;
} }

13
web/src/components/donate/DonationOption.svelte
View file

@ -7,15 +7,15 @@
</script> </script>
<button class="donation-option" on:click={click}> <button class="donation-option" on:click={click}>
<div class="donation-title"> <div class="donate-card-title">
<slot></slot> <slot></slot>
${price} ${price}
</div> </div>
<div class="donation-subtitle">{desc}</div> <div class="donate-card-subtitle">{desc}</div>
</button> </button>
<style> <style>
.donation-option .donation-subtitle { .donation-option .donate-card-subtitle {
white-space: nowrap; white-space: nowrap;
} }
@ -23,4 +23,11 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
@media screen and (max-width: 550px) {
.donation-option :global(svg) {
width: 18px;
height: 18px;
}
}
</style> </style>

2
web/src/routes/donate/+page.svelte
View file

@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import "@fontsource/redaction-10/400.css"; import "@fontsource/redaction-10/400.css";
import { t } from "$lib/i18n/translations"; import { t } from "$lib/i18n/translations";
import DonateBanner from "$components/donate/DonateBanner.svelte"; import DonateBanner from "$components/donate/DonateBanner.svelte";
import DonateOptionsCard from "$components/donate/DonateOptionsCard.svelte"; import DonateOptionsCard from "$components/donate/DonateOptionsCard.svelte";
</script> </script>