smartyellow/status
1
0
Fork 0
mirror of https://github.com/smartyellow/status.git synced 2025-01-18 21:47:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moved time to bottom

Browse Source 
Signed-off-by: Romein van Buren <romein@vburen.nl>
This commit is contained in:
Romein van Buren 2022-07-12 12:38:57 +02:00
parent 50c819cbd1
commit f69dba437b
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
2 changed files with 37 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
gui/dashboard/tile-rawvalue.svelte
View File

@ -12,7 +12,7 @@
</script>
<Tile {title} {subtitle} {color} {date} {since} {center}>
<div class="value {color}" style:font-weight={weight} class:center>
<div class="value {color}" style:font-weight={weight}>
{value}
</div>
</Tile>
@ -23,8 +23,4 @@
font-weight: 600;
margin-top: auto;
}
.value.center {
margin: auto 0;
}
</style>

59
gui/dashboard/tile.svelte
View File

@ -29,30 +29,29 @@
});
</script>
<div class="tile {color}">
{#if title || subtitle || date}
<div class="tile {color}" class:center>
{#if title || subtitle}
<div class="desc">
<div>
{#if title}
<div class="title">{title}</div>
{/if}
{#if title}
<div class="title">{title}</div>
{/if}
{#if subtitle}
<div class="subtitle">{subtitle}</div>
{/if}
</div>
{#if date || since}
<div class="time">
{formattedDate}
{#if date && since}<br />{/if}
{formattedDuration}
</div>
{#if subtitle}
<div class="subtitle">{subtitle}</div>
{/if}
</div>
{/if}
<div class="content" class:center><slot /></div>
<div class="bottom" class:center>
<div class="content"><slot /></div>
{#if date || since}
<div class="time">
{formattedDate}
{#if date && since}<br />{/if}
{formattedDuration}
</div>
{/if}
</div>
</div>
<style>
@ -82,13 +81,17 @@
border-color: var(--grey);
}
.tile.grey .content {
.tile.grey .bottom {
color: var(--grey);
}
.tile.center {
align-items: center;
justify-content: center;
}
.desc {
margin-bottom: 1rem;
display: flex;
}
.desc .title {
@ -101,19 +104,29 @@
font-size: 1.5vw;
}
.desc .time {
.bottom {
display: flex;
margin-top: auto;
}
.bottom .time {
margin-left: auto;
opacity: 0.6;
margin-left: auto;
font-size: 1.3vw;
text-align: right;
}
.content {
.bottom .content {
flex-grow: 1;
display: flex;
}
.content.center {
.bottom.center {
margin-top: 0;
}
.bottom.center .content {
justify-content: center;
align-items: center;
}