app.js: html title based on configuration

[github/bastienwirtz/homer.git] / index.html

diff --git a/index.html b/index.html
index 070656dad7fc8a2a7affa987167375ca86553470..d427002693e385cf11e86c96346824ef989e7e0e 100644 (file)
--- a/index.html
+++ b/index.html
@@ -30,24 +30,39 @@
       <div v-cloak 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-brand">
+              <a role="button" 
+                class="navbar-burger" :class="{ 'is-active': showMenu }" 
+                aria-label="menu" aria-expanded="false"
+                v-on:click="toggleMenu()">
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+              </a>
+            </div>
+            <div class="navbar-menu" :class="{ 'is-active': showMenu }">
               <div class="navbar-start">
                 <a v-for="link in config.links" class="navbar-item" :href="link.url" :target="link.target">
                   <i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i>
                   {{ link.name }}
                 </a>
               </div>
-              <div class="end">
+              <div class="navbar-end">
+                <div class="navbar-item">
                   <a
                     v-on:click="toggleTheme()"
                     aria-label="Toggle dark mode"
+                    class="icon-button"
                     ><i class="fas fa-adjust"></i>
-                </a>
-                <a v-on:click="toggleLayout()" class="icon-button navbar-item"><i
-                    :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
-                <div class="search-bar">
-                  <label for="search" class="search-label"></label>
-                  <input type="text" id="search" v-model="filter" />
+                  </a>
+                  <a v-on:click="toggleLayout()" class="icon-button"><i
+                      :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
+                  <div class="search-bar">
+                    <label for="search" class="search-label"></label>
+                    <input type="text" id="search" ref="search" v-model="filter"
+                      v-on:keyup.enter.exact="navigateToFirstService()"
+                      v-on:keyup.alt.enter="navigateToFirstService('_blank')" />
+                  </div>
                 </div>
               </div>
             </div>
@@ -82,7 +97,7 @@
                   v-else>#</span>
                 {{ group.name }}</h2>
               <service v-for="item in group.items" v-bind:item="item" class="column is-one-third-widescreen"
-                v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))">
+                v-if="!filter || (item && matchesFilter(item))">
               </service>
             </template>
           </div>
@@ -93,7 +108,7 @@
               <h2 v-if="!filter && group.name"><i v-if="group.icon" :class="group.icon"></i><span v-else>#</span>
                 {{ group.name }}</h2>
               <service v-for="item in group.items" v-bind:item="item"
-                v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))">
+                v-if="!filter || (item && matchesFilter(item))">
               </service>
             </div>
           </div>