liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: move some components around

Browse Source
This commit is contained in:
Spectralitree 2021-12-11 15:57:20 +01:00
parent 1418d7e7d2
commit e561bd27bc
3 changed files with 68 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/System/System.svelte Normal file
View File

@ -0,0 +1,20 @@
<script lang="ts">
import { Card, CardBody } from 'sveltestrap';
import CardsHeader from '../CardsHeader.svelte';
import SystemBody from './SystemBody.svelte';
export let user;
let editMode = false;
</script>
<Card>
<CardsHeader bind:item={user}/>
<CardBody style="border-left: 4px solid #{user.color}">
{#if !editMode}
<SystemBody bind:user={user} bind:editMode={editMode}/>
{:else}
hehe
{/if}
</CardBody>
</Card>

48
src/lib/System/SystemBody.svelte Normal file
View File

@ -0,0 +1,48 @@
<script lang="ts">
import { Row, Col, Modal, Image, Button } from 'sveltestrap';
export let user;
export let editMode: boolean;
$: htmlDescription = toHTML(user.description, {embed: true});
import { toHTML } from 'discord-markdown';
let bannerOpen = false;
const toggleBannerModal = () => (bannerOpen = !bannerOpen);
</script>
<Row>
<Col xs={12} lg={4} class="mb-2">
<b>ID:</b> {user.id}
</Col>
<Col xs={12} lg={4} class="mb-2">
<b>Name:</b> {user.name}
</Col>
{#if user.tag}
<Col xs={12} lg={4} class="mb-2">
<b>Tag:</b> {user.tag}
</Col>
{/if}
<Col xs={12} lg={4} class="mb-2">
<b>Timezone:</b> {user.timezone}
</Col>
{#if user.color}
<Col xs={12} lg={4} class="mb-2">
<b>Color:</b> {user.color}
</Col>
{/if}
{#if user.banner}
<Col xs={12} lg={3} class="mb-2">
<b>Banner:</b> <Button size="sm" color="light" on:click={toggleBannerModal}>View</Button>
<Modal isOpen={bannerOpen} toggle={toggleBannerModal}>
<div slot="external" on:click={toggleBannerModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
<Image style="display: block; margin: auto;" src={user.banner} thumbnail alt="Your system banner" />
</div>
</Modal>
</Col>
{/if}
<div class="mt-2">
<b>Description:</b><br />
{@html htmlDescription}
</div>
</Row>

52
src/lib/cards/System.svelte
View File

@ -1,52 +0,0 @@
<script lang="ts">
import { Modal, Card, CardHeader, CardBody, CardTitle, Image, ModalHeader, Col, Row, Button } from 'sveltestrap';
import CardsHeader from '../CardsHeader.svelte';
import { toHTML } from 'discord-markdown';
export let user;
$: htmlDescription = toHTML(user.description, {embed: true});
let bannerOpen = false;
const toggleBannerModal = () => (bannerOpen = !bannerOpen);
</script>
<Card>
<CardsHeader bind:item={user}/>
<CardBody style="border-left: 4px solid #{user.color}">
<Row>
<Col xs={12} lg={4} class="mb-2">
<b>ID:</b> {user.id}
</Col>
<Col xs={12} lg={4} class="mb-2">
<b>Name:</b> {user.name}
</Col>
{#if user.tag}
<Col xs={12} lg={4} class="mb-2">
<b>Tag:</b> {user.tag}
</Col>
{/if}
<Col xs={12} lg={4} class="mb-2">
<b>Timezone:</b> {user.timezone}
</Col>
{#if user.color}
<Col xs={12} lg={4} class="mb-2">
<b>Color:</b> {user.color}
</Col>
{/if}
{#if user.banner}
<Col xs={12} lg={3} class="mb-2">
<b>Banner:</b> <Button size="sm" color="light" on:click={toggleBannerModal}>View</Button>
<Modal isOpen={bannerOpen} toggle={toggleBannerModal}>
<div slot="external" on:click={toggleBannerModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
<Image style="display: block; margin: auto;" src={user.banner} thumbnail alt="Your system banner" />
</div>
</Modal>
</Col>
{/if}
<div class="mt-2">
<b>Description:</b><br />
{@html htmlDescription}
</div>
</Row>
</CardBody>
</Card>