add more skeleton

status-base · May 26, 2022 · 9240c38 · 9240c38
1 parent 12ff111
commit 9240c38
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/components/Card.vue b/components/Card.vue
@@ -20,7 +20,12 @@ const status = ref()
         </div>
         <h4 class="text-sm text-gray-400">{{ meta_data.url }}</h4>
       </div>
-      <p class="ml-3 md:text-xl text-gray-400">{{ formatUptime(status?.overallUptime) }}</p>
+      <div>
+        <p v-if="status?.overallUptime" class="ml-3 md:text-xl text-gray-400">
+          {{ formatUptime(status?.overallUptime) }}
+        </p>
+        <div v-else class="bg-gray-100 rounded-lg w-24 h-7 animate-pulse"></div>
+      </div>
     </div>
     <StatusGrid ref="status" :data="report_data?.body" />
   </div>

diff --git a/pages/urls/[slug].vue b/pages/urls/[slug].vue
@@ -19,9 +19,9 @@ useCustomHead(`${url.value.title} Status Page | StatusBase`)
   <div class="">
     <OverallStatus :report_data="log"></OverallStatus>
 
-    <div class="mt-12 md:mt-20 font-semibold inline-flex items-end">
+    <div class="mt-12 md:mt-20 font-semibold inline-flex flex-col md:flex-row md:items-end">
       <h2 class="text-xl md:text-3xl">{{ url.title }}'s Uptime</h2>
-      <h3 class="text-gray-300 md:text-xl ml-3 md:ml-6">Last {{ gridCount }} days</h3>
+      <h3 class="text-gray-300 md:text-xl md:ml-6">Last {{ gridCount }} days</h3>
     </div>
 
     <div class="flex flex-col items-center">