Vertical layout support

1 files changed, 29 insertions, 0 deletions

diff --git a/app.js b/app.js
index 6e20ea3..dc8b6cc 100644
--- a/app.js
+++ b/app.js
@@ -4,6 +4,7 @@ const app = new Vue({
         config: null,
         offline: false,
         filter: '',
+        vlayout: true
     },
     created: function () {
         let that = this;
@@ -46,6 +47,34 @@ const app = new Vue({
     }
 });
 
+Vue.component('service', {
+    props: ['item'],
+    template: `<div>
+    <div class="card">
+        <a :href="item.url">
+            <div class="card-content">
+                <div class="media">
+                    <div v-if="item.logo" class="media-left">
+                        <figure class="image is-48x48">
+                            <img :src="item.logo" />
+                        </figure>
+                    </div>
+                    <div v-if="item.icon" class="media-left">
+                        <figure class="image is-48x48">
+                            <i style="font-size: 35px" :class="item.icon"></i>
+                        </figure>
+                    </div>
+                    <div class="media-content">
+                        <p class="title is-4">{{ item.name }}</p>
+                        <p class="subtitle is-6">{{ item.subtitle }}</p>
+                    </div>
+                </div>
+                <strong class="tag" v-if="item.tag">#{{ item.tag }}</strong>
+            </div>
+        </a>
+    </div></div>`
+});
+
 if ('serviceWorker' in navigator) {
     window.addEventListener('load', function () {
         navigator.serviceWorker.register('/worker.js');