From 36bdfd09eb0f505571e3dfe3a67e4bf9c60698ee Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Wed, 31 May 2023 15:48:14 +0800
Subject: [PATCH] feat: footer style,wallet show

---
 src/layouts/components/DefaultLayout.vue | 15 ++++++------
 src/layouts/components/NavBarWallet.vue  |  6 ++---
 src/layouts/components/NavFooter.vue     | 30 +++++++++++++++++-------
 src/style.css                            |  5 +++-
 4 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index dc6e9f4a..c8aba0a6 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -263,7 +263,7 @@ const showDiscord = window.location.host.search('ping.pub') > -1;
         </a>
       </div>
     </div>
-    <div class="xl:!ml-64 px-5 pt-4 min-h-screen">
+    <div class="xl:!ml-64 px-5 pt-4">
       <!-- header -->
       <div
         class="flex items-center py-3 bg-base-100 mb-4 rounded px-4 sticky top-0 z-10 shadow"
@@ -287,14 +287,15 @@ const showDiscord = window.location.host.search('ping.pub') > -1;
       </div>
 
       <!-- 👉 Pages -->
-      <RouterView v-slot="{ Component }">
-        <Transition mode="out-in">
-          <Component :is="Component" />
-        </Transition>
-      </RouterView>
+      <div style="min-height: calc(100vh - 180px);">
+        <RouterView v-slot="{ Component }">
+          <Transition mode="out-in">
+            <Component :is="Component" />
+          </Transition>
+        </RouterView>
+      </div>
 
       <newFooter />
     </div>
-   
   </div>
 </template>
diff --git a/src/layouts/components/NavBarWallet.vue b/src/layouts/components/NavBarWallet.vue
index f1b98c8a..c1221a1b 100644
--- a/src/layouts/components/NavBarWallet.vue
+++ b/src/layouts/components/NavBarWallet.vue
@@ -53,7 +53,7 @@ const tipMsg = computed(() => {
         v-if="!walletStore?.currentAddress"
         for="PingConnectWallet"
         class="btn btn-sm btn-primary"
-        ><Icon icon="mdi:wallet" /><span class="ml-1 hidden md:block"
+        ><Icon icon="mdi:wallet" /><span class="ml-1 block"
           >Connect Wallet</span
         ></label
       >
@@ -80,10 +80,10 @@ const tipMsg = computed(() => {
           to="/wallet/portfolio"
           >Portfolio</RouterLink
         >
-        <div v-if="walletStore.currentAddress" class="divider mt-1 mb-1 hidden md:block"></div>
+        <div v-if="walletStore.currentAddress" class="divider mt-1 mb-1"></div>
         <a
           v-if="walletStore.currentAddress"
-          class="hidden md:block py-1 px-1 md:!py-2 md:!px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
+          class="block py-1 px-1 md:!py-2 md:!px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
           @click="walletStore.disconnect()"
           >Disconnect</a
         >
diff --git a/src/layouts/components/NavFooter.vue b/src/layouts/components/NavFooter.vue
index 805d513a..a5a394d0 100644
--- a/src/layouts/components/NavFooter.vue
+++ b/src/layouts/components/NavFooter.vue
@@ -1,14 +1,16 @@
 <template>
   <div class="h-10 bg-gray-100 dark:bg-[#171d30] w-full"></div>
+  <!-- footer -->
   <footer
-    class="footer items-center h-10 text-sm bg-gray-100 dark:bg-[#171d30] fixed bottom-0 pr-14 pl-4 z-10"
+    class="flex sm:!flex-row flex-col items-center h-10 text-sm bg-gray-100 dark:bg-[#171d30] py-2 z-10 w-full"
   >
-    <div class="items-center grid-flow-col">
-      &copy;
-      {{ new Date().getFullYear() }}
-      Made With
-      <img src="../../assets/images/heart.svg" />
-      By
+  <!-- items-center grid-flow-col -->
+    <div class="flex flex-1">
+      &copy;&nbsp;
+      {{ new Date().getFullYear() }}&nbsp;
+      Made With&nbsp;
+      <img src="../../assets/images/heart.svg" />&nbsp;
+      By&nbsp;
       <a
         class="link link-primary no-underline"
         href="https://ping.pub"
@@ -17,11 +19,12 @@
         >Ping.pub</a
       >
     </div>
+    <!-- grid-flow-col gap-4 sm:!place-self-center hidden sm:!grid -->
     <div
-      class="grid-flow-col gap-4 sm:!place-self-center hidden sm:!grid"
+      class="flex "
     >
       <a
-        class="link link-primary no-underline"
+        class="link link-primary no-underline mr-4"
         href="https://github.com/ping-pub/explorer/blob/master/LICENSE"
         target="noopener noreferrer"
         >License</a
@@ -35,3 +38,12 @@
     </div>
   </footer>
 </template>
+display: grid;
+width: 100%;
+grid-auto-flow: row;
+place-items: start;
+row-gap: 2.5rem;
+-moz-column-gap: 1rem;
+column-gap: 1rem;
+font-size: 0.875rem;
+line-height: 1.25rem;
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index c2615393..d710b6c0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -4,8 +4,11 @@
 @tailwind components;
 @tailwind utilities;
 
+html,body {
+  height: 100%;
+}
+
 body {
-  min-height: 100vh;
   transition: color 0.5s, background-color 0.5s;
   line-height: 1.6;
   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,