Deps update & minor UI adjustments

6 files changed, 151 insertions, 111 deletions

diff --git a/README.md b/README.md
index 709423f..40dcdd3 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ If you need authentication support, you're on your own (it can be secured using
 
 **How to build / install it? Where is the webpack config?**
 There is no build system (😱), use it like that! It'meant to be stupid simple & zero maintenance required. just copy the static files somewhere, and visit the `index.html`.
- 
+
 
 ## configuration
 
@@ -18,11 +18,13 @@ Title, icons, links, colors, and services can be configured in the `config.yml`
 ```yaml
 ---
 # Homepage configuration
-# See https://fontawesome.com/v4.7.0/icons/ for icons options
+# See https://fontawesome.com/icons for icons options
 
 title: "Simple homepage"
 subtitle: "Homer"
 logo: "assets/homer.png"
+# Alternatively a fa icon can be provided:
+# icon: "fas fa-skull-crossbones"
 
 # Optional message
 message:
@@ -48,6 +50,8 @@ services:
     items:
       - name: "Jenkins"
         logo: "/assets/tools/jenkins.png"
+        # Alternatively a fa icon can be provided:
+        # icon: "fab fa-jenkins"
         subtitle: "Continuous integration server"
         tag: "CI"
         url: "#"
@@ -79,4 +83,4 @@ services:
         tag: "CI"
         url: "#"
 
-```
\ No newline at end of file
+```
diff --git a/app.css b/app.css
index 7a4c255..98574af 100644
--- a/app.css
+++ b/app.css
@@ -1,3 +1,6 @@
+html {
+  height: 100%; }
+
 body {
   font-family: 'Raleway', sans-serif;
   background-color: #F5F5F5;
@@ -10,9 +13,8 @@ body {
     font-size: 1.7rem;
     margin-top: 3rem;
     margin-bottom: 1rem; }
-    body h2 .fa {
-      margin-right: 10px;
-      color: #4285f4; }
+    body h2 .fas, body h2 .fab, body h2 .far {
+      margin-right: 10px; }
     body h2 span {
       font-weight: bold;
       color: #4285f4; }
@@ -35,15 +37,20 @@ body {
       body #bighead .first-line .container {
         height: 80px;
         padding: 10px 0; }
-      body #bighead .first-line img {
-        float: left;
-        max-height: 70px;
-        max-width: 70px;
-        padding: 10px; }
+      body #bighead .first-line .logo {
+        float: left; }
+        body #bighead .first-line .logo i {
+          vertical-align: top;
+          padding: 8px 15px;
+          font-size: 50px; }
+        body #bighead .first-line .logo img {
+          padding: 10px;
+          max-height: 70px;
+          max-width: 70px; }
     body #bighead .navbar {
       background-color: #4285f4; }
       body #bighead .navbar a {
-        color: #152138; }
+        color: #ffffff; }
         body #bighead .navbar a:hover {
           background-color: #5a95f5; }
   body #main-section {
@@ -55,7 +62,10 @@ body {
     body #main-section .title {
       font-size: 1.1em; }
     body #main-section .subtitle {
-      font-size: .9em; }
+      font-size: .9em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis; }
     body #main-section .column {
       padding: 1.2rem .75rem; }
     body #main-section .message {
@@ -90,7 +100,8 @@ body {
       color: #ffffff;
       padding: 0 0.75em; }
   body .card-content {
-    height: 110px; }
+    height: 85px;
+    padding: 1.3rem; }
   body .footer {
     position: fixed;
     left: 0;
@@ -126,5 +137,3 @@ body {
       height: 20px; }
     body .search-bar:focus-within .search-label::before {
       color: #4a4a4a; }
-
-/*# sourceMappingURL=app.css.map */
diff --git a/app.js b/app.js
index ffb5007..fda16b2 100644
--- a/app.js
+++ b/app.js
@@ -4,13 +4,12 @@ var app = new Vue({
         config: null,
         filter: ''
     },
-    beforeCreate () {
+    beforeCreate() {
         let that = this;
 
         return getConfig().then(function (config) {
-            console.log(config);
             const size = 3;
-            config.services.forEach(function(service) {
+            config.services.forEach(function (service) {
                 service.rows = [];
                 items = service.items;
                 while (items.length) {
@@ -18,7 +17,7 @@ var app = new Vue({
                 }
 
                 if (service.rows.length) {
-                    let last = service.rows.length-1;
+                    let last = service.rows.length - 1;
                     service.rows[last] = service.rows[last].concat(Array(size - service.rows[last].length));
                 }
             });
@@ -31,13 +30,13 @@ var app = new Vue({
 
 
 function getConfig() {
-    return fetch('config.yml').then(function(response) {
+    return fetch('config.yml').then(function (response) {
         if (response.status !== 200) {
             return;
         }
 
-        return response.text().then(function(body){
+        return response.text().then(function (body) {
             return jsyaml.load(body);
         });
     });
-}
\ No newline at end of file
+}
diff --git a/app.scss b/app.scss
index 6391c2d..e420c0e 100644
--- a/app.scss
+++ b/app.scss
@@ -1,6 +1,8 @@
 $primary-color: #3367d6;
 $secondary-color: #4285f4;
 
+html { height: 100%; }
+
 body {
   font-family: 'Raleway', sans-serif;
   background-color: #F5F5F5;
@@ -19,9 +21,8 @@ body {
     margin-top: 3rem;
     margin-bottom: 1rem;
 
-    .fa {
+    .fas, .fab, .far {
       margin-right: 10px;
-      color: $secondary-color;
     }
 
     span {
@@ -61,19 +62,26 @@ body {
         padding: 10px 0;
       }
 
-      img {
+      .logo {
         float: left;
-        max-height: 70px;
-        max-width: 70px;
-        padding: 10px;
+        i {
+          vertical-align: top;
+          padding: 8px 15px;
+          font-size: 50px
+        }
+
+        img {
+          padding: 10px;
+          max-height: 70px;
+          max-width: 70px;
+        }
       }
     }
     .navbar {
       background-color: $secondary-color;
 
       a {
-        color: #152138;
-
+        color: #ffffff;
         &:hover {
           background-color: lighten( $secondary-color, 5% );
         }
@@ -96,6 +104,9 @@ body {
 
     .subtitle {
       font-size: .9em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .column {
@@ -151,7 +162,8 @@ body {
   }
 
   .card-content {
-    height: 110px;
+    height: 85px;
+    padding: 1.3rem;
   }
 
   .footer {
diff --git a/config.yml b/config.yml
index 09dd14e..3b0dec5 100644
--- a/config.yml
+++ b/config.yml
@@ -5,6 +5,7 @@
 title: "Simple homepage"
 subtitle: "Homer"
 logo: "assets/homer.png"
+icon: "fas fa-skull-crossbones"
 
 # Optional message
 # See https://bulma.io/documentation/components/message/#colors for styling options.
@@ -16,10 +17,10 @@ message:
 # Optional navbar
 links:
   - name: "ansible"
-    icon: "fa-github"
+    icon: "fab fa-github"
     url: "https://github.com/xxxxx/ansible/"
   - name: "Wiki"
-    icon: "fa-book"
+    icon: "fas fa-book"
     url: "https://wiki.xxxxxx.com/"
 
 # Services
@@ -27,7 +28,7 @@ links:
 # Leave only a "items" key if not using group (group name & icon are optional, section separation will not be displayed).
 services:
   - name: "DevOps"
-    icon: "fa-code-fork"
+    icon: "fas fa-code-branch"
     items:
       - name: "Jenkins"
         logo: "/assets/tools/jenkins.png"
@@ -40,7 +41,7 @@ services:
         tag: "haproxy"
         url: "#"
   - name: "Monitoring"
-    icon: "fa-heartbeat"
+    icon: "fas fa-heartbeat"
     items:
       - name: "M/Monit"
         logo: "/assets/tools/monit.png"
diff --git a/index.html b/index.html
index 9e946bf..24adcd4 100644
--- a/index.html
+++ b/index.html
@@ -1,107 +1,122 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="robots" content="noindex">
   <link rel="icon" type="image/png" href="assets/favicon.png">
   <title>Homer</title>
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
+    crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
   <link href="https://fonts.googleapis.com/css?family=Lato|Raleway" rel="stylesheet">
   <link rel="stylesheet" href="app.css">
 </head>
+
 <body>
-<div id="app" v-if="config">
-  <div id="bighead">
-    <section class="first-line">
-      <div class="container">
-        <img v-if="config.logo" :src="config.logo" />
-        <div class="dashboard-title">
-          <span v-cloak class="headline">{{ config.subtitle }}</span>
-          <h1 v-cloak>{{ config.title }}</h1>
-        </div>
-      </div>
-    </section>
-    <div v-if="config.links" class="container-fluid">
-      <nav class="navbar" role="navigation" aria-label="main navigation">
+  <div id="app" v-if="config">
+    <div id="bighead">
+      <section class="first-line">
         <div class="container">
-          <div class="navbar-menu">
-            <div class="navbar-start">
-              <a v-for="link in config.links" class="navbar-item" :href="link.url">
-                <i v-if="link.icon" style="margin-right: 6px;" class="fa" :class="link.icon"></i>
-                {{ link.name }}
-              </a>
-            </div>
-            <div class="end">
-              <div class="search-bar">
-                <label for="search" class="search-label"></label>
-                <input type="text" id="search" v-model="filter"/>
+          <div class="logo">
+            <img v-if="config.logo" :src="config.logo" />
+            <i v-if="config.icon" :class="config.icon"></i>
+          </div>
+          <div class="dashboard-title">
+            <span v-cloak class="headline">{{ config.subtitle }}</span>
+            <h1 v-cloak>{{ config.title }}</h1>
+          </div>
+        </div>
+      </section>
+      <div v-if="config.links" class="container-fluid">
+        <nav class="navbar" role="navigation" aria-label="main navigation">
+          <div class="container">
+            <div class="navbar-menu">
+              <div class="navbar-start">
+                <a v-for="link in config.links" class="navbar-item" :href="link.url">
+                  <i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i>
+                  {{ link.name }}
+                </a>
+              </div>
+              <div class="end">
+                <div class="search-bar">
+                  <label for="search" class="search-label"></label>
+                  <input type="text" id="search" v-model="filter" />
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </nav>
+        </nav>
+      </div>
     </div>
-  </div>
 
-  <section id="main-section" class="section">
-    <div class="container">
-      <!-- Optional messages -->
-      <article v-cloak v-if="config && config.message" class="message" :class="config.message.style">
-        <div v-if="config.message.title" class="message-header">
-          <p>{{ config.message.title }}</p>
-        </div>
-        <div v-if="config.message.content" class="message-body">
-          {{ config.message.content }}
-        </div>
-      </article>
+    <section id="main-section" class="section">
+      <div class="container">
+        <!-- Optional messages -->
+        <article v-cloak v-if="config && config.message" class="message" :class="config.message.style">
+          <div v-if="config.message.title" class="message-header">
+            <p>{{ config.message.title }}</p>
+          </div>
+          <div v-if="config.message.content" class="message-body">
+            {{ config.message.content }}
+          </div>
+        </article>
 
-      <h2 v-cloak v-if="filter"><i class="fa fa-search"></i> Search</h2>
+        <h2 v-cloak v-if="filter"><i class="fas fa-search"></i> Search</h2>
 
-      <div v-for="(group, index) in config.services">
-        <h2 v-if="!filter && group.name"><i v-if="group.icon" class="fa" :class="group.icon"></i><span v-else>#</span> {{ group.name }}</h2>
-        <div v-for="items in group.rows">
-          <div class="columns">
-            <div v-for="item in items" v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))" class="column">
-              <div>
-                <div v-if='item' 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 class="media-content">
-                          <p class="title is-4">{{ item.name }}</p>
-                          <p class="subtitle is-6">{{ item.subtitle }}</p>
+        <div v-for="(group, index) in config.services">
+          <h2 v-if="!filter && group.name"><i v-if="group.icon" :class="group.icon"></i><span v-else>#</span>
+            {{ group.name }}</h2>
+          <div v-for="items in group.rows">
+            <div class="columns">
+              <div v-for="item in items" v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))"
+                class="column">
+                <div>
+                  <div v-if='item' 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 v-if="item.tag" class="tag">#{{ item.tag }}</strong>
                       </div>
-                      <strong v-if="item.tag" class="tag">#{{ item.tag }}</strong>
-                    </div>
-                  </a>
+                    </a>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </section>
-</div>
+    </section>
+  </div>
 
-<footer class="footer">
-  <div class="container">
-    <div class="content has-text-centered">
-      <p>Created with <span class="has-text-danger">❤️</span> with <a href="#">bulma</a>, <a href="#">vuejs</a> & <a href="#">font awesome</a>// Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fa fa-github-alt"></i></a>.</p>
+  <footer class="footer">
+    <div class="container">
+      <div class="content has-text-centered">
+        <p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a>
+          & <a href="#">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>
+      </div>
     </div>
-  </div>
-</footer>
+  </footer>
 
-<script src="https://unpkg.com/vue"></script>
-<script src="vendors/js-yaml.min.js"></script>
-<script src="app.js"></script>
+  <script src="https://unpkg.com/vue"></script>
+  <script src="vendors/js-yaml.min.js"></script>
+  <script src="app.js"></script>
 </body>
-</html>
\ No newline at end of file
+
+</html>