Merge pull request #414 from alisaweb3/v3-single

Footer remove fixed, Wallet all show, html and body add style

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>

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
         >

src/layouts/components/NavFooter.vue

@@ -1,14 +1,15 @@
 <template>
-  <div class="h-10 bg-gray-100 dark:bg-[#171d30] w-full"></div>
+  <div class="h-12 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-12 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
+    <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"
@@ -18,10 +19,10 @@
       >
     </div>
     <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
@@ -34,4 +35,4 @@
       >
     </div>
   </footer>
-</template>
+</template>

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,