Simplify service structure

docs/configuration.md

@@ -13,7 +13,7 @@ Title, icons, links, colors, and services can be configured in the `config.yml`
 
 title: "App dashboard"
 subtitle: "Homer"
-logo: "assets/homer.png"
+logo: "assets/logo.png"
 # Alternatively a fa icon can be provided:
 # icon: "fas fa-skull-crossbones"
 

public/assets/custom.css.sample

@@ -2,8 +2,7 @@
 
 /* Custom card colors */
 /* Use with `class:` property of services in config.yml */
-body #app .card .green
+body #app .card.green {
-{
   background-color: #006600;
   color: #00ff00;
 }

src/App.vue

@@ -161,7 +161,7 @@ export default {
     this.services = this.config.services;
     document.title = `${this.config.title} | ${this.config.subtitle}`;
     if (this.config.stylesheet) {
-      let stylesheet = '';
+      let stylesheet = "";
       for (const file of this.config.stylesheet) {
         stylesheet += `@import "${file}";`;
       }
@@ -242,8 +242,8 @@ export default {
         },
       };
     },
-    createStylesheet: function(css) {
+    createStylesheet: function (css) {
-      let style = document.createElement('style');
+      let style = document.createElement("style");
       style.appendChild(document.createTextNode(css));
       document.head.appendChild(style);
     },

src/components/Service.vue

@@ -1,11 +1,8 @@
 <template>
   <div>
-    <div class="card">
+    <div class="card" :class="item.class">
       <a :href="item.url" :target="item.target" rel="noreferrer">
-        <div
+        <div class="card-content">
-          class="card-content"
-          :class="item.class"
-        >
           <div class="media">
             <div v-if="item.logo" class="media-left">
               <figure class="image is-48x48">
@@ -18,14 +15,8 @@
               </figure>
             </div>
             <div class="media-content">
-              <p
+              <p class="title is-4">{{ item.name }}</p>
-                class="title is-4"
+              <p class="subtitle is-6">{{ item.subtitle }}</p>
-                :class="item.class"
-              >{{ item.name }}</p>
-              <p
-                class="subtitle is-6"
-                :class="item.class"
-              >{{ item.subtitle }}</p>
             </div>
           </div>
           <div class="tag" :class="item.tagstyle" v-if="item.tag">