➕ Add Tile.vue

web/src/App.vue

@@ -6,7 +6,9 @@
       <div class="column is-one-fifth mx-2">
         <Panel />
       </div>
-      <div class="column mx-2"></div>
+      <div class="column mx-2">
+        <Tile />
+      </div>
     </div>
     <Footer />
   </div>
@@ -17,6 +19,7 @@ import { Options, Vue } from 'vue-class-component';
 import Navbar from '@/components/Navbar.vue';
 import Hero from '@/components/Hero.vue';
 import Panel from '@/components/Panel.vue';
+import Tile from '@/components/Tile.vue';
 import Footer from '@/components/Footer.vue';
 
 @Options({
@@ -24,6 +27,7 @@ import Footer from '@/components/Footer.vue';
     Navbar,
     Hero,
     Panel,
+    Tile,
     Footer,
   },
 })

web/src/components/Panel.vue

@@ -15,11 +15,6 @@
             Clear
           </button>
         </p>
-        <p class="control">
-          <button class="button is-danger is-outlined" v-on:click="resetSocket">
-            Close server socket
-          </button>
-        </p>
       </div>
     </div>
     <div v-if="hasClients">
@@ -43,6 +38,16 @@
     <div v-else>
       <span class="panel-block">No clients yet, try fetching!</span>
     </div>
+    <div class="panel-block">
+      <p class="control">
+        <button
+          class="button is-danger is-outlined is-fullwidth"
+          v-on:click="resetSocket"
+        >
+          Close server socket
+        </button>
+      </p>
+    </div>
   </nav>
 </template>
 

web/src/components/Tile.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="tile is-ancestor">
+    <div class="tile is-4 is-vertical is-parent">
+      <div class="tile is-child box">
+        <p class="title">One</p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare
+          magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa
+          sem. Etiam finibus odio quis feugiat facilisis.
+        </p>
+      </div>
+      <div class="tile is-child box">
+        <p class="title">Two</p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare
+          magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa
+          sem. Etiam finibus odio quis feugiat facilisis.
+        </p>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <div class="tile is-child box">
+        <p class="title">Three</p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
+          diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
+          tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo
+          sit amet vehicula eleifend, nunc dui porta orci, quis semper odio
+          felis ut quam.
+        </p>
+        <p>
+          Suspendisse varius ligula in molestie lacinia. Maecenas varius eget
+          ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus,
+          augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.
+          Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit
+          amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget
+          varius ligula, at volutpat tortor.
+        </p>
+        <p>
+          Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus
+          erat, vitae congue lectus dolor consequat libero. Donec leo ligula,
+          maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc
+          ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non
+          semper leo.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-class-component';
+
+export default class Tile extends Vue {}
+</script>