Skip to content

Commit

Permalink
More responsive stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@ziogaschr
ziogaschr committed Dec 8, 2023
1 parent 3ed00ab commit ef66469
Show file tree
Hide file tree
Showing 7 changed files with 128 additions and 111 deletions.
7 changes: 7 additions & 0 deletions components/LiveStatsTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
</small>
</v-card-title>
<v-data-table
:loading="loading"
:headers="chartHeaders"
:items="nodes"
class="elevation-1"
Expand All @@ -23,6 +24,9 @@
:no-results-text="$t('liveStats.noResults')"
:disable-pagination="true"
>
<template #loading>
<v-skeleton-loader type="table-row@3"></v-skeleton-loader>
</template>
<template #expanded-item="{ headers, item }">
<td :colspan="headers.length">
<v-list dense>
Expand Down Expand Up @@ -182,6 +186,9 @@ export default {
locale() {
return this.$i18n.locale
},
loading() {
return this.nodes.length === 0
},
chartHeaders() {
return [
{
Expand Down
4 changes: 2 additions & 2 deletions components/NodeOperatorsTable.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<v-card tile>
<v-card tile class="mx-sm-1 mx-0">
<v-card-title>
<template v-if="!isMobile">
<template>

Check warning on line 4 in components/NodeOperatorsTable.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 18) 

`<template>` require directive
<v-icon :aria-label="title" role="img" aria-hidden="false" class="mr-2"
>mdi-account</v-icon
>
Expand Down
140 changes: 80 additions & 60 deletions components/TableChartCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,79 @@
<template>
<v-card tile>
<v-card tile class="table-chart-card">
<div class="d-flex flex-no-wrap justify-space-between">
<div :class="{ 'w-100': isMobile, 'w-auto': !isMobile }">
<v-card-title>
<v-icon class="mr-1">{{ icon }}</v-icon>
{{ title }}
</v-card-title>
<v-simple-table style="width: 100%">
<template #default>
<thead>
<tr>
<th class="text-left">{{ $t('home.totalNodes') }}</th>
<th class="text-right" :colspan="inlineColsNumber">
{{ total }} (100%)
</th>
</tr>
<template v-if="inlineColNames.length > 0">
<v-skeleton-loader :loading="loading" type="table-heading,text@3">
<v-simple-table style="width: 100%">
<template #default>
<thead>
<tr>
<th class="text-left"></th>
<th
v-for="name of inlineColNames"
:key="name"
class="text-right"
>
{{ name }}
<th class="text-left">{{ $t('home.totalNodes') }}</th>
<th class="text-right" :colspan="inlineColsNumber">
{{ total }}
</th>
</tr>
</template>
</thead>
<tbody>
<tr v-for="(count, name) of table" :key="name">
<template v-if="!to">
<td class="text-left">
{{ name === '-' ? noLabelText : name }}
</td>
</template>
<template v-else>
<td class="text-left">
<nuxt-link :to="'/' + to + '/' + name">
<template v-if="inlineColNames.length > 0">
<tr>
<th class="text-left"></th>
<th
v-for="name of inlineColNames"
:key="name"
class="text-right"
>
{{ name }}
</nuxt-link>
</td>
</template>
<template v-if="typeof count === 'object'">
<td
v-for="num of Object.values(count)"
:key="`${name}/${num}`"
class="text-right"
>
{{ num }} ({{
percent(num, rowTotal(Object.values(count)))
}}%)
</td>
</th>
</tr>
</template>
<template v-else>
<td class="text-right">
{{ count }} ({{ percent(count, total) }}%)
</td>
</template>
</tr>
</tbody>
</template>
</v-simple-table>
</thead>
<tbody>
<tr v-for="(count, name) of table" :key="name">
<template v-if="!to">
<td class="text-left">
{{ name === '-' ? noLabelText : name }}
</td>
</template>
<template v-else>
<td class="text-left">
<nuxt-link :to="'/' + to + '/' + name">
{{ name }}
</nuxt-link>
</td>
</template>
<template v-if="typeof count === 'object'">
<td
v-for="num of Object.values(count)"
:key="`${name}/${num}`"
class="text-right"
>
{{ num }} ({{
percent(num, rowTotal(Object.values(count)))
}}%)
</td>
</template>
<template v-else>
<td class="text-right">
{{ count }} ({{ percent(count, total) }}%)
</td>
</template>
</tr>
</tbody>
</template>
</v-simple-table>
</v-skeleton-loader>
</div>
<apexchart
v-if="!isMobile"
width="256"
type="pie"
:options="getChartOptions()"
:series="series"
class="my-3"
></apexchart>
<v-skeleton-loader :loading="loading" type="avatar" class="my-3">
<apexchart
v-if="!isMobile"
max-width="256"
type="pie"
:options="getChartOptions()"
:series="series"
></apexchart>
</v-skeleton-loader>
</div>
</v-card>
</template>
Expand Down Expand Up @@ -140,6 +143,9 @@ export default {
locale() {
return this.$i18n.locale
},
loading() {
return !this.series || this.series.length === 0
},
options() {
const self = this
return {
Expand Down Expand Up @@ -198,3 +204,17 @@ export default {
},
}
</script>
<style lang="scss" scoped>
.table-chart-card {
:deep(.v-skeleton-loader__avatar) {
width: 200px;
height: 200px;
aspect-ratio: 1;
margin-right: 12px;
}
:deep(.apexcharts-canvas) {
min-width: 254px;
}
}
</style>
80 changes: 35 additions & 45 deletions pages/fork/_name.vue
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,39 @@
<template>
<v-skeleton-loader
type="table-heading, list-item-three-line, divider, table-thead, list-item-three-line, divider, list-item@4"
:loading="$fetchState.pending"
>
<v-container fluid :class="{ 'pa-1': isMobile }">
<v-row>
<v-col cols="12" :class="{ 'pa-1': isMobile }">
<ForkCountdownCard
:latest-block-number="liveStats.latestBlockNumber"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" :class="{ 'pa-1': isMobile }">
<LiveStatsTable
:nodes="liveStats.raw"
:last-updated="liveStats.now"
:title="$t('liveStats.title')"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="6" :class="{ 'pa-1': isMobile }">
<ForkClientUpgraded :nodes="nodes" />
</v-col>
<v-col cols="12" md="6" :class="{ 'pa-1': isMobile }">
<NodeOperatorsUpgradedCard :operators="operators" />
</v-col>
</v-row>
<v-row>
<v-col
v-for="(categoryOperators, category) in operators.raw"
:key="category"
cols="12"
md="6"
:class="{ 'pa-1': isMobile }"
>
<NodeOperatorsTable
:operators="categoryOperators"
:title="category"
/>
</v-col>
</v-row>
</v-container>
</v-skeleton-loader>
<v-container fluid :class="{ 'pa-1': isMobile }">
<v-row>
<v-col cols="12" :class="{ 'pa-1': isMobile }">
<ForkCountdownCard :latest-block-number="liveStats.latestBlockNumber" />
</v-col>
</v-row>
<v-row>
<v-col cols="12" :class="{ 'pa-1': isMobile }">
<LiveStatsTable
:nodes="liveStats.raw"
:last-updated="liveStats.now"
:title="$t('liveStats.title')"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="6" :class="{ 'pa-1': isMobile }">
<ForkClientUpgraded :nodes="nodes" />
</v-col>
<v-col cols="12" md="6" :class="{ 'pa-1': isMobile }">
<NodeOperatorsUpgradedCard :operators="operators" />
</v-col>
</v-row>
<v-row>
<v-col
v-for="(categoryOperators, category) in operators.raw"
:key="category"
cols="12"
md="6"
:class="{ 'pa-1': isMobile }"
>
<NodeOperatorsTable :operators="categoryOperators" :title="category" />
</v-col>
</v-row>
</v-container>
</template>

<script>
Expand Down
2 changes: 1 addition & 1 deletion store/liveStats.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import config from '~/params/config.json'
import { parseNodeVersion } from '~/utils'

export const state = () => ({
raw: {},
raw: [],
latestBlockNumber: 0,
now: new Date(),
intervalTimer: null,
Expand Down
4 changes: 2 additions & 2 deletions store/nodes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { parseNodeVersion } from '~/utils'
export const state = () => ({
raw: [], // full list of nodes (all data) (used by nodes page)
clients: {}, // data for clients table (used by home page)
clientsForkAdoption: {}, // data for clients fork adoption chart (used by fork page)
forks: {}, // data for forkIds table (used by home page)
clientsForkAdoption: { table: {}, chart: { series: [], labels: [] } }, // data for clients fork adoption chart (used by fork page)
forks: { table: {}, chart: { series: [], labels: [] } }, // data for forkIds table (used by home page)
countries: {}, // country data for heat map
protocols: {
eth: {},
Expand Down
2 changes: 1 addition & 1 deletion store/operators.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import config from '~/params/config.json'

export const state = () => ({
raw: {}, // full list of nodes (all data) (used by nodes page)
upgradedOperators: {}, // data for operators upgraded stats chart
upgradedOperators: { total: 0, table: {}, chart: { series: [], labels: [] } }, // data for operators upgraded stats chart
updated: false,
})

Expand Down

0 comments on commit ef66469

Please sign in to comment.