mirror of
https://github.com/bastienwirtz/homer.git
synced 2025-03-13 06:49:32 +01:00
Deps update & minor UI adjustments
This commit is contained in:
Bastien Wirtz
parent
9ca12a40f4
commit
e41196e76e
@ -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: "#"
|
||||
|
||||
35
app.css
35
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 */
|
||||
|
||||
11
app.js
11
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,12 +30,12 @@ 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);
|
||||
});
|
||||
});
|
||||
|
||||
30
app.scss
30
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 {
|
||||
|
||||
@ -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"
|
||||
|
||||
165
index.html
165
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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://unpkg.com/vue"></script>
|
||||
<script src="vendors/js-yaml.min.js"></script>
|
||||
<script src="app.js"></script>
|
||||
<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>
|
||||
</footer>
|
||||
|
||||
<script src="https://unpkg.com/vue"></script>
|
||||
<script src="vendors/js-yaml.min.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user