Skip to content

Commit

Permalink
Better mobile support for fork status page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ziogaschr
ziogaschr committed Dec 8, 2023
1 parent 742788b commit 6a5de80
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 170 deletions.
2 changes: 1 addition & 1 deletion components/ListItem.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<v-list-item style="border-bottom: 1px solid #272727">
<v-list-item-action>
<v-list-item-action v-if="tooltip">
<v-tooltip right>
<template #activator="{ on, attrs }">
<v-icon v-bind="attrs" v-on="on">mdi-information-outline</v-icon>
Expand Down
6 changes: 2 additions & 4 deletions components/LiveStatsTable.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
<template>
<v-card tile class="mx-1">
<v-card-title>
<template v-if="!isMobile">
<v-icon class="mr-2">mdi-server-network</v-icon>
{{ title }}
</template>
<v-icon class="mr-2">mdi-server-network</v-icon>
{{ title }}
<v-spacer />
<small style="font-size: 10px">
Next update
Expand Down
2 changes: 2 additions & 0 deletions components/NodeOperatorsTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
:headers="chartHeaders"
:items="operators"
class="elevation-1"
:mobile-breakpoint="0"
:hide-default-header="isMobile"
:hide-default-footer="isMobile"
:items-per-page="-1"
:loading-text="$t('nodes.loading')"
Expand Down
314 changes: 153 additions & 161 deletions components/NodeTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,170 +23,162 @@
<v-icon>mdi-chart-pie</v-icon>
</v-btn>
</v-card-title>
<v-skeleton-loader
type="table-thead, table-tbody, table-tfoot"
<v-data-table
:loading="loading"
:search="search"
:headers="chartHeaders"
:items="nodes"
class="elevation-1"
:expanded.sync="expanded"
item-key="id"
:show-expand="!isMobile"
:hide-default-footer="true"
:items-per-page="isMobile ? -1 : 1000"
:loading-text="$t('nodes.loading')"
:no-data-text="$t('nodes.noData')"
:no-results-text="$t('nodes.noResults')"
:disable-pagination="isMobile"
>
<v-data-table
:search="search"
:headers="chartHeaders"
:items="nodes"
class="elevation-1"
:expanded.sync="expanded"
item-key="id"
:show-expand="!isMobile"
:hide-default-footer="true"
:items-per-page="isMobile ? -1 : 1000"
:loading-text="$t('nodes.loading')"
:no-data-text="$t('nodes.noData')"
:no-results-text="$t('nodes.noResults')"
:disable-pagination="isMobile"
>
<template
v-if="!isMobile"
#top="{ pagination, options, updateOptions }"
<template #loading>
<v-skeleton-loader type="table-row@10"></v-skeleton-loader>
</template>
<template v-if="!isMobile" #top="{ pagination, options, updateOptions }">
<v-data-footer
:pagination="pagination"
:options="options"
class="bb-1"
:items-per-page-all-text="$t('nodes.all')"
:items-per-page-text="$t('nodes.perPage')"
@update:options="updateOptions"
>
<v-data-footer
:pagination="pagination"
:options="options"
class="bb-1"
:items-per-page-all-text="$t('nodes.all')"
:items-per-page-text="$t('nodes.perPage')"
@update:options="updateOptions"
>
<template v-if="!isMobile" #prepend>
<v-breadcrumbs :items="breadcrumbs" />
</template>
</v-data-footer>
</template>
<template #expanded-item="{ headers, item }">
<td :colspan="headers.length">
<v-tabs v-model="tab">
<v-tab>{{ $t('nodes.overview') }}</v-tab>
<v-tab>{{ $t('nodes.raw') }}</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item>
<v-list dense>
<extended-list-item
:title="$t('nodes.nodeId.title')"
:tooltip="$t('nodes.nodeId.tooltip')"
three-line
>
<template #subtitle>
{{ item.id }}
</template>
</extended-list-item>
<extended-list-item
:title="$t('nodes.ipAddress.title')"
:tooltip="$t('nodes.ipAddress.tooltip')"
>
<template #subtitle>
{{ formatIpAddress(item.network.remoteAddress) }}
</template>
</extended-list-item>
<extended-list-item
:title="$t('nodes.client.title')"
:tooltip="$t('nodes.client.tooltip')"
>
<template #subtitle>
{{ item.name }}
</template>
</extended-list-item>
<extended-list-item
:title="$t('nodes.enode.title')"
:tooltip="$t('nodes.enode.tooltip')"
>
<template #subtitle>
{{ item.enode }}
</template>
</extended-list-item>
<extended-list-item
:title="$t('nodes.protocols.title')"
:tooltip="$t('nodes.protocols.tooltip')"
>
<template #subtitle>
{{ item.caps.join(', ') }}
</template>
<template #action>
<v-chip label>
{{ item.protocols.eth.version }}
</v-chip>
</template>
</extended-list-item>
<extended-list-item
v-if="item.protocols.eth.forkId"
:title="$t('nodes.forkId.title')"
:tooltip="$t('nodes.forkId.tooltip')"
>
<template #subtitle>
{{ item.protocols.eth.forkId.tag }} ({{
item.protocols.eth.forkId.hash
}})
</template>
<template #action>
{{ $t('nodes.forkId.action1') }}</template
>
<template #action2>
{{ nf.format(item.protocols.eth.forkId.next) }}
</template>
</extended-list-item>
<extended-list-item
:title="$t('nodes.head.title')"
:tooltip="$t('nodes.head.tooltip')"
>
<template #subtitle>
{{ item.protocols.eth.head }}
</template>
<template #action>{{ $t('nodes.head.action1') }}</template>
<template #action2>
{{ nf.format(item.protocols.eth.difficulty) }}
</template>
</extended-list-item>
</v-list>
</v-tab-item>
<v-tab-item>
<pre
class="mb-6"
><code style="overflow-x: auto">{{ item }}</code></pre>
</v-tab-item>
</v-tabs-items>
</td>
</template>
<template #[`item.id`]="{ item }">
{{ formatHash(item.id, 10, 0) }}
</template>
<template #[`item.client.name`]="{ item }">
{{
item.client.name === '-' ? $t('nodes.unknown') : item.client.name
}}
</template>
<template #[`item.network.remoteAddress`]="{ item }">
{{ formatIpAddress(item.network.remoteAddress) }}
</template>
<template #[`item.protocols.eth.head`]="{ item }">
{{ formatHash(item.protocols.eth.head, 10, 8) }}
</template>
<template #[`item.client.release`]="{ item }">
{{ formatRelease(item.client.release) }}
</template>
<template #[`item.protocols.eth.version`]="{ item }">
{{ item.protocols.eth ? 'v' + item.protocols.eth.version : '-' }}
</template>
<template #[`item.protocols.snap.version`]="{ item }">
{{ item.protocols.snap ? 'v' + item.protocols.snap.version : '-' }}
</template>
<template #[`item.protocols.eth.forkId.next`]="{ item }">
{{ nf.format(item.protocols.eth.forkId.next) }}
</template>
<template #[`item.contact.first.unix`]="{ item }">
{{ formatUptime(item.contact) }}
</template>
<template #[`item.contact.last.unix`]="{ item }">
{{ formatLastSeen(item.contact) }}
</template>
</v-data-table>
</v-skeleton-loader>
<template v-if="!isMobile" #prepend>
<v-breadcrumbs :items="breadcrumbs" />
</template>
</v-data-footer>
</template>
<template #expanded-item="{ headers, item }">
<td :colspan="headers.length">
<v-tabs v-model="tab">
<v-tab>{{ $t('nodes.overview') }}</v-tab>
<v-tab>{{ $t('nodes.raw') }}</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item>
<v-list dense>
<extended-list-item
:title="$t('nodes.nodeId.title')"
:tooltip="$t('nodes.nodeId.tooltip')"
three-line
>
<template #subtitle>
{{ item.id }}
</template>
</extended-list-item>
<extended-list-item
:title="$t('nodes.ipAddress.title')"
:tooltip="$t('nodes.ipAddress.tooltip')"
>
<template #subtitle>
{{ formatIpAddress(item.network.remoteAddress) }}
</template>
</extended-list-item>
<extended-list-item
:title="$t('nodes.client.title')"
:tooltip="$t('nodes.client.tooltip')"
>
<template #subtitle>
{{ item.name }}
</template>
</extended-list-item>
<extended-list-item
:title="$t('nodes.enode.title')"
:tooltip="$t('nodes.enode.tooltip')"
>
<template #subtitle>
{{ item.enode }}
</template>
</extended-list-item>
<extended-list-item
:title="$t('nodes.protocols.title')"
:tooltip="$t('nodes.protocols.tooltip')"
>
<template #subtitle>
{{ item.caps.join(', ') }}
</template>
<template #action>
<v-chip label>
{{ item.protocols.eth.version }}
</v-chip>
</template>
</extended-list-item>
<extended-list-item
v-if="item.protocols.eth.forkId"
:title="$t('nodes.forkId.title')"
:tooltip="$t('nodes.forkId.tooltip')"
>
<template #subtitle>
{{ item.protocols.eth.forkId.tag }} ({{
item.protocols.eth.forkId.hash
}})
</template>
<template #action> {{ $t('nodes.forkId.action1') }}</template>
<template #action2>
{{ nf.format(item.protocols.eth.forkId.next) }}
</template>
</extended-list-item>
<extended-list-item
:title="$t('nodes.head.title')"
:tooltip="$t('nodes.head.tooltip')"
>
<template #subtitle>
{{ item.protocols.eth.head }}
</template>
<template #action>{{ $t('nodes.head.action1') }}</template>
<template #action2>
{{ nf.format(item.protocols.eth.difficulty) }}
</template>
</extended-list-item>
</v-list>
</v-tab-item>
<v-tab-item>
<pre
class="mb-6"
><code style="overflow-x: auto">{{ item }}</code></pre>
</v-tab-item>
</v-tabs-items>
</td>
</template>
<template #[`item.id`]="{ item }">
{{ formatHash(item.id, 10, 0) }}
</template>
<template #[`item.client.name`]="{ item }">
{{ item.client.name === '-' ? $t('nodes.unknown') : item.client.name }}
</template>
<template #[`item.network.remoteAddress`]="{ item }">
{{ formatIpAddress(item.network.remoteAddress) }}
</template>
<template #[`item.protocols.eth.head`]="{ item }">
{{ formatHash(item.protocols.eth.head, 10, 8) }}
</template>
<template #[`item.client.release`]="{ item }">
{{ formatRelease(item.client.release) }}
</template>
<template #[`item.protocols.eth.version`]="{ item }">
{{ item.protocols.eth ? 'v' + item.protocols.eth.version : '-' }}
</template>
<template #[`item.protocols.snap.version`]="{ item }">
{{ item.protocols.snap ? 'v' + item.protocols.snap.version : '-' }}
</template>
<template #[`item.protocols.eth.forkId.next`]="{ item }">
{{ nf.format(item.protocols.eth.forkId.next) }}
</template>
<template #[`item.contact.first.unix`]="{ item }">
{{ formatUptime(item.contact) }}
</template>
<template #[`item.contact.last.unix`]="{ item }">
{{ formatLastSeen(item.contact) }}
</template>
</v-data-table>
</v-card>
</template>

Expand Down
7 changes: 3 additions & 4 deletions layouts/default.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,14 @@
<v-icon>mdi-home</v-icon>
</v-btn>

<span>
<span v-if="params.hardfork.enabled">
<NuxtLink
v-if="params.hardfork.enabled"
:to="`/fork/${params.hardfork.name.toLowerCase()}`"
class="ml-4"
class="ml-4 text-body-2 text-sm-body-1"
>
{{ params.hardfork.name }} status page
</NuxtLink>
<small>
<small v-if="!isMobile">
- See readiness dashboard for the upcoming
{{ params.hardfork.name }} hardfork
</small>
Expand Down

0 comments on commit 6a5de80

Please sign in to comment.