Mobile view and clean up

assets/components/ContainerStat.vue

@@ -1,10 +1,19 @@
 <template>
-  <div class="has-text-weight-light is-size-7 is-uppercase columns is-marginless is-mobile">
-    <div class="column is-narrow">
+  <div class="is-size-7 is-uppercase columns is-marginless is-mobile">
+    <div class="column is-narrow has-text-weight-bold">
       {{ state }}
     </div>
-    <div class="column is-narrow" v-if="stat.memoryUsage !== null">mem {{ formatBytes(stat.memoryUsage) }}</div>
-    <div class="column is-narrow" v-if="stat.cpu !== null">load {{ stat.cpu }}%</div>
+    <div class="column is-narrow" v-if="stat.memoryUsage !== null">
+      <span class="has-text-weight-light">mem</span>
+      <span class="has-text-weight-bold">
+        {{ formatBytes(stat.memoryUsage) }}
+      </span>
+    </div>
+
+    <div class="column is-narrow" v-if="stat.cpu !== null">
+      <span class="has-text-weight-light">load</span>
+      <span class="has-text-weight-bold"> {{ stat.cpu }}% </span>
+    </div>
   </div>
 </template>
 
@@ -28,8 +37,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.column {
-  padding-top: 0;
-}
-</style>
+<style lang="scss" scoped></style>

assets/components/ContainerTitle.vue

@@ -1,9 +1,6 @@
 <template>
-  <div class="name columns is-marginless">
+  <div class="columns is-marginless has-text-weight-bold is-family-monospace">
     <span class="column">{{ value }}</span>
-    <span class="column is-narrow" v-if="closable">
-      <button class="delete is-medium" @click="$emit('close')"></button>
-    </span>
   </div>
 </template>
 
@@ -11,31 +8,9 @@
 export default {
   props: {
     value: String,
-    closable: {
-      type: Boolean,
-      default: false,
-    },
   },
   name: "ContainerTitle",
 };
 </script>
 
-<style lang="scss" scoped>
-.name {
-  font-weight: bold;
-  font-family: monospace;
-
-  button.delete {
-    background-color: var(--scheme-main-ter);
-    opacity: 0.6;
-    &:after,
-    &:before {
-      background-color: var(--text-color);
-    }
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>

assets/components/LogContainer.vue

@@ -1,8 +1,17 @@
 <template>
   <scrollable-view :scrollable="scrollable" v-if="container">
     <template v-slot:header v-if="showTitle">
-      <container-title :value="container.name" :closable="closable" @close="$emit('close')"></container-title>
-      <container-stat :stat="container.stat" :state="container.state"></container-stat>
+      <div class="columns is-vcentered">
+        <div class="column is-narrow">
+          <container-title :value="container.name" @close="$emit('close')"></container-title>
+        </div>
+        <div class="column">
+          <container-stat :stat="container.stat" :state="container.state"></container-stat>
+        </div>
+        <div class="column is-narrow mr-4" v-if="closable">
+          <button class="delete is-medium" @click="$emit('close')"></button>
+        </div>
+      </div>
     </template>
     <template v-slot="{ setLoading }">
       <log-viewer-with-source :id="id" @loading-more="setLoading($event)"></log-viewer-with-source>
@@ -51,3 +60,17 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+button.delete {
+  background-color: var(--scheme-main-ter);
+  opacity: 0.6;
+  &:after,
+  &:before {
+    background-color: var(--text-color);
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+</style>

assets/components/MobileMenu.vue

@@ -8,11 +8,19 @@
     >
       <span></span> <span></span> <span></span>
     </a>
-    <router-link :to="{ name: 'default' }">
-      <svg class="logo">
-        <use href="#logo"></use>
-      </svg>
-    </router-link>
+    <div class="columns is-marginless is-gapless is-mobile is-vcentered">
+      <div class="column is-narrow">
+        <router-link :to="{ name: 'default' }">
+          <svg class="logo">
+            <use href="#logo"></use>
+          </svg>
+        </router-link>
+      </div>
+      <div class="column ml-4 is-family-monospace" v-if="$route.name == 'container'">
+        {{ allContainersById[$route.params.id].name }}
+      </div>
+    </div>
+
     <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">Containers</p>
     <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
       <li v-for="item in visibleContainers" :key="item.id">
@@ -42,7 +50,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["visibleContainers"]),
+    ...mapGetters(["visibleContainers", "allContainersById"]),
   },
   watch: {
     $route(to, from) {

assets/pages/Index.vue

@@ -3,13 +3,11 @@
     <section class="hero is-small mt-4">
       <div class="hero-body">
         <div class="container">
-          <h1 class="title">
-            Hello, there!
-          </h1>
+          <h1 class="title">Hello, there!</h1>
         </div>
       </div>
     </section>
-    <section class="level section">
+    <section class="level section is-mobile">
       <div class="level-item has-text-centered">
         <div>
           <p class="title">{{ containers.length }}</p>
@@ -33,9 +31,7 @@
     <section class="columns is-centered section">
       <div class="column is-4">
         <div class="panel">
-          <p class="panel-heading">
-            Containers
-          </p>
+          <p class="panel-heading">Containers</p>
           <div class="panel-block">
             <p class="control has-icons-left">
               <input