From: Bastien Wirtz Date: Tue, 13 Nov 2018 05:14:38 +0000 (-0800) Subject: Deps update & minor UI adjustments X-Git-Tag: v1.0~25 X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=e41196e76e6b184fc918fb44adc9af0ff3fdae30;p=github%2Fbastienwirtz%2Fhomer.git Deps update & minor UI adjustments --- 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 @@ + Homer - - + + + -
-
-
-
- -
- {{ config.subtitle }} -

{{ config.title }}

-
-
-
-
- + +
-
-
-
- -
-
-

{{ config.message.title }}

-
-
- {{ config.message.content }} -
-
+
+
+ +
+
+

{{ config.message.title }}

+
+
+ {{ config.message.content }} +
+
-

Search

+

Search

-
-
+
+ - + - - - + + + - \ No newline at end of file + +