From 2bb638c2a329da879d2aad5b193ba661a050575d Mon Sep 17 00:00:00 2001
From: Haris Razis <dev@xrazis.com>
Date: Mon, 23 Nov 2020 10:04:42 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9E=95=20Add=20Tile.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.vue              |  6 +++-
 web/src/components/Panel.vue | 15 ++++++----
 web/src/components/Tile.vue  | 55 ++++++++++++++++++++++++++++++++++++
 3 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 web/src/components/Tile.vue

diff --git a/web/src/App.vue b/web/src/App.vue
index 123db15..f12c016 100644
--- a/web/src/App.vue
+++ b/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,
   },
 })
diff --git a/web/src/components/Panel.vue b/web/src/components/Panel.vue
index 019ba6f..443d482 100644
--- a/web/src/components/Panel.vue
+++ b/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>
 
diff --git a/web/src/components/Tile.vue b/web/src/components/Tile.vue
new file mode 100644
index 0000000..0543180
--- /dev/null
+++ b/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>