From fc0c189e3867ed6d3c8ecadd503114b8c978d3a3 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 23 May 2023 12:07:19 -0700
Subject: [PATCH] feat: adds a sub header to display stats on mobile view
 (#2212)

---
 assets/components/LogViewer/ContainerHealth.vue |  2 +-
 assets/components/LogViewer/ContainerTitle.vue  |  2 +-
 assets/components/LogViewer/LogContainer.vue    |  4 ++--
 assets/components/LogViewer/StatMonitor.vue     | 12 +++++++-----
 assets/components/MobileMenu.vue                |  5 +----
 assets/components/ScrollableView.vue            | 12 ++++++++++++
 6 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/assets/components/LogViewer/ContainerHealth.vue b/assets/components/LogViewer/ContainerHealth.vue
index fd0c016c..2f8c595a 100644
--- a/assets/components/LogViewer/ContainerHealth.vue
+++ b/assets/components/LogViewer/ContainerHealth.vue
@@ -10,7 +10,7 @@
 import { ContainerHealth } from "@/types/Container";
 
 defineProps<{
-  health: ContainerHealth;
+  health: ContainerHealth | undefined;
 }>();
 </script>
 
diff --git a/assets/components/LogViewer/ContainerTitle.vue b/assets/components/LogViewer/ContainerTitle.vue
index 7b2ab0c4..69a048c6 100644
--- a/assets/components/LogViewer/ContainerTitle.vue
+++ b/assets/components/LogViewer/ContainerTitle.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="column is-ellipsis">
       {{ container.name }}<span v-if="container.isSwarm">{{ container.swarmId }}</span>
-      <span class="tag is-dark">{{ container.image.replace(/@sha.*/, "") }}</span>
+      <span class="tag is-dark is-hidden-mobile">{{ container.image.replace(/@sha.*/, "") }}</span>
     </div>
   </div>
 </template>
diff --git a/assets/components/LogViewer/LogContainer.vue b/assets/components/LogViewer/LogContainer.vue
index 2d4d877e..2548e994 100644
--- a/assets/components/LogViewer/LogContainer.vue
+++ b/assets/components/LogViewer/LogContainer.vue
@@ -1,7 +1,7 @@
 <template>
   <scrollable-view :scrollable="scrollable" v-if="container">
     <template #header v-if="showTitle">
-      <div class="mr-0 columns is-vcentered is-marginless is-hidden-mobile has-boxshadow">
+      <div class="mr-0 columns is-mobile is-vcentered is-marginless has-boxshadow">
         <div class="column is-clipped is-paddingless">
           <container-title @close="$emit('close')" />
         </div>
@@ -9,7 +9,7 @@
           <container-stat />
         </div>
 
-        <div class="mr-2 column is-narrow is-paddingless">
+        <div class="mr-2 column is-narrow is-paddingless is-hidden-mobile">
           <log-actions-toolbar :onClearClicked="onClearClicked" />
         </div>
         <div class="mr-2 column is-narrow is-paddingless" v-if="closable">
diff --git a/assets/components/LogViewer/StatMonitor.vue b/assets/components/LogViewer/StatMonitor.vue
index c1ff1794..f0543edf 100644
--- a/assets/components/LogViewer/StatMonitor.vue
+++ b/assets/components/LogViewer/StatMonitor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="has-text-centered is-relative host" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
-    <div class="has-border has-boxshadow">
+    <div class="has-border has-boxshadow is-hidden-mobile">
       <stat-sparkline :data="data" @selected-point="onSelectedPoint"></stat-sparkline>
     </div>
     <div class="has-background-body-color is-top-left">
@@ -42,9 +42,11 @@ let mouseOver = $ref(false);
   color: var(--secondary-color);
 }
 
-.is-top-left {
-  position: absolute;
-  top: 0;
-  left: 0.75em;
+@media screen and (min-width: 768px) {
+  .is-top-left {
+    position: absolute;
+    top: 0;
+    left: 0.75em;
+  }
 }
 </style>
diff --git a/assets/components/MobileMenu.vue b/assets/components/MobileMenu.vue
index 8bc6c562..5abeb0d5 100644
--- a/assets/components/MobileMenu.vue
+++ b/assets/components/MobileMenu.vue
@@ -8,9 +8,6 @@
           </svg>
         </router-link>
       </div>
-      <div class="column ml-4 is-family-monospace is-ellipsis" v-if="$route.name == 'container-id'">
-        {{ allContainersById[route.params.id as string]?.name }}
-      </div>
 
       <div class="column is-narrow push-right">
         <a
@@ -93,7 +90,7 @@ const { base, secured } = config;
 import { sessionHost } from "@/composables/storage";
 const store = useContainerStore();
 const route = useRoute();
-const { visibleContainers, allContainersById } = storeToRefs(store);
+const { visibleContainers } = storeToRefs(store);
 
 let showNav = $ref(false);
 
diff --git a/assets/components/ScrollableView.vue b/assets/components/ScrollableView.vue
index 21c24843..0e7f6cc3 100644
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -82,6 +82,10 @@ section {
     background: var(--body-background-color);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     z-index: 1;
+
+    @media screen and (max-width: 768px) {
+      top: 70px;
+    }
   }
 
   &.is-full-height-scrollable {
@@ -162,3 +166,11 @@ section {
   }
 }
 </style>
+
+<style>
+@media screen and (max-width: 768px) {
+  .splitpanes__pane {
+    overflow: unset !important;
+  }
+}
+</style>