From 61fea7afaa7eb5083a4702726fb6f23051277d8a Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Sun, 29 Jan 2023 13:39:53 -0800
Subject: [PATCH] Hide date when mobile

---
 assets/components/LogViewer/ContainerStat.vue |  6 ------
 assets/components/LogViewer/StatMonitor.vue   |  8 +-------
 assets/components/RelativeTime.vue            | 14 +++++++-------
 vite.config.ts                                |  5 +++++
 4 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/assets/components/LogViewer/ContainerStat.vue b/assets/components/LogViewer/ContainerStat.vue
index 3675259b..4ced51a2 100644
--- a/assets/components/LogViewer/ContainerStat.vue
+++ b/assets/components/LogViewer/ContainerStat.vue
@@ -49,12 +49,6 @@ const memoryData = computedWithControl(
 </script>
 
 <style lang="scss" scoped>
-.has-spacer {
-  &::after {
-    content: " ";
-  }
-}
-
 .has-border {
   border: 1px solid var(--primary-color);
   border-radius: 3px;
diff --git a/assets/components/LogViewer/StatMonitor.vue b/assets/components/LogViewer/StatMonitor.vue
index ddf36671..80fcc6ae 100644
--- a/assets/components/LogViewer/StatMonitor.vue
+++ b/assets/components/LogViewer/StatMonitor.vue
@@ -4,7 +4,7 @@
       <stat-sparkline :data="data" @selected-point="onSelectedPoint"></stat-sparkline>
     </div>
     <div class="has-background-body-color is-top-left">
-      <span class="has-text-weight-light has-spacer">{{ label }}</span>
+      <span class="has-text-weight-light">{{ label }}</span>
       <span class="has-text-weight-bold">
         {{ mouseOver ? selectedPoint?.value ?? selectedPoint?.y ?? statValue : statValue }}
       </span>
@@ -25,12 +25,6 @@ let mouseOver = $ref(false);
 </script>
 
 <style lang="scss" scoped>
-.has-spacer {
-  &::after {
-    content: " ";
-  }
-}
-
 .has-border {
   border: 1px solid var(--primary-color);
   border-radius: 3px;
diff --git a/assets/components/RelativeTime.vue b/assets/components/RelativeTime.vue
index 087a2692..d12efaee 100644
--- a/assets/components/RelativeTime.vue
+++ b/assets/components/RelativeTime.vue
@@ -1,9 +1,12 @@
 <template>
-  <time :datetime="date.toISOString()">{{ format(date) }}</time>
+  <div>
+    <time :datetime="date.toISOString()" class="is-hidden-mobile">{{ dateStr }}</time>
+    <time :datetime="date.toISOString()">{{ timeStr }}</time>
+  </div>
 </template>
 
 <script lang="ts" setup>
-defineProps<{
+const props = defineProps<{
   date: Date;
 }>();
 
@@ -13,9 +16,6 @@ const timeFormatter = $computed(
   () => new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit", hour12: use12Hour })
 );
 
-function format(date: Date) {
-  const dateStr = dateFormatter.format(date);
-  const timeStr = timeFormatter.format(date);
-  return `${dateStr} ${timeStr}`;
-}
+const dateStr = $computed(() => dateFormatter.format(props.date));
+const timeStr = $computed(() => timeFormatter.format(props.date));
 </script>
diff --git a/vite.config.ts b/vite.config.ts
index 498fea4d..c99f710c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -26,6 +26,11 @@ export default defineConfig(() => ({
   plugins: [
     vue({
       reactivityTransform: true,
+      template: {
+        compilerOptions: {
+          whitespace: "preserve",
+        },
+      },
     }),
     Icons({
       autoInstall: true,