Adds more styles

amir20 · amir20 · commit 0595fdd0ce84 · 2018-10-30T16:38:59.000-07:00
diff --git a/assets/App.vue b/assets/App.vue
@@ -1,10 +1,5 @@
 <template lang="html">
-  <div class="content">
-    <p>
-      <router-link to="/">Go back</router-link>      
-    </p>
-    <router-view></router-view>
-  </div>
+   <router-view></router-view>
 </template>
 
 <script>
@@ -14,4 +9,7 @@ export default {
 </script>
 
 <style lang="css">
+.section.is-fullwidth {
+  padding: 0 !important;
+}
 </style>
diff --git a/assets/index.html b/assets/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html>
-
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" integrity="sha256-dMQYvN6BU9M4mHK94P22cZ4dPGTSGOVP41yVXvXatws=" crossorigin="anonymous" />
-</head>
-
-<body>
-  <div id="app"></div>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <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>
-</body>
+  </body>
 </html>
diff --git a/assets/pages/Index.vue b/assets/pages/Index.vue
@@ -1,18 +1,22 @@
 <template lang="html">
-  <div>
-    <ul>
+  <div class="container">
+    <div class="content">
+      <section class="section">
+        <ul class="is-marginless is-paddless">
       <li v-for="item in containers" class="columns unstyled box">
-        <div class="column is-6">
+        <div class="column is-4">
           <router-link :to="{name: 'container', params: {id: item.Id}}">{{ item.Names[0] }}</router-link>
         </div>
         <div class="column is-4">
           <code>{{ item.Image }}</code>
         </div>
-        <div class="column is-2">
-          {{ item.Status}}
+        <div class="column is-4">
+          <span class="subtitle is-7">{{ item.Status}}</span>
         </div>
       </li>
     </ul>
+      </section>
+    </div>
   </div>
 </template>
 
