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

feat(dashboard): somewhat better styling of shard status page

Browse Source
This commit is contained in:
spiral 2022-06-15 00:08:47 -04:00
parent 65e2bb0234
commit ba9c074dc2
No known key found for this signature in database
GPG Key ID: 244A11E4B0BCF40E
2 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dashboard/src/lib/shard.svelte
View File

@ -48,8 +48,7 @@
.wrapper { .wrapper {
height: 55px; height: 55px;
width: 55px; width: 55px;
display: block; display: inline-block;
float: left;
} }
.shard:hover { .shard:hover {
cursor: pointer; cursor: pointer;

35
dashboard/src/pages/status.svelte
View File

@ -96,7 +96,7 @@
</script> </script>
<Container fluid> <Container>
<Row> <Row>
<Col class="mx-auto" xs={12} lg={11} xl={10}> <Col class="mx-auto" xs={12} lg={11} xl={10}>
<Card class="mb-4"> <Card class="mb-4">
@ -157,18 +157,27 @@
{#each Object.keys(clusters) as key} {#each Object.keys(clusters) as key}
<Row> <Row>
<Col class="mx-auto" xs={12} lg={11} xl={10}> <Col class="mx-auto" xs={12} lg={11} xl={10}>
<Card class="mb-4"> <div class="cluster-card">
<CardBody> <span class="cluster-text">Cluster {key} &nbsp</span>
<CardTitle style="margin-top: 8px; outline: none;"> {#each clusters[key] as shard}
Cluster {key} <ShardItem shard={shard} bind:hover={hover} />
</CardTitle> {/each}
<br> </div>
{#each clusters[key] as shard}
<ShardItem shard={shard} bind:hover={hover} />
{/each}
</CardBody>
</Card>
</Col> </Col>
</Row> </Row>
{/each} {/each}
</Container> </Container>
<style>
.cluster-card {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 2.5px;
}
.cluster-text {
min-width: 110px;
text-align: right;
}
</style>