tracks lexicons and how many times they appeared on the jetstream
feat(client): improve styling a lot to work better on mobile and different screen sizes
+29
-22
+21
-14
client/src/lib/components/EventCard.svelte
+21
-14
client/src/lib/components/EventCard.svelte
···
1
1
<script lang="ts">
2
2
import { formatNumber, formatTimestamp } from "$lib/format";
3
-
import type { EventRecord } from "$lib/types";
3
+
import type { NsidCount } from "$lib/types";
4
4
import { onMount, onDestroy } from "svelte";
5
5
6
6
interface Props {
7
-
event: EventRecord;
7
+
event: NsidCount;
8
8
index: number;
9
9
}
10
10
···
19
19
let isAnimating = $state(false);
20
20
21
21
// Constants for border behavior
22
-
const MAX_BORDER_THICKNESS = 7; // Maximum border thickness in pixels
22
+
const MAX_BORDER_THICKNESS = 6; // Maximum border thickness in pixels
23
23
const INITIAL_THICKNESS_ADD = 2; // How much thickness to add for first/slow events
24
24
const RAPID_SUCCESSION_THRESHOLD = 50; // ms - events faster than this are considered rapid
25
25
const DECAY_RATE = 0.1; // How much thickness to remove per decay tick
···
104
104
</script>
105
105
106
106
<div
107
-
class="mx-auto md:mx-0 bg-white border border-gray-200 rounded-lg p-2 md:p-6 hover:shadow-lg transition-all duration-200 hover:-translate-y-1 transform"
107
+
class="group flex flex-col gap-2 p-1.5 md:p-3 min-h-64 bg-white border border-gray-200 rounded-lg hover:shadow-lg md:hover:-translate-y-1 transition-all duration-200 transform"
108
108
class:has-activity={isAnimating}
109
109
style="--border-thickness: {borderThickness}px"
110
110
>
111
-
<div class="flex justify-between items-start mb-3">
111
+
<div class="flex items-start gap-2">
112
112
<div
113
113
class="text-sm font-bold text-blue-600 bg-blue-100 px-3 py-1 rounded-full"
114
114
>
115
115
#{index + 1}
116
116
</div>
117
+
<div
118
+
title={event.nsid}
119
+
class="font-mono text-sm text-gray-700 mt-0.5 leading-relaxed rounded-full text-nowrap text-ellipsis overflow-hidden group-hover:overflow-visible group-hover:bg-gray-50 border-gray-100 group-hover:border transition-all px-1"
120
+
>
121
+
{event.nsid}
122
+
</div>
117
123
</div>
118
-
<div class="font-mono text-sm text-gray-700 mb-2 break-all leading-relaxed">
119
-
{event.nsid}
120
-
</div>
121
-
<div class="text-lg font-bold text-green-600">
122
-
{formatNumber(event.count)} created
123
-
</div>
124
-
<div class="text-lg font-bold text-red-600 mb-3">
125
-
{formatNumber(event.deleted_count)} deleted
124
+
<div class="mt-auto flex flex-col gap-1">
125
+
<div class="text-3xl font-bold text-green-600">
126
+
{formatNumber(event.count)}
127
+
<div class="text-xl">created</div>
128
+
</div>
129
+
<div class="text-3xl font-bold text-red-600">
130
+
{formatNumber(event.deleted_count)}
131
+
<div class="text-xl">deleted</div>
132
+
</div>
126
133
</div>
127
-
<div class="text-xs text-gray-500">
134
+
<div class="text-xs text-gray-500 mt-auto">
128
135
last: {formatTimestamp(event.last_seen)}
129
136
</div>
130
137
</div>
+3
-3
client/src/lib/components/StatsCard.svelte
+3
-3
client/src/lib/components/StatsCard.svelte
···
40
40
</script>
41
41
42
42
<div
43
-
class="bg-gradient-to-r {colors.bg} p-3 md:p-6 rounded-lg border {colors.border}"
43
+
class="min-w-fit bg-gradient-to-r {colors.bg} p-3 md:p-6 rounded-lg border {colors.border}"
44
44
>
45
-
<h3 class="text-sm md:text-base font-medium {colors.titleText} mb-2">
45
+
<h3 class="text-base font-medium {colors.titleText} mb-2">
46
46
{title}
47
47
</h3>
48
-
<p class="text-base md:text-3xl font-bold {colors.valueText}">
48
+
<p class="text-xl md:text-3xl font-bold {colors.valueText}">
49
49
{formatNumber(value)}
50
50
</p>
51
51
</div>
+5
-5
client/src/routes/+page.svelte
+5
-5
client/src/routes/+page.svelte
···
149
149
/>
150
150
</svelte:head>
151
151
152
-
<div class="md:max-w-[60vw] mx-auto p-2">
152
+
<div class="md:max-w-[61vw] mx-auto p-2">
153
153
<header class="text-center mb-8">
154
154
<h1 class="text-4xl font-bold mb-2 text-gray-900">
155
155
bluesky event tracker
···
159
159
</p>
160
160
</header>
161
161
162
-
<div
163
-
class="mx-auto w-fit grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-5 mb-8"
164
-
>
162
+
<div class="min-w-fit grid grid-cols-2 xl:grid-cols-4 gap-2 2xl:gap-6 mb-8">
165
163
<StatsCard
166
164
title="total creation"
167
165
value={all.count}
···
206
204
onFilterChange={(value) => (filterRegex = value)}
207
205
onBskyToggle={() => (dontShowBsky = !dontShowBsky)}
208
206
/>
209
-
<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
207
+
<div
208
+
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4"
209
+
>
210
210
{#each filterEvents(eventsList) as event, index (event.nsid)}
211
211
<EventCard {event} {index} />
212
212
{/each}