6 files changed, 140 insertions, 21 deletions

diff --git a/src/App.vue b/src/App.vue
index 17c3214..747d279 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,7 @@
   >
     <DynamicTheme :themes="config.colors" />
     <div id="bighead">
-      <section v-if="config.header" class="first-line">
+      <section v-if="config.header" class="first-line is-hidden-touch">
         <div v-cloak class="container">
           <div class="logo">
             <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
@@ -27,6 +27,8 @@
         :open="showMenu"
         :links="config.links"
         @navbar:toggle="showMenu = !showMenu"
+        :navigateToFirstService="navigateToFirstService"
+        :filterServices="filterServices"
       >
         <DarkMode @updated="isDark = $event" />
 
@@ -36,14 +38,6 @@
           icon="fa-list"
           iconAlt="fa-columns"
         />
-
-        <SearchInput
-          class="navbar-item is-inline-block-mobile"
-          @input="filterServices"
-          @search:focus="showMenu = true"
-          @search:open="navigateToFirstService"
-          @search:cancel="filterServices"
-        />
       </Navbar>
     </div>
 
@@ -68,7 +62,7 @@
                 v-for="item in group.items"
                 :key="item.name"
                 v-bind:item="item"
-                :class="['column', `is-${12 / config.columns}`]"
+                class="column is-half-tablet is-one-third-widescreen is-half-desktop"
               />
             </template>
           </div>
@@ -79,7 +73,7 @@
             class="columns is-multiline layout-vertical"
           >
             <div
-              :class="['column', `is-${12 / config.columns}`]"
+              class="column is-half-tablet is-one-third-widescreen is-half-desktop"
               v-for="group in services"
               :key="group.name"
             >
@@ -118,7 +112,6 @@ import Navbar from "./components/Navbar.vue";
 import ConnectivityChecker from "./components/ConnectivityChecker.vue";
 import Service from "./components/Service.vue";
 import Message from "./components/Message.vue";
-import SearchInput from "./components/SearchInput.vue";
 import SettingToggle from "./components/SettingToggle.vue";
 import DarkMode from "./components/DarkMode.vue";
 import DynamicTheme from "./components/DynamicTheme.vue";
@@ -132,7 +125,6 @@ export default {
     ConnectivityChecker,
     Service,
     Message,
-    SearchInput,
     SettingToggle,
     DarkMode,
     DynamicTheme,
@@ -143,7 +135,7 @@ export default {
       services: null,
       offline: false,
       filter: "",
-      vlayout: true,
+      vlayout: false,
       isDark: null,
       showMenu: false,
     };
diff --git a/src/assets/app.scss b/src/assets/app.scss
index ab067e6..2408d60 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -55,6 +55,23 @@ body {
       }
     }
 
+    .subcard {
+      background-color: var(--subcard-background);
+      color: var(--subcard-a);
+
+      a {
+        color: var(--subcard-a);
+        &:hover {
+          color: var(--subcard-a-hover);
+        }
+      }
+    }
+
+    a.card-arrow {
+      color: var(--subcard-a);
+      background-color: var(--subcard-background);
+    }
+
     .footer {
       background-color: var(--card-background);
       box-shadow: 0 2px 15px 0 var(--card-shadow);
@@ -214,8 +231,7 @@ body {
     }
   }
 
-  .card {
-    border-radius: 5px;
+  .card, .card-arrow {
     border: none;
     box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
     transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
@@ -225,6 +241,32 @@ body {
     }
   }
 
+  .card {
+    border-radius: 5px;
+  }
+
+  .card-arrow {
+    border-radius: 0px 5px 5px 0px;
+  }
+
+  .card-arrow.active {
+    border-radius: 0px 5px 0px 0px;
+    box-shadow: none;
+  }
+
+  .subcard {
+    border-radius: 0px 0px 5px 5px;
+    display: none;
+    list-style: disc inside;
+    padding: 0.8rem;
+  }
+  .subcard.active {
+    display: block;
+  }
+  .subcard a {
+    padding: 10px;
+  }
+
   .card:hover {
     transform: translate(0, -3px);
 
@@ -239,6 +281,14 @@ body {
     }
   }
 
+  .card-arrow {
+    height: 85px;
+    display: flex;
+    align-items: center;
+    float: right;
+    padding: 10px;
+  }
+
   .card-content {
     height: 85px;
     padding: 1.3rem;
@@ -259,10 +309,6 @@ body {
   }
 
   .footer {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
     padding: 0.5rem;
     text-align: left;
     color: #676767;
@@ -318,6 +364,16 @@ body {
     }
   }
 
+  .search-bar-mobile {
+    input {
+      margin-top: 10px;
+      margin-left: 10px;
+    }
+    .search-label::before {
+      top: 14px;
+    }
+  }
+
   .offline-message {
     text-align: center;
     margin: 35px 0;
diff --git a/src/assets/defaults.yml b/src/assets/defaults.yml
index 99f5ed5..eaa345c 100644
--- a/src/assets/defaults.yml
+++ b/src/assets/defaults.yml
@@ -18,11 +18,14 @@ colors:
     highlight-hover: "#5a95f5"
     background: "#f5f5f5"
     card-background: "#ffffff"
+    subcard-background: "#eeeeee"
     text: "#363636"
     text-header: "#ffffff"
     text-title: "#303030"
     text-subtitle: "#424242"
     card-shadow: rgba(0, 0, 0, 0.1)
+    subcard-a: "#363636"
+    subcard-a-hover: "#808080"
     link-hover: "#363636"
   dark:
     highlight-primary: "#3367d6"
@@ -30,11 +33,14 @@ colors:
     highlight-hover: "#5a95f5"
     background: "#131313"
     card-background: "#2b2b2b"
+    subcard-background: "#444444"
     text: "#eaeaea"
     text-header: "#ffffff"
     text-title: "#fafafa"
     text-subtitle: "#f5f5f5"
     card-shadow: rgba(0, 0, 0, 0.4)
+    subcard-a: "#ffdd57"
+    subcard-a-hover: "#eaeaea"
     link-hover: "#ffdd57"
 
 message: ~
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index d3ceaf8..fd57156 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -3,6 +3,12 @@
     <nav class="navbar" role="navigation" aria-label="main navigation">
       <div class="container">
         <div class="navbar-brand">
+          <SearchInput
+            class="search-bar search-bar-mobile is-hidden-desktop"
+            @input="filterServices"
+            @search:open="navigateToFirstService"
+            @search:cancel="filterServices"
+          />
           <a
             role="button"
             aria-label="menu"
@@ -36,6 +42,13 @@
           </div>
           <div class="navbar-end">
             <slot></slot>
+
+            <SearchInput
+              class="navbar-item is-inline-block-mobile is-hidden-touch"
+              @input="filterServices"
+              @search:open="navigateToFirstService"
+              @search:cancel="filterServices"
+            />
           </div>
         </div>
       </div>
@@ -44,14 +57,21 @@
 </template>
 
 <script>
+import SearchInput from "./SearchInput.vue";
+
 export default {
   name: "Navbar",
+  components: {
+    SearchInput,
+  },
   props: {
     open: {
       type: Boolean,
       default: false,
     },
     links: Array,
+    navigateToFirstService: { type: Function },
+    filterServices: { type: Function },
   },
   computed: {
     showMenu: function () {
diff --git a/src/components/Service.vue b/src/components/Service.vue
index a2448ca..80bf019 100644
--- a/src/components/Service.vue
+++ b/src/components/Service.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
     <div class="card">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
+      <a class="card-arrow" v-bind:class="subcardClass" v-on:click="subCardActive = !subCardActive" v-if="item.links && item.links.length > 0">
+        <i style="font-size: 20px" class="fa fa-arrow-circle-down" v-bind:class="arrowClass"></i>
+      </a>
+      <a style="background-color: gray" :href="item.url" :target="item.target" rel="noreferrer">
         <div class="card-content">
           <div class="media">
             <div v-if="item.logo" class="media-left">
@@ -24,16 +27,46 @@
           </div>
         </div>
       </a>
+      <ul class="subcard" v-bind:class="subcardClass">
+        <Subcard
+          v-for="link in item.links"
+          v-bind:link="link"
+          :key="link.url"
+        />
+      </ul>
     </div>
   </div>
 </template>
 
 <script>
+import Subcard from "./Subcard.vue";
+
 export default {
   name: "Service",
+  components: {
+    Subcard,
+  },
   props: {
     item: Object,
   },
+  data: function() {
+    return {
+      subCardActive: false,
+    }
+  },
+  computed: {
+    arrowClass: function() {
+      return {
+        "fa-arrow-circle-down": !this.subCardActive,
+        "fa-arrow-circle-up": this.subCardActive
+      }
+    },
+    subcardClass: function() {
+      return {
+        active: this.subCardActive
+      }
+    }
+  }
 };
 </script>
 
diff --git a/src/components/Subcard.vue b/src/components/Subcard.vue
new file mode 100644
index 0000000..808cd48
--- /dev/null
+++ b/src/components/Subcard.vue
@@ -0,0 +1,12 @@
+<template v-for="link in item.links">
+  <li><a :href="link.url">{{ link.name }}</a></li>
+</template>
+
+<script>
+export default {
+  name: "Subcard",
+  props: {
+    link: Object,
+  },
+};
+</script>