From a0104d5fee588a270a3b88885829d3466f95bd92 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Thu, 27 Apr 2023 19:00:44 +0800
Subject: [PATCH] Parameters Mobile

---
 src/components/CardParameter.vue     | 39 ++++++++------
 src/components/TableParameter.vue    | 39 +++++++-------
 src/modules/[chain]/params/index.vue | 81 +++++++++++++++-------------
 3 files changed, 87 insertions(+), 72 deletions(-)

diff --git a/src/components/CardParameter.vue b/src/components/CardParameter.vue
index b136ca68..cfa873c0 100644
--- a/src/components/CardParameter.vue
+++ b/src/components/CardParameter.vue
@@ -1,22 +1,29 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
 const props = defineProps({
-    cardItem: {
-        type: Object as PropType<{title: string;items: Array<any>;}>,
-    },
-})
-
+  cardItem: {
+    type: Object as PropType<{ title: string; items: Array<any> }>,
+  },
+});
 </script>
 <template>
-    <div 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 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 }} -->
-            </div>
-        </div>
+  <div
+    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-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 }} -->
+      </div>
     </div>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/src/components/TableParameter.vue b/src/components/TableParameter.vue
index 540d886c..d01e5617 100644
--- a/src/components/TableParameter.vue
+++ b/src/components/TableParameter.vue
@@ -1,26 +1,29 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
 const props = defineProps({
-    tableItem: {
-        type: Object as PropType<{title: string;items: Object;}>,
-    },
-})
+  tableItem: {
+    type: Object as PropType<{ title: string; items: Object }>,
+  },
+});
 
-function formatTitle (name: string){
-    return String(name).replaceAll('_', ' ')
+function formatTitle(name: string) {
+  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="mr-6">{{ formatTitle(item?.subtitle) }}</div>
-                    <div class="flex-1" >{{ item?.value }}</div>
-                    <div>{{typeof(item?.value )}}</div>
-                    <!-- {{ item }} -->
-                </div>
-            </div>
+  <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="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>
+        <!-- {{ item }} -->
+      </div>
     </div>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/src/modules/[chain]/params/index.vue b/src/modules/[chain]/params/index.vue
index 0dea1c2c..bab249eb 100644
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@@ -1,50 +1,55 @@
 <script lang="ts" setup>
 import { useParamStore } from '@/stores';
-import { ref, onMounted } from 'vue'
-import CardParameter from '@/components/CardParameter.vue'
-import TableParameter from '@/components/TableParameter.vue'
-import { sort } from 'semver';
-const store = useParamStore()
-const chain = ref(store.chain)
-onMounted(() => {
-    // fetch the data
-    store.initial()
-})
+import { ref, onMounted } from 'vue';
+import CardParameter from '@/components/CardParameter.vue';
+import TableParameter from '@/components/TableParameter.vue';
 
+const store = useParamStore();
+const chain = ref(store.chain);
+onMounted(() => {
+  // fetch the data
+  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 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>
-            </div>
+  <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-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>
-        <!-- minting Parameters  -->
-        <CardParameter :cardItem="store.mint"/> 
-        <!-- Staking Parameters  -->
-        <CardParameter :cardItem="store.staking"/>
-        <!-- Governance Parameters -->
-        <CardParameter :cardItem="store.gov"/>
-        <!-- Distribution Parameters -->
-        <CardParameter :cardItem="store.distribution"/>
-        <!-- Slashing Parameters -->
-        <CardParameter :cardItem="store.slashing"/>
-        <!-- Application Version -->
-        <TableParameter :tableItem="store.appVersion"/>
-        <!-- Node Information -->
-        <TableParameter :tableItem="store.nodeVersion"/>
+      </div>
     </div>
-
+    <!-- minting Parameters  -->
+    <CardParameter :cardItem="store.mint" />
+    <!-- Staking Parameters  -->
+    <CardParameter :cardItem="store.staking" />
+    <!-- Governance Parameters -->
+    <CardParameter :cardItem="store.gov" />
+    <!-- Distribution Parameters -->
+    <CardParameter :cardItem="store.distribution" />
+    <!-- Slashing Parameters -->
+    <CardParameter :cardItem="store.slashing" />
+    <!-- Application Version -->
+    <TableParameter :tableItem="store.appVersion" />
+    <!-- Node Information -->
+    <TableParameter :tableItem="store.nodeVersion" />
+  </div>
 </template>
+
 <route>
 {
-    meta: {
+  meta: {
     i18n: 'parameters'
-    }
+  }
 }
-</route>
\ No newline at end of file
+</route>