Looking better on mobile.

This commit is contained in:
Ryan Breen
2023-02-15 22:02:18 -05:00
parent 79c379f2c2
commit 91b8d6023b
2 changed files with 15 additions and 5 deletions

View File

@@ -112,13 +112,15 @@
<template x-for="(event, index) in events">
<div class="mt-3 border-solid border border-fuchsia-700 rounded-lg">
<div class="select-none flex cursor-pointer text-xl" @click="selected = selected === index ? null : index">
<div class="select-none flex cursor-pointer text-sm md:text-xl"
@click="selected = selected === index ? null : index">
<div class="flex-none w-14 p-4 font-extrabold" x-text="selected === index ? '-' : '+'"></div>
<div class="flex-1 w-64 p-4 text-base" x-text="formatDate(event.metadata.signed_at)"></div>
<div class="flex-initial w-64 p-4" x-text="event.metadata.host"></div>
<div class="flex-1 w-64 p-4" x-text="formatDate(event.metadata.signed_at)"></div>
<div class="flex-1 w-64 p-4" x-text="event.metadata.host"></div>
<div class="flex-1 w-64 p-4" x-text="formatKind(event.event.kind)"></div>
</div>
<pre class="rounded-b-lg bg-slate-200" x-html="highlight(event)" x-show="selected === index"
<pre class="rounded-b-lg bg-slate-200 text-sm md:text-xl" x-html="highlight(event)" x-show="selected === index"
x-transition:enter.opacity.delay.75ms x-transition:leave.opacity>
</pre>
</div>

View File

@@ -4,6 +4,9 @@ import { getPublicKey } from 'nostr-tools';
import { getHosts, sortByIndex } from './db';
import { getProfiles, KINDS } from './utils';
const TOMORROW = new Date();
TOMORROW.setDate(TOMORROW.getDate() + 1);
Alpine.data('eventLog', () => ({
kinds: KINDS,
events: [],
@@ -19,7 +22,7 @@ Alpine.data('eventLog', () => ({
// date view
fromCreatedAt: '2008-10-31',
toCreatedAt: new Date().toISOString().split('T')[0],
toCreatedAt: TOMORROW.toISOString().split('T')[0],
// kind view
quickKind: '',
@@ -70,6 +73,11 @@ Alpine.data('eventLog', () => ({
return new Date(epochSeconds * 1000).toUTCString();
},
formatKind(kind) {
const k = KINDS.find(([kNum, _]) => kNum === kind);
return k ? `${k[1]} (${kind})` : `Unknown (${kind})`;
},
// Properties
get fromTime() {