web/about/community: redesign the page, add descriptions
This commit is contained in:
wukko
116
web/src/components/about/AboutSupport.svelte
Normal file
116
web/src/components/about/AboutSupport.svelte
Normal file
@@ -0,0 +1,116 @@
|
||||
<script lang="ts">
|
||||
import { t } from "$lib/i18n/translations";
|
||||
import { openURL } from "$lib/download";
|
||||
|
||||
import IconExternalLink from "@tabler/icons-svelte/IconExternalLink.svelte";
|
||||
|
||||
import IconBrandGithub from "@tabler/icons-svelte/IconBrandGithub.svelte";
|
||||
import IconBrandTwitter from "@tabler/icons-svelte/IconBrandTwitter.svelte";
|
||||
import IconBrandDiscord from "@tabler/icons-svelte/IconBrandDiscord.svelte";
|
||||
import IconBrandTelegram from "@tabler/icons-svelte/IconBrandTelegram.svelte";
|
||||
|
||||
export let platform: "github" | "discord" | "twitter" | "telegram";
|
||||
export let externalLink: string;
|
||||
|
||||
const platformIcons = {
|
||||
github: {
|
||||
icon: IconBrandGithub,
|
||||
color: "var(--secondary)",
|
||||
},
|
||||
discord: {
|
||||
icon: IconBrandDiscord,
|
||||
color: "#5865f2",
|
||||
},
|
||||
twitter: {
|
||||
icon: IconBrandTwitter,
|
||||
color: "#1da1f2",
|
||||
},
|
||||
telegram: {
|
||||
icon: IconBrandTelegram,
|
||||
color: "#1c9efb",
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="support-card"
|
||||
role="link"
|
||||
on:click={() => {
|
||||
openURL(externalLink);
|
||||
}}
|
||||
>
|
||||
<div class="support-card-header">
|
||||
<div
|
||||
class="icon-holder support-icon-{platform}"
|
||||
style="background-color: {platformIcons[platform].color}"
|
||||
>
|
||||
<svelte:component this={platformIcons[platform].icon} />
|
||||
</div>
|
||||
<div class="support-card-title">
|
||||
{platform}
|
||||
<IconExternalLink />
|
||||
</div>
|
||||
</div>
|
||||
<div class="subtext support-card-description">
|
||||
{$t(`about.support.${platform}`)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.support-card {
|
||||
padding: var(--padding);
|
||||
gap: 4px;
|
||||
height: fit-content;
|
||||
|
||||
text-align: left;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.support-card-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.icon-holder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--gray);
|
||||
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.icon-holder :global(svg) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 1.5px;
|
||||
stroke: var(--white);
|
||||
}
|
||||
|
||||
.support-card-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.support-card-title :global(svg) {
|
||||
stroke: var(--secondary);
|
||||
opacity: 0.5;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.support-card-description {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:global([data-theme="dark"]) .support-icon-github :global(svg) {
|
||||
stroke: var(--primary);
|
||||
}
|
||||
</style>
|
||||
@@ -4,61 +4,76 @@
|
||||
import { contacts } from "$lib/env";
|
||||
import { t } from "$lib/i18n/translations";
|
||||
|
||||
import DonateAltItem from "$components/donate/DonateAltItem.svelte";
|
||||
import AboutSupport from "$components/about/AboutSupport.svelte";
|
||||
|
||||
let buttonContainerWidth: number;
|
||||
</script>
|
||||
|
||||
<!--
|
||||
this page is not final and is more of a quick mockup. this is why donate alt item is used for links.
|
||||
-->
|
||||
<div id="community-body">
|
||||
{#if $locale !== "ru"}
|
||||
<DonateAltItem
|
||||
type="open"
|
||||
name={$t("about.community.discord")}
|
||||
address={contacts.discord}
|
||||
<div id="support-page">
|
||||
<div
|
||||
id="support-buttons"
|
||||
bind:offsetWidth={buttonContainerWidth}
|
||||
|
||||
class:two={$locale === "ru"}
|
||||
class:one={buttonContainerWidth < 500}
|
||||
>
|
||||
<AboutSupport
|
||||
platform="github"
|
||||
externalLink={contacts.github}
|
||||
/>
|
||||
|
||||
<DonateAltItem
|
||||
type="open"
|
||||
name={$t("about.community.twitter")}
|
||||
address={contacts.twitter}
|
||||
title="@justusecobalt"
|
||||
/>
|
||||
{/if}
|
||||
{#if $locale === "ru"}
|
||||
<AboutSupport
|
||||
platform="telegram"
|
||||
externalLink={contacts.telegram_ru}
|
||||
/>
|
||||
{:else}
|
||||
<AboutSupport
|
||||
platform="discord"
|
||||
externalLink={contacts.discord}
|
||||
/>
|
||||
<AboutSupport
|
||||
platform="twitter"
|
||||
externalLink={contacts.twitter}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<DonateAltItem
|
||||
type="open"
|
||||
name={$t("about.community.github")}
|
||||
address={contacts.github}
|
||||
/>
|
||||
<div class="subtext support-note">
|
||||
{$t("about.support.description.issue")}
|
||||
|
||||
<DonateAltItem
|
||||
type="open"
|
||||
name={$t("about.community.email")}
|
||||
address="mailto:{contacts.email}"
|
||||
title="{contacts.email}"
|
||||
/>
|
||||
{#if $locale !== "ru"}
|
||||
{$t("about.support.description.help")}
|
||||
{/if}
|
||||
|
||||
{#if $locale === "ru"}
|
||||
<DonateAltItem
|
||||
type="open"
|
||||
name={$t("about.community.telegram")}
|
||||
address={contacts.telegram_ru}
|
||||
title="@justusecobalt_ru"
|
||||
/>
|
||||
{/if}
|
||||
{$t("about.support.description.best-effort")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#community-body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
#support-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1030px) {
|
||||
#community-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
#support-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
overflow-x: scroll;
|
||||
gap: var(--padding);
|
||||
}
|
||||
|
||||
#support-buttons.two {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
#support-buttons.one {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.support-note {
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user