Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-06-12 21:27:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

web/donate: add a share card with qr and buttons

Browse Source 
also:
- fixed more scaling quirks
- fixed thick icons
- fixed icon padding
This commit is contained in:
wukko
2024-08-09 14:35:55 +06:00
parent e45aa2bdf6
commit 21ef35ea20
8 changed files with 209 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/donate/DonateCardContainer.svelte
View File

@ -75,9 +75,10 @@
align-items: center;
font-size: 16px;
gap: 4px;
font-weight: 500;
}
@media screen and (max-width: 550px) {
@media screen and (max-width: 865px) {
:global(.donate-card) {
--donate-card-main-padding: 18px;
}

29
web/src/components/donate/DonateOptionsCard.svelte
View File

@ -62,9 +62,11 @@
role="tab"
>
<div class="donation-type-icon"><IconCoin /></div>
<div class="donate-card-title">{$t("donate.card.once")}</div>
<div class="donate-card-subtitle">
{$t("donate.card.processor.stripe")}
<div class="donation-type-text">
<div class="donate-card-title">{$t("donate.card.once")}</div>
<div class="donate-card-subtitle">
{$t("donate.card.processor.stripe")}
</div>
</div>
</button>
<button
@ -76,9 +78,11 @@
role="tab"
>
<div class="donation-type-icon"><IconCalendarRepeat /></div>
<div class="donate-card-title">{$t("donate.card.monthly")}</div>
<div class="donate-card-subtitle">
{$t("donate.card.processor.liberapay")}
<div class="donation-type-text">
<div class="donate-card-title">{$t("donate.card.monthly")}</div>
<div class="donate-card-subtitle">
{$t("donate.card.processor.liberapay")}
</div>
</div>
</button>
</div>
@ -133,7 +137,7 @@
<style>
:global(#donation-box) {
max-width: 480px;
min-width: 350px;
padding: var(--donate-card-main-padding) 0;
}
@ -153,11 +157,22 @@
.donation-type {
width: 100%;
overflow: hidden;
gap: 2px;
}
.donation-type-icon {
display: flex;
}
.donation-type-icon :global(svg) {
width: 28px;
height: 28px;
stroke-width: 1.8px;
}
.donation-type-text {
display: flex;
flex-direction: column;
}
#donation-options {

164
web/src/components/donate/DonateShareCard.svelte Normal file
View File

@ -0,0 +1,164 @@
<script lang="ts">
import { contacts } from "$lib/env";
import { t } from "$lib/i18n/translations";
import { openURL, copyURL, shareURL } from "$lib/download";
import DonateCardContainer from "$components/donate/DonateCardContainer.svelte";
import IconShare2 from "@tabler/icons-svelte/IconShare2.svelte";
import IconBrandGithub from "@tabler/icons-svelte/IconBrandGithub.svelte";
import IconBrandTwitter from "@tabler/icons-svelte/IconBrandTwitter.svelte";
import IconMoodSmileBeam from "@tabler/icons-svelte/IconMoodSmileBeam.svelte";
import CobaltQr from "$lib/icons/CobaltQR.svelte";
import CopyIcon from "$components/misc/CopyIcon.svelte";
const cobaltUrl = "https://cobalt.tools/";
let copied = false;
$: if (copied) {
setTimeout(() => {
copied = false;
}, 1500);
}
</script>
<DonateCardContainer id="share-box">
<div id="share-card-header">
<div class="share-header-icon"><IconMoodSmileBeam /></div>
<div class="donate-card-title">{$t("donate.share.title")}</div>
</div>
<div id="share-card-body">
<div id="share-qr">
<CobaltQr />
</div>
<div id="share-buttons">
<button
id="share-button-copy"
class="share-button"
on:click={async () => {
copyURL(cobaltUrl);
copied = true;
}}
aria-label={copied ? $t("a11y.dialog.saving.copied") : ""}
>
<div class="share-button-icon">
<CopyIcon check={copied} />
</div>
copy
</button>
<button
id="share-button-share"
class="share-button"
on:click={async () => shareURL(cobaltUrl)}
>
<div class="share-button-icon">
<IconShare2 />
</div>
share
</button>
<button
id="share-button-github"
class="share-button"
on:click={async () => {
openURL(contacts.github);
copied = true;
}}
>
<div class="share-button-icon">
<IconBrandGithub />
</div>
star
</button>
<button
id="share-button-twitter"
class="share-button"
on:click={async () => {
openURL(contacts.twitter);
copied = true;
}}
>
<div class="share-button-icon">
<IconBrandTwitter />
</div>
follow
</button>
</div>
</div>
<div class="donate-card-subtitle share-footer-link">cobalt.tools</div>
</DonateCardContainer>
<style>
:global(#share-box) {
padding: var(--donate-card-main-padding);
min-width: 300px;
width: fit-content;
}
#share-card-header {
display: flex;
flex-direction: column;
gap: 2px;
}
.share-header-icon {
display: flex;
}
.share-header-icon :global(svg) {
width: 28px;
height: 28px;
stroke-width: 1.8px;
}
#share-card-body {
display: flex;
flex-direction: row;
gap: 12px;
max-height: 140px;
}
#share-qr :global(svg) {
width: 140px;
height: 140px;
border-radius: 12px;
}
#share-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
gap: 6px;
}
.share-button {
align-items: center;
width: 100%;
padding: 0 10px;
font-size: 13px;
gap: 2px;
}
.share-button-icon {
width: 21px;
height: 21px;
display: flex;
}
.share-button-icon :global(svg) {
width: 21px;
height: 21px;
stroke-width: 1.8px;
}
@media screen and (max-width: 550px) {
:global(#share-box) {
width: calc(100% - var(--donate-card-main-padding) * 2);
}
}
</style>

1
web/src/components/donate/DonationOption.svelte
View File

@ -22,6 +22,7 @@
.donation-option :global(svg) {
width: 20px;
height: 20px;
stroke-width: 1.8px;
}
@media screen and (max-width: 550px) {