Hide date when mobile

amir20 · Jan 29, 2023 · 61fea7a · 61fea7a
1 parent 46aa4ab
commit 61fea7a
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -26,6 +26,11 @@ export default defineConfig(() => ({
   plugins: [
     vue({
       reactivityTransform: true,
+      template: {
+        compilerOptions: {
+          whitespace: "preserve",
+        },
+      },
     }),
     Icons({
       autoInstall: true,