update ui

- display full date when hovering over the age in the article list
- hide close article button on desktop layouts
- autofocus username on the login page
- hide the title on the settings/appearance dropdowns (still visible on the buttons)

src/assets/index.html

@@ -255,7 +255,7 @@
                             <small class="flex-fill text-truncate mr-1">
                                 {{ feedsById[item.feed_id].title }}
                             </small>
-                            <small class="flex-shrink-0"><relative-time :val="item.date"/></small>
+                            <small class="flex-shrink-0"><relative-time v-bind:title="formatDate(item.date)" :val="item.date"/></small>
                         </div>
                         <div>{{ item.title || 'untitled' }}</div>
                     </div>
@@ -313,7 +313,7 @@
                     <span class="icon">{% inline "external-link.svg" %}</span>
                 </a>
                 <div class="flex-grow-1"></div>
-                <button class="toolbar-item" @click="itemSelected=null" title="Close Article">
+                <button class="toolbar-item d-md-none" @click="itemSelected=null" title="Close Article">
                     <span class="icon">{% inline "x.svg" %}</span>
                 </button>
             </div>

src/assets/javascripts/app.js

@@ -47,13 +47,13 @@ Vue.component('drag', {
 })
 
 Vue.component('dropdown', {
-  props: ['class', 'toggle-class', 'ref', 'drop'],
+  props: ['class', 'toggle-class', 'ref', 'drop', 'title'],
   data: function() {
     return {open: false}
   },
   template: `
     <div class="dropdown" :class="$attrs.class">
-      <button ref="btn" @click="toggle" :class="btnToggleClass"><slot name="button"></slot></button>
+      <button ref="btn" @click="toggle" :class="btnToggleClass" :title="$props.title"><slot name="button"></slot></button>
       <div ref="menu" class="dropdown-menu" :class="{show: open}"><slot v-if="open"></slot></div>
     </div>
   `,

src/assets/login.html

@@ -30,7 +30,7 @@
         <div class="form-group">
             <label for="username">Username</label>
             <input name="username" class="form-control" id="username" autocomplete="off"
-                   value="{% if .username %}{% .username %}{% end %}" required>
+                   value="{% if .username %}{% .username %}{% end %}" required autofocus>
         </div>
         <div class="form-group">
             <label for="password">Password</label>