Skip to content

Commit 6adfd58

Browse files
author
Sunlight
committed
fix (blocks & txs): links in table
1 parent 26d2d92 commit 6adfd58

File tree

3 files changed

+247
-179
lines changed

3 files changed

+247
-179
lines changed

‎pages/blocks.vue

Lines changed: 124 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -167,102 +167,142 @@ const handleLast = async () => {
167167
</thead>
168168

169169
<tbody>
170-
<tr v-for="block in blocks" @click="router.push(`/block/${block.height}`)">
170+
<tr v-for="block in blocks">
171171
<td style="width: 1px">
172-
<Outline>
173-
<Flex align="center" gap="6">
174-
<Icon name="block" size="14" :color="hintedBlock == block.height ? 'blue' : 'tertiary'" />
172+
<NuxtLink :to="`/block/${block.height}`">
173+
<Flex align="center">
174+
<Outline>
175+
<Flex align="center" gap="6">
176+
<Icon
177+
name="block"
178+
size="14"
179+
:color="hintedBlock == block.height ? 'blue' : 'tertiary'"
180+
/>
175181

176-
<Text size="13" weight="600" color="primary" tabular>{{ comma(block.height) }}</Text>
182+
<Text size="13" weight="600" color="primary" tabular>{{ comma(block.height) }}</Text>
183+
</Flex>
184+
</Outline>
177185
</Flex>
178-
</Outline>
186+
</NuxtLink>
179187
</td>
180188
<td>
181-
<Flex direction="column" gap="6">
182-
<Text size="12" weight="600" color="primary">
183-
{{ DateTime.fromISO(block.time).toRelative({ locale: "en", style: "short" }) }}
184-
</Text>
185-
<Text size="12" weight="500" color="tertiary">
186-
{{ DateTime.fromISO(block.time).setLocale("en").toFormat("LLL d, t") }}
187-
</Text>
188-
</Flex>
189+
<NuxtLink :to="`/block/${block.height}`">
190+
<Flex justify="center" direction="column" gap="6">
191+
<Text size="12" weight="600" color="primary">
192+
{{ DateTime.fromISO(block.time).toRelative({ locale: "en", style: "short" }) }}
193+
</Text>
194+
<Text size="12" weight="500" color="tertiary">
195+
{{ DateTime.fromISO(block.time).setLocale("en").toFormat("LLL d, t") }}
196+
</Text>
197+
</Flex>
198+
</NuxtLink>
189199
</td>
190200
<td>
191-
<Tooltip v-if="block.hash" delay="500">
192-
<template #default>
193-
<Flex direction="column" gap="4">
194-
<Text size="12" height="120" weight="600" color="primary" :class="$style.proposer_moniker">
195-
{{ block.proposer.moniker }}
196-
</Text>
197-
198-
<Flex align="center" gap="6">
199-
<Text size="12" weight="600" color="tertiary" mono>
200-
{{ block.proposer.cons_address.slice(0, 4) }}
201-
</Text>
202-
<Flex align="center" gap="3">
203-
<div v-for="dot in 3" class="dot" />
201+
<NuxtLink :to="`/block/${block.height}`">
202+
<Flex align="center">
203+
<Tooltip v-if="block.hash" delay="500">
204+
<template #default>
205+
<Flex direction="column" gap="4">
206+
<Text
207+
size="12"
208+
height="120"
209+
weight="600"
210+
color="primary"
211+
:class="$style.proposer_moniker"
212+
>
213+
{{ block.proposer.moniker }}
214+
</Text>
215+
216+
<Flex align="center" gap="6">
217+
<Text size="12" weight="600" color="tertiary" mono>
218+
{{ block.proposer.cons_address.slice(0, 4) }}
219+
</Text>
220+
<Flex align="center" gap="3">
221+
<div v-for="dot in 3" class="dot" />
222+
</Flex>
223+
<Text size="12" weight="600" color="tertiary" mono>
224+
{{
225+
block.proposer.cons_address.slice(
226+
block.proposer.cons_address.length - 4,
227+
block.proposer.cons_address.length,
228+
)
229+
}}
230+
</Text>
231+
<CopyButton :text="block.proposer.cons_address" size="10" />
232+
</Flex>
204233
</Flex>
205-
<Text size="12" weight="600" color="tertiary" mono>
206-
{{
207-
block.proposer.cons_address.slice(
208-
block.proposer.cons_address.length - 4,
209-
block.proposer.cons_address.length,
210-
)
211-
}}
212-
</Text>
213-
<CopyButton :text="block.proposer.cons_address" size="10" />
214-
</Flex>
215-
</Flex>
216-
</template>
234+
</template>
217235

218-
<template #content> {{ space(block.proposer.cons_address) }} </template>
219-
</Tooltip>
220-
<Text v-else size="13" weight="600" color="secondary">Genesis</Text>
236+
<template #content> {{ space(block.proposer.cons_address) }} </template>
237+
</Tooltip>
238+
<Text v-else size="13" weight="600" color="secondary">Genesis</Text>
239+
</Flex>
240+
</NuxtLink>
221241
</td>
222242
<td>
223-
<Tooltip v-if="block.hash" delay="500">
224-
<template #default>
225-
<Flex align="center" gap="8">
226-
<Text size="13" weight="600" color="primary" mono>{{ block.hash.slice(0, 4) }}</Text>
227-
228-
<Flex align="center" gap="3">
229-
<div v-for="dot in 3" class="dot" />
230-
</Flex>
231-
232-
<Text size="13" weight="600" color="primary" mono>
233-
{{ block.hash.slice(block.hash.length - 4, block.hash.length) }}
234-
</Text>
235-
236-
<CopyButton :text="block.hash" />
237-
</Flex>
238-
</template>
243+
<NuxtLink :to="`/block/${block.height}`">
244+
<Flex align="center">
245+
<Tooltip v-if="block.hash" delay="500">
246+
<template #default>
247+
<Flex align="center" gap="8">
248+
<Text size="13" weight="600" color="primary" mono>{{
249+
block.hash.slice(0, 4)
250+
}}</Text>
251+
252+
<Flex align="center" gap="3">
253+
<div v-for="dot in 3" class="dot" />
254+
</Flex>
255+
256+
<Text size="13" weight="600" color="primary" mono>
257+
{{ block.hash.slice(block.hash.length - 4, block.hash.length) }}
258+
</Text>
259+
260+
<CopyButton :text="block.hash" />
261+
</Flex>
262+
</template>
239263

240-
<template #content> {{ space(block.hash) }} </template>
241-
</Tooltip>
242-
<Text v-else size="13" weight="600" color="secondary">Genesis</Text>
264+
<template #content> {{ space(block.hash) }} </template>
265+
</Tooltip>
266+
<Text v-else size="13" weight="600" color="secondary">Genesis</Text>
267+
</Flex>
268+
</NuxtLink>
243269
</td>
244270
<td>
245-
<Text size="13" weight="600" color="primary">
246-
{{ block.stats.tx_count }}
247-
</Text>
271+
<NuxtLink :to="`/block/${block.height}`">
272+
<Flex align="center">
273+
<Text size="13" weight="600" color="primary">
274+
{{ block.stats.tx_count }}
275+
</Text>
276+
</Flex>
277+
</NuxtLink>
248278
</td>
249279
<td>
250-
<Text size="13" weight="600" color="primary">
251-
{{ block.stats.events_count }}
252-
</Text>
280+
<NuxtLink :to="`/block/${block.height}`">
281+
<Flex align="center">
282+
<Text size="13" weight="600" color="primary">
283+
{{ block.stats.events_count }}
284+
</Text>
285+
</Flex>
286+
</NuxtLink>
253287
</td>
254288
<td>
255-
<Text size="13" weight="600" color="primary">
256-
{{ formatBytes(block.stats.blobs_size) }}
257-
</Text>
289+
<NuxtLink :to="`/block/${block.height}`">
290+
<Flex align="center">
291+
<Text size="13" weight="600" color="primary">
292+
{{ formatBytes(block.stats.blobs_size) }}
293+
</Text>
294+
</Flex>
295+
</NuxtLink>
258296
</td>
259297
<td>
260-
<Flex align="center" gap="4">
261-
<Text size="13" weight="600" :color="parseFloat(block.stats.fee) ? 'primary' : 'tertiary'">
262-
{{ tia(block.stats.fee) }}
263-
</Text>
264-
<Text size="13" weight="600" color="tertiary"> TIA </Text>
265-
</Flex>
298+
<NuxtLink :to="`/block/${block.height}`">
299+
<Flex align="center" gap="4">
300+
<Text size="13" weight="600" :color="parseFloat(block.stats.fee) ? 'primary' : 'tertiary'">
301+
{{ tia(block.stats.fee) }}
302+
</Text>
303+
<Text size="13" weight="600" color="tertiary"> TIA </Text>
304+
</Flex>
305+
</NuxtLink>
266306
</td>
267307
</tr>
268308
</tbody>
@@ -345,15 +385,20 @@ const handleLast = async () => {
345385
346386
& tr td {
347387
padding: 0;
348-
padding-right: 24px;
349-
padding-top: 8px;
350-
padding-bottom: 8px;
351388
352389
white-space: nowrap;
353390
354391
&:first-child {
355392
padding-left: 16px;
356393
}
394+
395+
& > a {
396+
display: flex;
397+
398+
min-height: 44px;
399+
400+
padding-right: 24px;
401+
}
357402
}
358403
}
359404
}

‎pages/namespaces/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ const handleLast = async () => {
295295
<td>
296296
<NuxtLink :to="`/namespace/${ns.namespace_id}`">
297297
<Flex align="center">
298-
<Outline @click.stop="router.push(`/block/${ns.last_height}`)">
298+
<Outline @click.prevent="router.push(`/block/${ns.last_height}`)">
299299
<Flex align="center" gap="6">
300300
<Icon name="block" size="14" color="secondary" />
301301

0 commit comments

Comments
 (0)