feat: btm-nav for mobile & swipe page

Zephyruso · Jan 7, 2025 · ba874d6 · ba874d6
1 parent dec2173
commit ba874d6
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 65 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <title>zashboard</title>
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0"
+      content="width=device-width, initial-scale=1.0,viewport-fit=cover"
     />
     <meta
       name="description"

diff --git a/src/components/connections/ConnectionTable.vue b/src/components/connections/ConnectionTable.vue
@@ -2,6 +2,9 @@
   <div
     ref="parentRef"
     class="h-full overflow-y-auto bg-clip-content p-2"
+    @touchstart.stop
+    @touchmove.stop
+    @touchend.stop
   >
     <div :style="{ height: `${totalSize}px` }">
       <table :class="`table table-zebra ${sizeOfTable} rounded-none shadow-md`">

diff --git a/src/views/ConnectionsPage.vue b/src/views/ConnectionsPage.vue
@@ -1,22 +1,20 @@
 <template>
-  <div class="flex flex-col">
-    <ConnectionCardList v-if="useConnectionCard" />
-    <ConnectionTable v-else />
-    <dialog
-      ref="modalRef"
-      class="modal"
+  <ConnectionCardList v-if="useConnectionCard" />
+  <ConnectionTable v-else />
+  <dialog
+    ref="modalRef"
+    class="modal"
+  >
+    <div class="modal-box">
+      <VueJsonPretty :data="infoConn" />
+    </div>
+    <form
+      method="dialog"
+      class="modal-backdrop"
     >
-      <div class="modal-box">
-        <VueJsonPretty :data="infoConn" />
-      </div>
-      <form
-        method="dialog"
-        class="modal-backdrop"
-      >
-        <button>close</button>
-      </form>
-    </dialog>
-  </div>
+      <button>close</button>
+    </form>
+  </dialog>
 </template>
 
 <script setup lang="ts">

diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
@@ -10,6 +10,7 @@
 
     <div
       class="drawer-content fixed bottom-0 flex h-full w-full flex-col overflow-hidden bg-base-200/40 md:relative md:w-auto"
+      ref="contentRef"
     >
       <component
         v-if="ctrlComp && isSidebarCollapsed"
@@ -18,34 +19,30 @@
         :horizontal="true"
       />
       <div class="relative h-0 flex-1">
-        <RouterView class="absolute h-full w-full" />
-      </div>
-      <div :class="`${isPWA ? 'h-20' : 'h-12'} shrink-0 md:hidden`"></div>
-      <div
-        ref="navBarRef"
-        :class="`fixed bottom-0 z-30 w-full bg-base-200 md:hidden ${isPWA ? 'h-20 pb-8' : 'h-12'}`"
-      >
-        <div class="flex h-12 w-full items-center justify-center gap-1 p-2">
-          <ul class="menu menu-horizontal flex flex-1">
-            <li
-              v-for="r in renderRoutes"
-              :key="r"
-              class="flex-1"
-            >
-              <a
-                class="flex items-center justify-center"
-                :class="r === route.name ? 'active' : 'inactive'"
-                :href="`#${r}`"
-              >
-                <component
-                  :is="ROUTE_ICON_MAP[r]"
-                  class="h-5 w-5"
-                />
-              </a>
-            </li>
-          </ul>
+        <div class="absolute h-full w-full overflow-y-auto">
+          <RouterView />
+          <div
+            class="shrink-0 md:hidden"
+            :class="isPWA ? 'max-md:h-[5.5rem]' : 'max-md:h-14'"
+          />
         </div>
       </div>
+      <div :class="`btm-nav glass z-30 bg-none md:hidden ${isPWA ? 'h-[5.5rem] pb-8' : 'h-14'}`">
+        <button
+          v-for="r in renderRoutes"
+          :key="r"
+          @click="router.push({ name: r })"
+          :class="r === route.name ? 'active bg-inherit' : ''"
+        >
+          <component
+            :is="ROUTE_ICON_MAP[r]"
+            class="h-5 w-5"
+          />
+          <span class="text-xs">
+            {{ $t(r) }}
+          </span>
+        </button>
+      </div>
     </div>
 
     <dialog
@@ -117,8 +114,8 @@ const ctrlComp = computed(() => {
   return ctrlsMap[route.name as keyof typeof ctrlsMap]
 })
 
-const navBarRef = ref()
-const { direction } = useSwipe(navBarRef, { threshold: 15 })
+const contentRef = ref()
+const { direction } = useSwipe(contentRef, { threshold: 15 })
 
 const getNextRouteName = () => {
   const routeName = route.name as ROUTE_NAME

diff --git a/src/views/LogsPage.vue b/src/views/LogsPage.vue
@@ -1,25 +1,23 @@
 <template>
-  <div class="flex flex-col">
-    <template v-if="!renderLogs.length">
-      <div class="card m-2 flex-row p-2 text-sm">
-        {{ $t('noContent') }}
+  <template v-if="!renderLogs.length">
+    <div class="card m-2 flex-row p-2 text-sm">
+      {{ $t('noContent') }}
+    </div>
+  </template>
+  <VirtualScroller :data="renderLogs">
+    <template v-slot="{ item }: { item: LogWithSeq }">
+      <div class="card mb-1 block p-2 text-sm">
+        <span>{{ item.seq }}</span>
+        <span class="mx-2 text-primary">
+          {{ dayjs(item.time).locale(language).format('HH:mm:ss') }}
+        </span>
+        <span :class="textColorMapForType[item.type as keyof typeof textColorMapForType]">
+          {{ item.type }}
+        </span>
+        <span class="ml-2">{{ item.payload }}</span>
       </div>
     </template>
-    <VirtualScroller :data="renderLogs">
-      <template v-slot="{ item }: { item: LogWithSeq }">
-        <div class="card mb-1 block p-2 text-sm">
-          <span>{{ item.seq }}</span>
-          <span class="mx-2 text-primary">
-            {{ dayjs(item.time).locale(language).format('HH:mm:ss') }}
-          </span>
-          <span :class="textColorMapForType[item.type as keyof typeof textColorMapForType]">
-            {{ item.type }}
-          </span>
-          <span class="ml-2">{{ item.payload }}</span>
-        </div>
-      </template>
-    </VirtualScroller>
-  </div>
+  </VirtualScroller>
 </template>
 
 <script setup lang="ts">