aboutsummaryrefslogtreecommitdiffhomepage
path: root/index.html
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2018-11-12 21:14:38 -0800
committerBastien Wirtz <bastien.wirtz@gmail.com>2018-11-12 21:30:24 -0800
commite41196e76e6b184fc918fb44adc9af0ff3fdae30 (patch)
tree58e759b9b8940d195ed666749e2cd0946e2abb86 /index.html
parent9ca12a40f404ba15d67068087dc521be7d69eefb (diff)
downloadhomer-e41196e76e6b184fc918fb44adc9af0ff3fdae30.tar.gz
homer-e41196e76e6b184fc918fb44adc9af0ff3fdae30.tar.zst
homer-e41196e76e6b184fc918fb44adc9af0ff3fdae30.zip
Deps update & minor UI adjustments
Diffstat (limited to 'index.html')
-rw-r--r--index.html165
1 files changed, 90 insertions, 75 deletions
diff --git a/index.html b/index.html
index 9e946bf..24adcd4 100644
--- a/index.html
+++ b/index.html
@@ -1,107 +1,122 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<html> 2<html>
3
3<head> 4<head>
4 <meta charset="utf-8"> 5 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <meta name="robots" content="noindex"> 7 <meta name="robots" content="noindex">
7 <link rel="icon" type="image/png" href="assets/favicon.png"> 8 <link rel="icon" type="image/png" href="assets/favicon.png">
8 <title>Homer</title> 9 <title>Homer</title>
9 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 10 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"> 11 crossorigin="anonymous">
12 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
11 <link href="https://fonts.googleapis.com/css?family=Lato|Raleway" rel="stylesheet"> 13 <link href="https://fonts.googleapis.com/css?family=Lato|Raleway" rel="stylesheet">
12 <link rel="stylesheet" href="app.css"> 14 <link rel="stylesheet" href="app.css">
13</head> 15</head>
16
14<body> 17<body>
15<div id="app" v-if="config"> 18 <div id="app" v-if="config">
16 <div id="bighead"> 19 <div id="bighead">
17 <section class="first-line"> 20 <section class="first-line">
18 <div class="container">
19 <img v-if="config.logo" :src="config.logo" />
20 <div class="dashboard-title">
21 <span v-cloak class="headline">{{ config.subtitle }}</span>
22 <h1 v-cloak>{{ config.title }}</h1>
23 </div>
24 </div>
25 </section>
26 <div v-if="config.links" class="container-fluid">
27 <nav class="navbar" role="navigation" aria-label="main navigation">
28 <div class="container"> 21 <div class="container">
29 <div class="navbar-menu"> 22 <div class="logo">
30 <div class="navbar-start"> 23 <img v-if="config.logo" :src="config.logo" />
31 <a v-for="link in config.links" class="navbar-item" :href="link.url"> 24 <i v-if="config.icon" :class="config.icon"></i>
32 <i v-if="link.icon" style="margin-right: 6px;" class="fa" :class="link.icon"></i> 25 </div>
33 {{ link.name }} 26 <div class="dashboard-title">
34 </a> 27 <span v-cloak class="headline">{{ config.subtitle }}</span>
35 </div> 28 <h1 v-cloak>{{ config.title }}</h1>
36 <div class="end"> 29 </div>
37 <div class="search-bar"> 30 </div>
38 <label for="search" class="search-label"></label> 31 </section>
39 <input type="text" id="search" v-model="filter"/> 32 <div v-if="config.links" class="container-fluid">
33 <nav class="navbar" role="navigation" aria-label="main navigation">
34 <div class="container">
35 <div class="navbar-menu">
36 <div class="navbar-start">
37 <a v-for="link in config.links" class="navbar-item" :href="link.url">
38 <i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i>
39 {{ link.name }}
40 </a>
41 </div>
42 <div class="end">
43 <div class="search-bar">
44 <label for="search" class="search-label"></label>
45 <input type="text" id="search" v-model="filter" />
46 </div>
40 </div> 47 </div>
41 </div> 48 </div>
42 </div> 49 </div>
43 </div> 50 </nav>
44 </nav> 51 </div>
45 </div> 52 </div>
46 </div>
47 53
48 <section id="main-section" class="section"> 54 <section id="main-section" class="section">
49 <div class="container"> 55 <div class="container">
50 <!-- Optional messages --> 56 <!-- Optional messages -->
51 <article v-cloak v-if="config && config.message" class="message" :class="config.message.style"> 57 <article v-cloak v-if="config && config.message" class="message" :class="config.message.style">
52 <div v-if="config.message.title" class="message-header"> 58 <div v-if="config.message.title" class="message-header">
53 <p>{{ config.message.title }}</p> 59 <p>{{ config.message.title }}</p>
54 </div> 60 </div>
55 <div v-if="config.message.content" class="message-body"> 61 <div v-if="config.message.content" class="message-body">
56 {{ config.message.content }} 62 {{ config.message.content }}
57 </div> 63 </div>
58 </article> 64 </article>
59 65
60 <h2 v-cloak v-if="filter"><i class="fa fa-search"></i> Search</h2> 66 <h2 v-cloak v-if="filter"><i class="fas fa-search"></i> Search</h2>
61 67
62 <div v-for="(group, index) in config.services"> 68 <div v-for="(group, index) in config.services">
63 <h2 v-if="!filter && group.name"><i v-if="group.icon" class="fa" :class="group.icon"></i><span v-else>#</span> {{ group.name }}</h2> 69 <h2 v-if="!filter && group.name"><i v-if="group.icon" :class="group.icon"></i><span v-else>#</span>
64 <div v-for="items in group.rows"> 70 {{ group.name }}</h2>
65 <div class="columns"> 71 <div v-for="items in group.rows">
66 <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"> 72 <div class="columns">
67 <div> 73 <div v-for="item in items" v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))"
68 <div v-if='item' class="card"> 74 class="column">
69 <a :href="item.url"> 75 <div>
70 <div class="card-content"> 76 <div v-if='item' class="card">
71 <div class="media"> 77 <a :href="item.url">
72 <div v-if="item.logo" class="media-left"> 78 <div class="card-content">
73 <figure class="image is-48x48"> 79 <div class="media">
74 <img :src="item.logo" /> 80 <div v-if="item.logo" class="media-left">
75 </figure> 81 <figure class="image is-48x48">
76 </div> 82 <img :src="item.logo" />
77 <div class="media-content"> 83 </figure>
78 <p class="title is-4">{{ item.name }}</p> 84 </div>
79 <p class="subtitle is-6">{{ item.subtitle }}</p> 85 <div v-if="item.icon" class="media-left">
86 <figure class="image is-48x48">
87 <i style="font-size: 35px" :class="item.icon"></i>
88 </figure>
89 </div>
90 <div class="media-content">
91 <p class="title is-4">{{ item.name }}</p>
92 <p class="subtitle is-6">{{ item.subtitle }}</p>
93 </div>
80 </div> 94 </div>
95 <strong v-if="item.tag" class="tag">#{{ item.tag }}</strong>
81 </div> 96 </div>
82 <strong v-if="item.tag" class="tag">#{{ item.tag }}</strong> 97 </a>
83 </div> 98 </div>
84 </a>
85 </div> 99 </div>
86 </div> 100 </div>
87 </div> 101 </div>
88 </div> 102 </div>
89 </div> 103 </div>
90 </div> 104 </div>
91 </div> 105 </section>
92 </section> 106 </div>
93</div>
94 107
95<footer class="footer"> 108 <footer class="footer">
96 <div class="container"> 109 <div class="container">
97 <div class="content has-text-centered"> 110 <div class="content has-text-centered">
98 <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> 111 <p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a>
112 & <a href="#">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>
113 </div>
99 </div> 114 </div>
100 </div> 115 </footer>
101</footer>
102 116
103<script src="https://unpkg.com/vue"></script> 117 <script src="https://unpkg.com/vue"></script>
104<script src="vendors/js-yaml.min.js"></script> 118 <script src="vendors/js-yaml.min.js"></script>
105<script src="app.js"></script> 119 <script src="app.js"></script>
106</body> 120</body>
107</html> \ No newline at end of file 121
122</html>