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

59
gui/dashboard/tile.svelte
View File

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