aboutsummaryrefslogtreecommitdiffhomepage
path: root/index.html
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2019-02-18 00:23:20 -0800
committerBastien Wirtz <bastien.wirtz@gmail.com>2019-02-18 00:23:20 -0800
commit9baec9aec294656fb632123906b4ac6a712267ba (patch)
tree0dff55723b3503bfc81f17bfe1d10a8f4298d56f /index.html
parente41196e76e6b184fc918fb44adc9af0ff3fdae30 (diff)
downloadhomer-9baec9aec294656fb632123906b4ac6a712267ba.tar.gz
homer-9baec9aec294656fb632123906b4ac6a712267ba.tar.zst
homer-9baec9aec294656fb632123906b4ac6a712267ba.zip
Add offline cache + improve layout
Diffstat (limited to 'index.html')
-rw-r--r--index.html103
1 files changed, 54 insertions, 49 deletions
diff --git a/index.html b/index.html
index 24adcd4..3b83c8e 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,8 @@
7 <meta name="robots" content="noindex"> 7 <meta name="robots" content="noindex">
8 <link rel="icon" type="image/png" href="assets/favicon.png"> 8 <link rel="icon" type="image/png" href="assets/favicon.png">
9 <title>Homer</title> 9 <title>Homer</title>
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://use.fontawesome.com/releases/v5.5.0/css/all.css"
11 crossorigin="anonymous"> 11 integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
12 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css"> 12 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
13 <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">
14 <link rel="stylesheet" href="app.css"> 14 <link rel="stylesheet" href="app.css">
@@ -18,18 +18,18 @@
18 <div id="app" v-if="config"> 18 <div id="app" v-if="config">
19 <div id="bighead"> 19 <div id="bighead">
20 <section class="first-line"> 20 <section class="first-line">
21 <div class="container"> 21 <div v-cloak class="container">
22 <div class="logo"> 22 <div class="logo">
23 <img v-if="config.logo" :src="config.logo" /> 23 <img v-if="config.logo" :src="config.logo" />
24 <i v-if="config.icon" :class="config.icon"></i> 24 <i v-if="config.icon" :class="config.icon"></i>
25 </div> 25 </div>
26 <div class="dashboard-title"> 26 <div class="dashboard-title">
27 <span v-cloak class="headline">{{ config.subtitle }}</span> 27 <span class="headline">{{ config.subtitle }}</span>
28 <h1 v-cloak>{{ config.title }}</h1> 28 <h1>{{ config.title }}</h1>
29 </div> 29 </div>
30 </div> 30 </div>
31 </section> 31 </section>
32 <div v-if="config.links" class="container-fluid"> 32 <div v-cloak v-if="config.links" class="container-fluid">
33 <nav class="navbar" role="navigation" aria-label="main navigation"> 33 <nav class="navbar" role="navigation" aria-label="main navigation">
34 <div class="container"> 34 <div class="container">
35 <div class="navbar-menu"> 35 <div class="navbar-menu">
@@ -52,50 +52,53 @@
52 </div> 52 </div>
53 53
54 <section id="main-section" class="section"> 54 <section id="main-section" class="section">
55 <div class="container"> 55 <div v-cloak class="container">
56 <!-- Optional messages --> 56 <div v-if="offline" class="offline-message">
57 <article v-cloak v-if="config && config.message" class="message" :class="config.message.style"> 57 <i class="far fa-dizzy"></i>
58 <div v-if="config.message.title" class="message-header"> 58 <h1>You're offline bro. <i class="fas fa-redo-alt" v-on:click="checkOffline()"></i></h1>
59 <p>{{ config.message.title }}</p> 59 </div>
60 </div> 60 <div v-else>
61 <div v-if="config.message.content" class="message-body"> 61 <!-- Optional messages -->
62 {{ config.message.content }} 62 <article v-if="config && config.message" class="message" :class="config.message.style">
63 </div> 63 <div v-if="config.message.title" class="message-header">
64 </article> 64 <p>{{ config.message.title }}</p>
65 </div>
66 <div v-if="config.message.content" class="message-body">
67 {{ config.message.content }}
68 </div>
69 </article>
65 70
66 <h2 v-cloak v-if="filter"><i class="fas fa-search"></i> Search</h2> 71 <h2 v-if="filter"><i class="fas fa-search"></i> Search</h2>
67 72
68 <div v-for="(group, index) in config.services"> 73 <div v-for="(group, index) in config.services">
69 <h2 v-if="!filter && group.name"><i v-if="group.icon" :class="group.icon"></i><span v-else>#</span> 74 <h2 v-if="!filter && group.name"><i v-if="group.icon" :class="group.icon"></i><span v-else>#</span>
70 {{ group.name }}</h2> 75 {{ group.name }}</h2>
71 <div v-for="items in group.rows"> 76 <div class="columns is-multiline">
72 <div class="columns"> 77 <div v-for="item in group.items"
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()))))" 78 v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))"
74 class="column"> 79 class="column is-one-third-widescreen">
75 <div> 80 <div v-if='item' class="card">
76 <div v-if='item' class="card"> 81 <a :href="item.url">
77 <a :href="item.url"> 82 <div class="card-content">
78 <div class="card-content"> 83 <div class="media">
79 <div class="media"> 84 <div v-if="item.logo" class="media-left">
80 <div v-if="item.logo" class="media-left"> 85 <figure class="image is-48x48">
81 <figure class="image is-48x48"> 86 <img :src="item.logo" />
82 <img :src="item.logo" /> 87 </figure>
83 </figure> 88 </div>
84 </div> 89 <div v-if="item.icon" class="media-left">
85 <div v-if="item.icon" class="media-left"> 90 <figure class="image is-48x48">
86 <figure class="image is-48x48"> 91 <i style="font-size: 35px" :class="item.icon"></i>
87 <i style="font-size: 35px" :class="item.icon"></i> 92 </figure>
88 </figure> 93 </div>
89 </div> 94 <div class="media-content">
90 <div class="media-content"> 95 <p class="title is-4">{{ item.name }}</p>
91 <p class="title is-4">{{ item.name }}</p> 96 <p class="subtitle is-6">{{ item.subtitle }}</p>
92 <p class="subtitle is-6">{{ item.subtitle }}</p>
93 </div>
94 </div> 97 </div>
95 <strong v-if="item.tag" class="tag">#{{ item.tag }}</strong>
96 </div> 98 </div>
97 </a> 99 <strong class="tag" v-if="item.tag">#{{ item.tag }}</strong>
98 </div> 100 </div>
101 </a>
99 </div> 102 </div>
100 </div> 103 </div>
101 </div> 104 </div>
@@ -108,13 +111,15 @@
108 <footer class="footer"> 111 <footer class="footer">
109 <div class="container"> 112 <div class="container">
110 <div class="content has-text-centered"> 113 <div class="content has-text-centered">
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> 114 <p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <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> 115 href="https://vuejs.org/">vuejs</a>
116 & <a href="#">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i
117 class="fab fa-github-alt"></i></a></p>
113 </div> 118 </div>
114 </div> 119 </div>
115 </footer> 120 </footer>
116 121
117 <script src="https://unpkg.com/vue"></script> 122 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.min.js"></script>
118 <script src="vendors/js-yaml.min.js"></script> 123 <script src="vendors/js-yaml.min.js"></script>
119 <script src="app.js"></script> 124 <script src="app.js"></script>
120</body> 125</body>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 06:29:29 +0000