Responsive fixes for fork status page

etclabscore · Dec 8, 2023 · 3ee5773 · 3ee5773
1 parent 8819a45
commit 3ee5773
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 9 deletions.
diff --git a/components/ForkClientUpgraded.vue b/components/ForkClientUpgraded.vue
@@ -8,7 +8,7 @@
     :no-label-text="$t('nodes.none')"
     :colors="['#00E396', '#FD6A6A']"
     icon="mdi-directions-fork"
-    class="mr-1 mb-1"
+    class="mx-sm-1 mx-0 mb-1"
     style="margin-left: 6px"
   />
 </template>

diff --git a/components/ForkCountdownCard.vue b/components/ForkCountdownCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-sheet class="pa-5 mx-1 mr-1 mb-1">
+  <v-sheet class="pa-5 mx-sm-1 mx-0 mb-1">
     <h1 class="mb-3">ETC {{ nextFork.name }} Upgrade Countdown</h1>
 
     <p>

diff --git a/components/LiveStatsTable.vue b/components/LiveStatsTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card tile class="mx-1">
+  <v-card tile class="mx-sm-1 mx-0">
     <v-card-title>
       <v-icon class="mr-2">mdi-server-network</v-icon>
       {{ title }}

diff --git a/components/NodeOperatorsUpgradedCard.vue b/components/NodeOperatorsUpgradedCard.vue
@@ -8,7 +8,7 @@
     :no-label-text="$t('nodes.none')"
     :colors="['#00E396', '#FD6A6A']"
     icon="mdi-directions-fork"
-    class="mr-1 mb-1"
+    class="mx-sm-1 mx-0 mb-1"
     style="margin-left: 6px"
   />
 </template>

diff --git a/pages/fork/_name.vue b/pages/fork/_name.vue
@@ -3,16 +3,16 @@
     type="table-heading, list-item-three-line, divider, table-thead, list-item-three-line, divider, list-item@4"
     :loading="$fetchState.pending"
   >
-    <v-container fluid>
+    <v-container fluid :class="{ 'pa-1': isMobile }">
       <v-row>
-        <v-col cols="12">
+        <v-col cols="12" :class="{ 'pa-1': isMobile }">
           <ForkCountdownCard
             :latest-block-number="liveStats.latestBlockNumber"
           />
         </v-col>
       </v-row>
       <v-row>
-        <v-col cols="12">
+        <v-col cols="12" :class="{ 'pa-1': isMobile }">
           <LiveStatsTable
             :nodes="liveStats.raw"
             :last-updated="liveStats.now"
@@ -21,10 +21,10 @@
         </v-col>
       </v-row>
       <v-row>
-        <v-col cols="12" md="6">
+        <v-col cols="12" md="6" :class="{ 'pa-1': isMobile }">
           <ForkClientUpgraded :nodes="nodes" />
         </v-col>
-        <v-col cols="12" md="6">
+        <v-col cols="12" md="6" :class="{ 'pa-1': isMobile }">
           <NodeOperatorsUpgradedCard :operators="operators" />
         </v-col>
       </v-row>
@@ -34,6 +34,7 @@
           :key="category"
           cols="12"
           md="6"
+          :class="{ 'pa-1': isMobile }"
         >
           <NodeOperatorsTable
             :operators="categoryOperators"