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="rounded-md shadow border p-3">
<div class="flex"> <div class="flex">
<div class="flex-1 text-center"> <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-2xl">~75</span>
<span class="text-neutral-400">evt/24h</span> <span class="text-neutral-400">evt/24h</span>
</div> </div>
<div class="flex-1 text-center"> <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-2xl">~32</span>
<span class="text-neutral-400">mb/24h</span> <span class="text-neutral-400">mb/24h</span>
</div> </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> <span class="block text-center pb-3 text-xs text-neutral-400">EVENTS RECEIVED BY RELAY LAST 24H</span>
<div class="flex flex-col"> <div class="flex flex-col">
{#each Array(5) as _} {#each Array(5) as _}
<div class="flex p-2"> <div class="flex p-2 break-words">
<span class="flex-1 mr-10 break-words text-neutral-500">wss://relay-name.com</span> <span class="flex-1 mr-3 text-neutral-500">wss://your-relay-name.com</span>
<span class="flex-initial text-neutral-500">999 events</span> <span class="shrink text-neutral-400">999 evt</span>
</div> </div>
{/each} {/each}
</div> </div>

View File

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

View File

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