Parameters Mobile

src/components/CardParameter.vue

@@ -2,17 +2,24 @@
 import type { PropType } from 'vue';
 const props = defineProps({
   cardItem: {
-        type: Object as PropType<{title: string;items: Array<any>;}>,
+    type: Object as PropType<{ title: string; items: Array<any> }>,
   },
-})
+});
-
 </script>
 <template>
-    <div class="bg-card px-4 pt-3 pb-4 rounded mt-6" 
+  <div
-    v-if="props.cardItem?.items && props.cardItem?.items?.length > 0">
+    class="bg-card px-4 pt-3 pb-4 rounded mt-6"
+    v-if="props.cardItem?.items && props.cardItem?.items?.length > 0"
+  >
     <div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
-        <div class="grid grid-cols-5 gap-4">
+    <div
-            <div v-for="(item,index) of props.cardItem?.items" :key="index" class="rounded-sm bg-active px-4 py-2">
+      class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
+    >
+      <div
+        v-for="(item, index) of props.cardItem?.items"
+        :key="index"
+        class="rounded-sm bg-active px-4 py-2"
+      >
         <div class="text-xs mb-2 text-secondary">{{ item?.subtitle }}</div>
         <div class="text-base text-main">{{ item?.value }}</div>
         <!-- {{ item }} -->

src/components/TableParameter.vue

@@ -2,23 +2,26 @@
 import type { PropType } from 'vue';
 const props = defineProps({
   tableItem: {
-        type: Object as PropType<{title: string;items: Object;}>,
+    type: Object as PropType<{ title: string; items: Object }>,
   },
-})
+});
 
 function formatTitle(name: string) {
-    return String(name).replaceAll('_', ' ')
+  return String(name).replaceAll('_', ' ');
 }
-
 </script>
 <template>
   <div class="bg-card px-4 pt-3 pb-4 rounded mt-6">
     <div class="text-base mb-3 text-main">{{ props.tableItem?.title }}</div>
     <div class="">
-                <div class="d-flex flex-nowrap" v-for="(item,index ) of props.tableItem?.items" :key="index">
+      <div
+        class="flex flex-nowrap"
+        v-for="(item, index) of props.tableItem?.items"
+        :key="index"
+      >
         <div class="mr-6">{{ formatTitle(item?.subtitle) }}</div>
         <div class="flex-1">{{ item?.value }}</div>
-                    <div>{{typeof(item?.value )}}</div>
+        <div>{{ typeof item?.value }}</div>
         <!-- {{ item }} -->
       </div>
     </div>

src/modules/[chain]/params/index.vue

@@ -1,24 +1,29 @@
 <script lang="ts" setup>
 import { useParamStore } from '@/stores';
-import { ref, onMounted } from 'vue'
+import { ref, onMounted } from 'vue';
-import CardParameter from '@/components/CardParameter.vue'
+import CardParameter from '@/components/CardParameter.vue';
-import TableParameter from '@/components/TableParameter.vue'
+import TableParameter from '@/components/TableParameter.vue';
-import { sort } from 'semver';
+
-const store = useParamStore()
+const store = useParamStore();
-const chain = ref(store.chain)
+const chain = ref(store.chain);
 onMounted(() => {
   // fetch the data
-    store.initial()
+  store.initial();
-})
+});
-
 </script>
 <template>
   <div>
     <!-- Chain ID -->
     <div class="bg-card px-4 pt-3 pb-4 rounded">
       <div class="text-base mb-3 text-main">{{ chain.title }}</div>
-            <div class="grid grid-cols-5 gap-4">
+      <div
-                <div v-for="(item,index) of chain.items" :key="index" class="rounded-sm bg-active px-4 py-2">
+        class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
+      >
+        <div
+          v-for="(item, index) of chain.items"
+          :key="index"
+          class="rounded-sm bg-active px-4 py-2"
+        >
           <div class="text-xs mb-2 text-secondary">{{ item.subtitle }}</div>
           <div class="text-base text-main">{{ item.value }}</div>
         </div>
@@ -39,8 +44,8 @@ onMounted(() => {
     <!-- Node Information -->
     <TableParameter :tableItem="store.nodeVersion" />
   </div>
-
 </template>
+
 <route>
 {
   meta: {