Fixes some spacing issues

amir20 · Oct 31, 2018 · ef78f94 · ef78f94
1 parent 1ed4dde
commit ef78f94
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 124 deletions.
diff --git a/assets/App.vue b/assets/App.vue
@@ -3,13 +3,13 @@
 </template>
 
 <script>
-    export default {
-        name: "App"
-    };
+export default {
+  name: "App"
+};
 </script>
 
 <style lang="css">
-    .section.is-fullwidth {
-        padding: 0 !important;
-    }
-</style>
+.section.is-fullwidth {
+  padding: 0 !important;
+}
+</style>
diff --git a/assets/index.html b/assets/index.html
@@ -1,16 +1,19 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Dozzle!</title>
+    <title>Dozzle</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
     <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
 </head>
+
 <body>
-<section class="section is-fullwidth">
-    <div id="app"></div>
-</section>
-<script src="/main.js"></script>
+    <section class="section is-fullwidth">
+        <div id="app"></div>
+    </section>
+    <script src="/main.js"></script>
 </body>
+
 </html>
diff --git a/assets/main.js b/assets/main.js
@@ -7,21 +7,21 @@ import Container from "./pages/Container.vue";
 Vue.use(VueRouter);
 
 const routes = [
-    {path: "/", component: Index},
-    {
-        path: "/container/:id",
-        component: Container,
-        name: "container",
-        props: true
-    }
+  { path: "/", component: Index },
+  {
+    path: "/container/:id",
+    component: Container,
+    name: "container",
+    props: true
+  }
 ];
 
 const router = new VueRouter({
-    mode: "history",
-    routes
+  mode: "history",
+  routes
 });
 
 new Vue({
-    router,
-    render: h => h(App)
+  router,
+  render: h => h(App)
 }).$mount("#app");
diff --git a/assets/pages/Container.vue b/assets/pages/Container.vue
@@ -3,68 +3,68 @@
 </template>
 
 <script>
-    import {  formatRelative } from 'date-fns'
-    let ws;
+import { formatRelative } from "date-fns";
+let ws;
 
-    const parseMessage = (data) => {
-        const date = new Date(data.substring(0, 30));
-        const dateRelative = formatRelative(date, new Date());
-        const message = data.substring(30);
-        return {
-            date,
-            dateRelative,
-            message
-        }
-    };
+const parseMessage = data => {
+  const date = new Date(data.substring(0, 30));
+  const dateRelative = formatRelative(date, new Date());
+  const message = data.substring(30);
+  return {
+    date,
+    dateRelative,
+    message
+  };
+};
 
-    export default {
-        props: ["id"],
-        name: "Container",
-        mounted() {
-            ws = new WebSocket(`ws://${window.location.host}/api/logs?id=${this.id}`);
-            ws.onopen = e => console.log("Connection opened.");
-            ws.onclose = e => console.log("Connection closed.");
-            ws.onerror = e => console.error("Connection error: " + e.data);
-            ws.onmessage = e => {
-                const data = parseMessage(e.data);
-                const parent = this.$refs.events;
-                const item = document.createElement("li");
-                item.className = "event";
+export default {
+  props: ["id"],
+  name: "Container",
+  mounted() {
+    ws = new WebSocket(`ws://${window.location.host}/api/logs?id=${this.id}`);
+    ws.onopen = e => console.log("Connection opened.");
+    ws.onclose = e => console.log("Connection closed.");
+    ws.onerror = e => console.error("Connection error: " + e.data);
+    ws.onmessage = e => {
+      const data = parseMessage(e.data);
+      const parent = this.$refs.events;
+      const item = document.createElement("li");
+      item.className = "event";
 
-                const date = document.createElement("span");
-                date.className = "date";
-                date.innerHTML = data.dateRelative;
-                item.appendChild(date);
+      const date = document.createElement("span");
+      date.className = "date";
+      date.innerHTML = data.dateRelative;
+      item.appendChild(date);
 
-                const message = document.createElement("span");
-                message.className = "text";
-                message.innerHTML = data.message;
-                item.appendChild(message);
+      const message = document.createElement("span");
+      message.className = "text";
+      message.innerHTML = data.message;
+      item.appendChild(message);
 
-                parent.appendChild(item);
+      parent.appendChild(item);
 
-                this.$nextTick(() => item.scrollIntoView());
-            };
-        }
+      this.$nextTick(() => item.scrollIntoView());
     };
+  }
+};
 </script>
 <style>
-    .events {
-        color: #ddd;
-        background-color: #111;
-        padding: 10px;
-    }
+.events {
+  color: #ddd;
+  background-color: #111;
+  padding: 10px;
+}
 
-    .event {
-        font-family: monaco, monospace;
-        font-size: 12px;
-        line-height: 16px;
-        padding: 0 15px 0 30px;
-        word-wrap: break-word;
-    }
+.event {
+  font-family: monaco, monospace;
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 15px 0 30px;
+  word-wrap: break-word;
+}
 
-    .date {
-        background-color: #262626;
-        color: #258CCD;
-    }
-</style>
+.date {
+  background-color: #262626;
+  color: #258ccd;
+}
+</style>
diff --git a/assets/pages/Index.vue b/assets/pages/Index.vue
@@ -1,56 +1,55 @@
 <template lang="html">
-    <div class="container">
-        <div class="content">
-            <section class="section">
-                <ul class="is-marginless is-paddless">
-                    <li v-for="item in containers" class=" unstyled box">
-                        <router-link :to="{name: 'container', params: {id: item.Id}}" class="columns">
-                            <div class="column">
-
-                                <h2 class="is-2">{{ item.Names[0] }}</h2>
-                                <span class="subtitle is-6 code">{{ item.Command}}</span>
-
-
-                            </div>
-                            <div class="column is-4">
-                                <span class="code">{{ item.Image }}</span>
-                            </div>
-                            <div class="column is-narrow">
-                                <span class="subtitle is-7">{{ item.Status}}</span>
-                            </div>
-                        </router-link>
-                    </li>
-                </ul>
-            </section>
-        </div>
+<div class="container">
+    <div class="content">
+        <section class="section">
+            <ul class="is-marginless is-paddless">
+                <li v-for="item in containers" class=" unstyled box">
+                    <router-link :to="{name: 'container', params: {id: item.Id}}" class="columns">
+                        <div class="column is-7">
+                            <h2 class="is-2 hide-overflow">{{ item.Names[0] }}</h2>
+                            <span class="subtitle is-6 code hide-overflow">{{ item.Command}}</span>
+                        </div>
+                        <div class="column is-4">
+                            <span class="code hide-overflow">{{ item.Image }}</span>
+                        </div>
+                        <div class="column is-narrow">
+                            <span class="subtitle is-7">{{ item.Status}}</span>
+                        </div>
+                    </router-link>
+                </li>
+            </ul>
+        </section>
     </div>
+</div>
 </template>
 
 <script>
-    export default {
-        name: "Index",
-        data() {
-            return {
-                containers: []
-            };
-        },
-        async created() {
-            this.containers = await (await fetch(`/api/containers.json`)).json();
-        }
+export default {
+  name: "Index",
+  data() {
+    return {
+      containers: []
     };
+  },
+  async created() {
+    this.containers = await (await fetch(`/api/containers.json`)).json();
+  }
+};
 </script>
 
 <style lang="css">
-    .code {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        background-color: #f5f5f5;
-        color: #ff3860;
-        font-size: .875em;
-        font-weight: 400;
-        padding: .25em .5em .25em;
-        display: block;
-        border-radius: 2px;
-    }
-</style>
+.hide-overflow {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.code {
+  background-color: #f5f5f5;
+  color: #ff3860;
+  font-size: 0.875em;
+  font-weight: 400;
+  padding: 0.25em 0.5em 0.25em;
+  display: block;
+  border-radius: 2px;
+}
+</style>