Skip to content

Commit 26d2d92

Browse files
author
Sunlight
committed
fix(namespaces): links in table
1 parent 6134c71 commit 26d2d92

File tree

1 file changed

+91
-66
lines changed

1 file changed

+91
-66
lines changed

‎pages/namespaces/index.vue

Lines changed: 91 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -226,85 +226,105 @@ const handleLast = async () => {
226226
</thead>
227227

228228
<tbody>
229-
<tr v-for="ns in namespaces" @click="router.push(`/namespace/${ns.namespace_id}`)">
229+
<tr v-for="ns in namespaces">
230230
<td style="width: 1px">
231-
<Tooltip position="start">
232-
<Flex :align="ns.name === getNamespaceID(ns.namespace_id) ? 'center' : 'start'" gap="8">
233-
<template v-if="ns.hash">
234-
<Flex direction="column" gap="4">
235-
<Flex v-if="getNamespaceID(ns.namespace_id).length > 8" align="center" gap="8">
236-
<Text size="12" weight="600" color="primary" mono>
237-
{{ getNamespaceID(ns.namespace_id).slice(0, 4) }}
238-
</Text>
239-
240-
<Flex align="center" gap="3">
241-
<div v-for="dot in 3" class="dot" />
231+
<NuxtLink :to="`/namespace/${ns.namespace_id}`">
232+
<Flex align="center">
233+
<Tooltip position="start">
234+
<Flex :align="ns.name === getNamespaceID(ns.namespace_id) ? 'center' : 'start'" gap="8">
235+
<template v-if="ns.hash">
236+
<Flex direction="column" gap="4">
237+
<Flex v-if="getNamespaceID(ns.namespace_id).length > 8" align="center" gap="8">
238+
<Text size="12" weight="600" color="primary" mono>
239+
{{ getNamespaceID(ns.namespace_id).slice(0, 4) }}
240+
</Text>
241+
242+
<Flex align="center" gap="3">
243+
<div v-for="dot in 3" class="dot" />
244+
</Flex>
245+
246+
<Text size="12" weight="600" color="primary" mono>
247+
{{ getNamespaceID(ns.namespace_id).slice(-4) }}
248+
</Text>
249+
250+
<CopyButton :text="getNamespaceID(ns.namespace_id)" />
251+
</Flex>
252+
253+
<Flex v-else align="center" gap="8">
254+
<Text size="12" weight="600" color="primary" mono>
255+
{{ space(getNamespaceID(ns.namespace_id)) }}
256+
</Text>
257+
258+
<CopyButton :text="getNamespaceID(ns.namespace_id)" />
259+
</Flex>
260+
261+
<Text
262+
v-if="ns.name !== getNamespaceID(ns.namespace_id)"
263+
size="12"
264+
weight="500"
265+
color="tertiary"
266+
>
267+
{{ ns.name }}
268+
</Text>
242269
</Flex>
243-
244-
<Text size="12" weight="600" color="primary" mono>
245-
{{ getNamespaceID(ns.namespace_id).slice(-4) }}
246-
</Text>
247-
248-
<CopyButton :text="getNamespaceID(ns.namespace_id)" />
249-
</Flex>
250-
251-
<Flex v-else align="center" gap="8">
252-
<Text size="12" weight="600" color="primary" mono>
253-
{{ space(getNamespaceID(ns.namespace_id)) }}
254-
</Text>
255-
256-
<CopyButton :text="getNamespaceID(ns.namespace_id)" />
257-
</Flex>
258-
259-
<Text
260-
v-if="ns.name !== getNamespaceID(ns.namespace_id)"
261-
size="12"
262-
weight="500"
263-
color="tertiary"
264-
>
265-
{{ ns.name }}
266-
</Text>
270+
</template>
271+
<template v-else>
272+
<Text size="13" weight="700" color="secondary" mono>Genesis</Text>
273+
</template>
267274
</Flex>
268-
</template>
269-
<template v-else>
270-
<Text size="13" weight="700" color="secondary" mono>Genesis</Text>
271-
</template>
272-
</Flex>
273275

274-
<template #content>
275-
{{ space(getNamespaceID(ns.namespace_id)) }}
276-
</template>
277-
</Tooltip>
276+
<template #content>
277+
{{ space(getNamespaceID(ns.namespace_id)) }}
278+
</template>
279+
</Tooltip>
280+
</Flex>
281+
</NuxtLink>
278282
</td>
279283
<td>
280-
<Flex direction="column" gap="4">
281-
<Text size="12" weight="600" color="primary">
282-
{{ DateTime.fromISO(ns.last_message_time).toRelative({ locale: "en", style: "short" }) }}
283-
</Text>
284-
<Text size="12" weight="500" color="tertiary">
285-
{{ DateTime.fromISO(ns.last_message_time).setLocale("en").toFormat("LLL d, t") }}
286-
</Text>
287-
</Flex>
284+
<NuxtLink :to="`/namespace/${ns.namespace_id}`">
285+
<Flex direction="column" justify="center" gap="4">
286+
<Text size="12" weight="600" color="primary">
287+
{{ DateTime.fromISO(ns.last_message_time).toRelative({ locale: "en", style: "short" }) }}
288+
</Text>
289+
<Text size="12" weight="500" color="tertiary">
290+
{{ DateTime.fromISO(ns.last_message_time).setLocale("en").toFormat("LLL d, t") }}
291+
</Text>
292+
</Flex>
293+
</NuxtLink>
288294
</td>
289295
<td>
290-
<Outline @click.stop="router.push(`/block/${ns.last_height}`)">
291-
<Flex align="center" gap="6">
292-
<Icon name="block" size="14" color="secondary" />
296+
<NuxtLink :to="`/namespace/${ns.namespace_id}`">
297+
<Flex align="center">
298+
<Outline @click.stop="router.push(`/block/${ns.last_height}`)">
299+
<Flex align="center" gap="6">
300+
<Icon name="block" size="14" color="secondary" />
293301

294-
<Text size="13" weight="600" color="primary" tabular>{{ comma(ns.last_height) }}</Text>
302+
<Text size="13" weight="600" color="primary" tabular>{{ comma(ns.last_height) }}</Text>
303+
</Flex>
304+
</Outline>
295305
</Flex>
296-
</Outline>
306+
</NuxtLink>
297307
</td>
298308
<td>
299-
<Text size="13" weight="600" color="primary">{{ formatBytes(ns.size) }}</Text>
309+
<NuxtLink :to="`/namespace/${ns.namespace_id}`">
310+
<Flex align="center">
311+
<Text size="13" weight="600" color="primary">{{ formatBytes(ns.size) }}</Text>
312+
</Flex>
313+
</NuxtLink>
300314
</td>
301315
<td>
302-
<Text size="13" weight="600" color="primary">{{ ns.version }}</Text>
316+
<NuxtLink :to="`/namespace/${ns.namespace_id}`">
317+
<Flex align="center">
318+
<Text size="13" weight="600" color="primary">{{ ns.version }}</Text>
319+
</Flex>
320+
</NuxtLink>
303321
</td>
304322
<td>
305-
<Flex>
306-
<Text size="13" weight="600" color="primary">{{ comma(ns.pfb_count) }}</Text>
307-
</Flex>
323+
<NuxtLink :to="`/namespace/${ns.namespace_id}`">
324+
<Flex align="center">
325+
<Text size="13" weight="600" color="primary">{{ comma(ns.pfb_count) }}</Text>
326+
</Flex>
327+
</NuxtLink>
308328
</td>
309329
</tr>
310330
</tbody>
@@ -413,15 +433,20 @@ const handleLast = async () => {
413433
414434
& tr td {
415435
padding: 0;
416-
padding-right: 24px;
417-
padding-top: 8px;
418-
padding-bottom: 8px;
419436
420437
white-space: nowrap;
421438
422439
&:first-child {
423440
padding-left: 16px;
424441
}
442+
443+
& > a {
444+
display: flex;
445+
446+
min-height: 44px;
447+
448+
padding-right: 24px;
449+
}
425450
}
426451
}
427452
}

0 commit comments

Comments
 (0)