multiple minor redesigns on index.svelte (tweet, relay, average)

This commit is contained in:
Vincent Liao
2022-02-25 11:19:55 +07:00
parent d2e0190341
commit 6e355b61b8
5 changed files with 16 additions and 9 deletions

View File

@@ -1,12 +1,12 @@
<div class="rounded-md shadow border p-3">
<div class="flex">
<div class="flex-1 text-center">
<span class="block text-center pb-3 text-xs text-neutral-400">RELAY STORES</span>
<span class="block text-center mb-1 text-xs text-neutral-400">RELAY STORES</span>
<span class="text-2xl">~75</span>
<span class="text-neutral-400">evt/24h</span>
</div>
<div class="flex-1 text-center">
<span class="block text-center pb-3 text-xs text-neutral-400">NETWORK STORES</span>
<span class="block text-center mb-1 text-xs text-neutral-400">NETWORK STORES</span>
<span class="text-2xl">~32</span>
<span class="text-neutral-400">mb/24h</span>
</div>

6
src/lib/Dots.svelte Normal file
View File

@@ -0,0 +1,6 @@
<!-- separator of sections -->
<div class="flex my-5">
<div class="flex-1"></div>
<div>· · ·</div>
<div class="flex-1"></div>
</div>

View File

@@ -5,9 +5,9 @@
<span class="block text-center pb-3 text-xs text-neutral-400">EVENTS RECEIVED BY RELAY LAST 24H</span>
<div class="flex flex-col">
{#each Array(5) as _}
<div class="flex p-2">
<span class="flex-1 mr-10 break-words text-neutral-500">wss://relay-name.com</span>
<span class="flex-initial text-neutral-500">999 events</span>
<div class="flex p-2 break-words">
<span class="flex-1 mr-3 text-neutral-500">wss://your-relay-name.com</span>
<span class="shrink text-neutral-400">999 evt</span>
</div>
{/each}
</div>

View File

@@ -7,7 +7,7 @@
<div class="p-3 rounded-md">
<div class="flex justify-between mb-2">
<span class="font-bold">{pubkey}</span>
<span>{pubkey}</span>
<span class="text-neutral-400">{time}</span>
</div>
{#if replied}
@@ -16,8 +16,8 @@
<span class="text-sm">{replied.pubkey}</span>
<div></div>
</div>
<div class="text-neutral-500 text-sm break-words">{replied.message}</div>
<div class="text-neutral-400 text-sm break-words">{replied.message}</div>
</div>
{/if}
<div class="mb-2 break-words">{message}</div>
<div class="mb-2 break-words text-neutral-600">{message}</div>
</div>

View File

@@ -6,6 +6,7 @@
import Latest from '$lib/Latest.svelte';
import Average from '$lib/Average.svelte';
import Unique from '$lib/Unique.svelte';
import Dots from '$lib/Dots.svelte';
</script>
<section>
@@ -17,7 +18,7 @@
<Activity/>
<div class="mb-3"></div>
<Relay/>
<div class="mb-3"></div>
<Dots/>
<Latest/>
<div class="mb-3"></div>
<Unique/>