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

feat(dashboard): tweak status page styling

Browse Source
This commit is contained in:
Jake/Rads
2022-06-24 20:47:00 +02:00
parent 43b6792e30
commit 191136cd94
2 changed files with 44 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,8 +46,7 @@
<style> <style>
.wrapper { .wrapper {
height: 55px; position: relative;
width: 55px;
display: inline-block; display: inline-block;
} }
.shard:hover { .shard:hover {
@@ -63,10 +62,8 @@
text-align: center; text-align: center;
justify-content: center; justify-content: center;
z-index: 1; z-index: 1;
height: 50px; height: 3em;
width: 50px; width: 3em;
margin-right: 5px;
margin-bottom: 5px;
border-radius: 2px; border-radius: 2px;
-webkit-touch-callout: none; /* iOS Safari */ -webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */ -webkit-user-select: none; /* Safari */
@@ -79,10 +76,11 @@
.more-info { .more-info {
/* display: none; */ /* display: none; */
position: absolute; position: absolute;
margin-top: 3em; top: 100%;
right: -50%;
will-change: transform; will-change: transform;
min-height: 150px; min-height: 150px;
width: 200px; width: 12em;
z-index: 2; z-index: 2;
border-radius: 5px; border-radius: 5px;
background-color: #333; background-color: #333;

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

@@ -154,30 +154,51 @@
</Col> </Col>
</Row> </Row>
{/if} {/if}
{#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}> <div class="cluster-grid">
<div class="cluster-card"> {#each Object.keys(clusters) as key}
<span class="cluster-text">Cluster {key} &nbsp</span> <div class="cluster-card">
{#each clusters[key] as shard} <span class="cluster-text">Cluster {key} &nbsp</span>
<ShardItem shard={shard} bind:hover={hover} /> </div>
{/each} <div class="cluster-shards">
</div> {#each clusters[key] as shard}
</Col> <ShardItem shard={shard} bind:hover={hover} />
</Row> {/each}
{/each} </div>
{/each}
</div>
</Col>
</Row>
</Container> </Container>
<style> <style>
.cluster-card { .cluster-shards {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 2.5px; margin-bottom: 0.5em;
} }
.cluster-text { .cluster-grid {
min-width: 110px; display: grid;
text-align: right; grid-template-columns: 100%;
gap: 0.5em;
}
@media (min-width: 576px) {
.cluster-card {
text-align: right;
margin-bottom: 0.5em;
}
.cluster-text {
line-height: 3em;
}
.cluster-grid {
grid-template-columns: max-content 1fr;
}
} }
</style> </style>