feat: dashboard layout

src/components/ChainSummary.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getLogo, useDashboard,  } from '@/stores/useDashboard';
+import { getLogo, useDashboard, } from '@/stores/useDashboard';
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -10,45 +10,37 @@ const props = defineProps({
 });
 
 const dashboardStore = useDashboard()
-const conf = computed(()=> dashboardStore.chains[props.name] || {})
+const conf = computed(() => dashboardStore.chains[props.name] || {})
 
 </script>
 <template>
-    <VCard outlined class="p-1">
+  <VCard outlined class="p-1">
-        <VList class="card-list">
+    <VList class="card-list">
-            <VListItem :to="`/${name}`">
+      <VListItem :to="`/${name}`">
-            <template #prepend>
+        <template #prepend>
-                <VAvatar rounded size="45" variant="tonal" class="me-3">
+          <VAvatar rounded size="45" variant="tonal" class="me-3">
-                <VImg :src="conf.logo" height="22"/>
+            <VImg :src="conf.logo" height="22" />
-                </VAvatar>
+          </VAvatar>
-            </template>
+        </template>
 
-            <VListItemTitle class="font-weight-semibold text-sm mb-1">
+        <VListItemTitle class="font-weight-semibold text-sm mb-1">
-                {{ conf?.prettyName || props.name }}
+          {{ conf?.prettyName || props.name }}
-            </VListItemTitle>
+        </VListItemTitle>
 
-            <VListItemSubtitle class="text-xs">
+        <VListItemSubtitle class="text-xs">
-                {{conf?.chainId || ''}}
+          {{ conf?.chainId || '' }}
-            </VListItemSubtitle>
+        </VListItemSubtitle>
 
-            <template #append>
+        <template #append>
-                <VListItemAction @click="(e:Event)=>{e.stopPropagation()}">
+          <VListItemAction @click="(e: Event) => { e.stopPropagation() }">
-                    <VCheckbox
+            <VCheckbox v-model="dashboardStore.favorite" true-icon="mdi-star" false-icon="mdi-star" color="warning"
-                        v-model="dashboardStore.favorite"
+              :value="props.name" />
-                        true-icon="mdi-star"
+            <VTooltip activator="parent" location="top">
-                        false-icon="mdi-star"
+              {{ $t('index.add_to_favorite') }}
-                        color="warning"
+            </VTooltip>
-                        :value="props.name"
+          </VListItemAction>
-                    />
+        </template>
-                    <VTooltip
+      </VListItem>
-                        activator="parent"
+    </VList>
-                        location="top"
+  </VCard>
-                    >
-                        {{ $t('index.add_to_favorite') }}
-                    </VTooltip>
-                </VListItemAction>
-            </template>
-            </VListItem>
-        </VList>
-    </VCard>
 </template>

src/pages/index.vue

@@ -23,13 +23,13 @@ const chain = useBlockchain()
 <template>
   <div class="">
     <div class="flex items-center justify-center mb-6 mt-10">
-      <div class="w-16 rounded-full mr-3">
+      <div class="w-8 md:w-16 rounded-full mr-3">
         <img src="/logo.svg" />
       </div>
-      <h1 class="text-primary text-6xl font-bold mr-2">
+      <h1 class="text-primary text-3xl md:text-6xl font-bold mr-2">
         Ping dashboard
       </h1>
-      <div class="badge badge-info badge-outline mt-5">Beta</div>
+      <div class="badge badge-info badge-outline mt-1 text-sm md:mt-5">Beta</div>
     </div>
     <div class="text-center text-base">
       <p class="mb-1">
@@ -41,19 +41,17 @@ const chain = useBlockchain()
     </div>
     <div v-if="dashboard.status !== LoadingStatus.Loaded" class="flex justify-center"><progress
         class="progress progress-info w-80 h-1"></progress></div>
-        
+
     <VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')"
       style="max-width: 300px;" app>
       <template #append-inner>
         {{ chains.length }}/{{ dashboard.length }}
       </template>
     </VTextField>
-    <VRow class="my-auto">
+
-      <VCol v-for="k in chains" md="3">
+    <div class="grid grid-cols-2 gap-4 mt-6 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5">
-        <VLazy min-height="40" min-width="200" transition="fade-transition">
+      <ChainSummary v-for="(chain, index) in chains" :key="index" :name="chain.chainName" />
-          <ChainSummary :name="k.chainName" />
+    </div>
-        </VLazy>
+
-      </VCol>
-    </VRow>
   </div>
 </template>