From 727cc6aeb15068bf6c4d9613145b3822b8dbb034 Mon Sep 17 00:00:00 2001
From: Pham Tu <tubackkhoa@gmail.com>
Date: Wed, 24 Jan 2024 10:53:44 +0700
Subject: [PATCH] fix responsive for columne

---
 src/components/Countdown.vue                | 41 +++++---------
 src/components/UptimeBar.vue                |  2 -
 src/components/dynamic/TimestampElement.vue | 10 ++++
 src/components/dynamic/UInt8Array.vue       |  8 +--
 src/components/dynamic/index.ts             |  5 ++
 src/layouts/blank.vue                       |  8 +--
 src/layouts/components/NavBarWallet.vue     | 62 ++++++++++++++-------
 src/modules/[chain]/block/[height].vue      |  6 +-
 src/modules/[chain]/staking/index.vue       |  7 ---
 src/stores/useBaseStore.ts                  |  4 --
 src/style.css                               | 36 ++++++++++++
 11 files changed, 113 insertions(+), 76 deletions(-)
 create mode 100644 src/components/dynamic/TimestampElement.vue

diff --git a/src/components/Countdown.vue b/src/components/Countdown.vue
index 26dc752a..018606c5 100644
--- a/src/components/Countdown.vue
+++ b/src/components/Countdown.vue
@@ -7,40 +7,25 @@ const props = defineProps({
   css: { type: String },
 });
 
-const s = ref(0)
-
+const s = ref(0);
 </script>
 <template>
   <Countdown
     v-if="time"
     :time="time > 0 ? time : 0"
     v-slot="{ days, hours, minutes, seconds }"
-    class="countdown-container justify-items-center "
+    class="countdown-container justify-items-center"
   >
-    <span class="text-primary font-bold " :class="css">{{ days }}</span> days 
-    <span class="text-primary font-bold" :class="css">{{ hours }}</span> hours 
-    <span class="text-primary font-bold" :class="css">{{ minutes }}</span> minutes
-      <span class="text-primary font-bold w-40" :class="css">
-        <Transition name="slide-up">
-          <span v-if="seconds % 2 === 0" class="countdown">{{ seconds }}</span> 
-          <span v-else="seconds % 2 === 1" class="countdown">{{ seconds }}</span>
-        </Transition>
-      </span>
-      <span class="ml-10">seconds</span>
+    <span class="text-primary font-bold" :class="css">{{ days }}</span> days
+    <span class="text-primary font-bold" :class="css">{{ hours }}</span> hours
+    <span class="text-primary font-bold" :class="css">{{ minutes }}</span>
+    minutes
+    <span class="text-primary font-bold w-40" :class="css">
+      <Transition name="slide-up">
+        <span v-if="seconds % 2 === 0" class="countdown">{{ seconds }}</span>
+        <span v-else="seconds % 2 === 1" class="countdown">{{ seconds }}</span>
+      </Transition>
+    </span>
+    <span class="ml-10">seconds</span>
   </Countdown>
 </template>
-
-<style>
-.countdown-container {
-  display: inline-flexbox;
-  position: relative;
-}
-
-.countdown {
-  position: absolute;
-  width: 45%;
-  text-align: right;
-  float: right;
-}
-
-</style>
diff --git a/src/components/UptimeBar.vue b/src/components/UptimeBar.vue
index 0bf0c38f..03ae9138 100644
--- a/src/components/UptimeBar.vue
+++ b/src/components/UptimeBar.vue
@@ -38,5 +38,3 @@ const bars = computed(() => {
     </div>
   </div>
 </template>
-
-<style></style>
diff --git a/src/components/dynamic/TimestampElement.vue b/src/components/dynamic/TimestampElement.vue
new file mode 100644
index 00000000..58ca8a3a
--- /dev/null
+++ b/src/components/dynamic/TimestampElement.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import { useFormatter } from '@/stores';
+const props = defineProps(['value']);
+const format = useFormatter();
+</script>
+<template>
+  <div class="overflow-auto">
+    {{ format.toLocaleDate(value) }}
+  </div>
+</template>
diff --git a/src/components/dynamic/UInt8Array.vue b/src/components/dynamic/UInt8Array.vue
index 1ca4bdf4..36d2ce8a 100644
--- a/src/components/dynamic/UInt8Array.vue
+++ b/src/components/dynamic/UInt8Array.vue
@@ -51,11 +51,11 @@ function getClass(value: string) {
         {{ text }}
       </span>
     </div>
-    <div class="btn-group mt-4" role="group">
+    <div class="btn-group mt-4 inline-block" role="group">
       <button
         type="button"
         v-bind:class="getClass('utf8')"
-        class="btn btn-sm"
+        class="btn btn-xs"
         @click="change('utf8')"
       >
         Utf8
@@ -63,7 +63,7 @@ function getClass(value: string) {
       <button
         type="button"
         v-bind:class="getClass('base64')"
-        class="btn btn-sm"
+        class="btn btn-xs"
         @click="change('base64')"
       >
         Base64
@@ -71,7 +71,7 @@ function getClass(value: string) {
       <button
         type="button"
         v-bind:class="getClass('hex')"
-        class="btn btn-sm"
+        class="btn btn-xs"
         @click="change('hex')"
       >
         Hex
diff --git a/src/components/dynamic/index.ts b/src/components/dynamic/index.ts
index 491f83bd..6f17dced 100644
--- a/src/components/dynamic/index.ts
+++ b/src/components/dynamic/index.ts
@@ -11,6 +11,7 @@ import ArrayElement from './ArrayElement.vue';
 import UInt8Array from './UInt8Array.vue';
 import NumberElement from './NumberElement.vue';
 import TokenElement from './TokenElement.vue';
+import TimestampElement from './TimestampElement.vue';
 import ObjectHorizontalElement from './ObjectHorizontalElement.vue';
 import Long from 'long';
 
@@ -44,6 +45,10 @@ function selectObject(v: Object, direct?: string) {
       Object.keys(v).includes('denom'): {
       return TokenElement;
     }
+    case v && Object.keys(v).includes('seconds'):
+    case v instanceof Date: {
+      return TimestampElement;
+    }
     case direct === 'horizontal':
       return ObjectHorizontalElement;
     default:
diff --git a/src/layouts/blank.vue b/src/layouts/blank.vue
index a890f3b4..e6ac2f13 100644
--- a/src/layouts/blank.vue
+++ b/src/layouts/blank.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, resolveComponent, h } from 'vue'
+import { defineComponent, resolveComponent, h } from 'vue';
 
 export default defineComponent({
   setup() {
@@ -10,9 +10,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-.layout-wrapper.layout-blank {
-  flex-direction: column;
-}
-</style>
diff --git a/src/layouts/components/NavBarWallet.vue b/src/layouts/components/NavBarWallet.vue
index 2d0c69d5..83db336e 100644
--- a/src/layouts/components/NavBarWallet.vue
+++ b/src/layouts/components/NavBarWallet.vue
@@ -36,35 +36,60 @@ const tipMsg = computed(() => {
 
 <template>
   <div class="dropdown dropdown-hover dropdown-end">
-    <label tabindex="0" class="btn btn-sm btn-primary m-1 lowercase truncate !inline-flex text-xs md:!text-sm">
+    <label
+      tabindex="0"
+      class="btn btn-sm btn-primary m-1 lowercase truncate !inline-flex text-xs md:!text-sm"
+    >
       <Icon icon="mdi:wallet" />
       <span class="ml-1 hidden md:block">
-        {{ walletStore.shortAddress || 'Wallet' }}</span>
+        {{ walletStore.shortAddress || 'Wallet' }}</span
+      >
     </label>
-    <div tabindex="0" class="dropdown-content menu shadow p-2 bg-base-100 rounded w-52 md:!w-64 overflow-auto">
-      <label v-if="!walletStore?.currentAddress" for="PingConnectWallet" class="btn btn-sm btn-primary">
+    <div
+      tabindex="0"
+      class="dropdown-content menu shadow p-2 bg-base-100 rounded w-52 md:!w-64 overflow-auto"
+    >
+      <label
+        v-if="!walletStore?.currentAddress"
+        for="PingConnectWallet"
+        class="btn btn-sm btn-primary"
+      >
         <Icon icon="mdi:wallet" /><span class="ml-1 block">Connect Wallet</span>
       </label>
       <div class="px-2 mb-1 text-gray-500 dark:text-gray-400 font-semibold">
         {{ walletStore.connectedWallet?.wallet }}
       </div>
       <div>
-        <a v-if="walletStore.currentAddress"
+        <a
+          v-if="walletStore.currentAddress"
           class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
-          style="overflow-wrap: anywhere" @click="copyAdress(walletStore.currentAddress)">
+          style="overflow-wrap: anywhere"
+          @click="copyAdress(walletStore.currentAddress)"
+        >
           {{ walletStore.currentAddress }}
         </a>
         <div class="divider mt-1 mb-1"></div>
         <RouterLink to="/wallet/accounts">
-          <div class="block py-2 px-2 hover:!bg-gray-100 rounded cursor-pointer">Accounts</div>
+          <div
+            class="block py-2 px-2 hover:!bg-gray-100 rounded cursor-pointer"
+          >
+            Accounts
+          </div>
         </RouterLink>
         <RouterLink to="/wallet/portfolio">
-          <div class="block py-2 px-2 hover:!bg-gray-100 rounded cursor-pointer">Portfolio</div>
+          <div
+            class="block py-2 px-2 hover:!bg-gray-100 rounded cursor-pointer"
+          >
+            Portfolio
+          </div>
         </RouterLink>
         <div v-if="walletStore.currentAddress" class="divider mt-1 mb-1"></div>
-        <a v-if="walletStore.currentAddress"
+        <a
+          v-if="walletStore.currentAddress"
           class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
-          @click="walletStore.disconnect()">Disconnect</a>
+          @click="walletStore.disconnect()"
+          >Disconnect</a
+        >
       </div>
     </div>
     <div class="toast" v-show="showCopyToast === 1">
@@ -83,15 +108,12 @@ const tipMsg = computed(() => {
     </div>
   </div>
   <Teleport to="body">
-    <ping-connect-wallet :chain-id="baseStore.currentChainId" :hd-path="chainStore.defaultHDPath"
-      :addr-prefix="chainStore.current?.bech32Prefix || 'cosmos'" @connect="walletStateChange"
-      @keplr-config="walletStore.suggestChain()" />
+    <ping-connect-wallet
+      :chain-id="baseStore.currentChainId"
+      :hd-path="chainStore.defaultHDPath"
+      :addr-prefix="chainStore.current?.bech32Prefix || 'cosmos'"
+      @connect="walletStateChange"
+      @keplr-config="walletStore.suggestChain()"
+    />
   </Teleport>
 </template>
-
-<style>
-.ping-connect-btn,
-.ping-connect-dropdown {
-  display: none !important;
-}
-</style>
diff --git a/src/modules/[chain]/block/[height].vue b/src/modules/[chain]/block/[height].vue
index 7f246b69..41da0e74 100644
--- a/src/modules/[chain]/block/[height].vue
+++ b/src/modules/[chain]/block/[height].vue
@@ -25,8 +25,7 @@ const isFutureBlock = computed({
     const latest = store.latest?.block?.header.height
     const isFuture = latest ? target.value > Number(latest) : true
     if (!isFuture && !current.value.blockId) store.fetchBlock(target.value).then(x => {
-      current.value = x;
-      console.log('fetchBlock',x.block.txs);
+      current.value = x;      
     })
     return isFuture
   },
@@ -59,8 +58,7 @@ function updateTarget() {
 onBeforeRouteUpdate(async (to, from, next) => {
   if (from.path !== to.path) {
     store.fetchBlock(String(to.params.height)).then(x => {
-      current.value = x;
-      console.log('fetchBlock',x.block.txs);
+      current.value = x;      
     });
     next();
   }
diff --git a/src/modules/[chain]/staking/index.vue b/src/modules/[chain]/staking/index.vue
index be09f517..0e2afefc 100644
--- a/src/modules/[chain]/staking/index.vue
+++ b/src/modules/[chain]/staking/index.vue
@@ -578,10 +578,3 @@ loadAvatars();
     }
   }
 </route>
-
-<style>
-.staking-table.table :where(th, td) {
-  padding: 8px 5px;
-  background: transparent;
-}
-</style>
diff --git a/src/stores/useBaseStore.ts b/src/stores/useBaseStore.ts
index 5f8973a3..5e4d163b 100644
--- a/src/stores/useBaseStore.ts
+++ b/src/stores/useBaseStore.ts
@@ -42,10 +42,6 @@ export const useBaseStore = defineStore('baseStore', {
           const diff = dayjs(this.latest.block?.header?.time.toString()).diff(
             this.earlest.block?.header?.time.toString()
           );
-          console.log(
-            JSON.stringify(this.earlest),
-            JSON.stringify(this.latest)
-          );
           const blocks =
             Number(this.latest.block.header.height) -
             Number(this.earlest.block.header.height);
diff --git a/src/style.css b/src/style.css
index 226d2b35..f7b5a6ca 100644
--- a/src/style.css
+++ b/src/style.css
@@ -34,6 +34,10 @@ html[data-theme='dark'] {
   --bg-active: #242b40;
 }
 
+table td {
+  min-width: 100px!important;
+}
+
 .table th:first-child {
   position: relative;
   z-index: 2;
@@ -58,6 +62,38 @@ html[data-theme='dark'] {
   word-break: break-word;
 }
 
+.ping-connect-btn,
+.ping-connect-dropdown {
+  display: none !important;
+}
+
+.layout-wrapper.layout-blank {
+  flex-direction: column;
+}
+
+.countdown-container {
+  display: inline-flexbox;
+  position: relative;
+}
+
+.countdown {
+  position: absolute;
+  width: 45%;
+  text-align: right;
+  float: right;
+}
+
+.validatore-table.table :where(th, td) {
+  padding: 0.6rem 1rem;
+  font-size: 14px;
+}
+
+.staking-table.table :where(th, td) {
+  padding: 8px 5px;
+  background: transparent;
+}
+
+
 .text-break {
   word-break: break-word;
 }
\ No newline at end of file