Deps update & minor UI adjustments

README.md

@@ -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: "#"

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 {
+    body h2 .fas, body h2 .fab, body h2 .far {
-      margin-right: 10px;
+      margin-right: 10px; }
-      color: #4285f4; }
     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 {
+      body #bighead .first-line .logo {
-        float: left;
+        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;
+          max-width: 70px; }
-        padding: 10px; }
     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 */

app.js

@@ -8,7 +8,6 @@ var app = new Vue({
         let that = this;
 
         return getConfig().then(function (config) {
-            console.log(config);
             const size = 3;
             config.services.forEach(function (service) {
                 service.rows = [];

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;
+        i {
+          vertical-align: top;
+          padding: 8px 15px;
+          font-size: 50px
+        }
+
+        img {
+          padding: 10px;
           max-height: 70px;
           max-width: 70px;
-        padding: 10px;
+        }
       }
     }
     .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 {

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"

index.html

@@ -1,22 +1,28 @@
 <!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://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
+    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">
+          <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>
@@ -29,7 +35,7 @@
             <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>
+                  <i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i>
                   {{ link.name }}
                 </a>
               </div>
@@ -57,13 +63,15 @@
           </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>
+          <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 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">
@@ -74,6 +82,11 @@
                               <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>
@@ -95,7 +108,8 @@
   <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>
+        <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>
   </footer>
@@ -104,4 +118,5 @@
   <script src="vendors/js-yaml.min.js"></script>
   <script src="app.js"></script>
 </body>
+
 </html>