Tweak offline page

assets/javascripts/templates/pages/offline_tmpl.coffee

@@ -2,13 +2,12 @@ app.templates.offlinePage = (docs) -> """
   <h1 class="_lined-heading">Offline Documentation</h1>
 
   <div class="_docs-tools">
+    <label>
+      <input type="checkbox" name="autoUpdate" value="1" #{if app.settings.get('manualUpdate') then '' else 'checked'}>Install updates automatically
+    </label>
     <div class="_docs-links">
-      <a class="_docs-link" data-action-all="install">Install all</a><a class="_docs-link" data-action-all="update"><strong>Update all</strong></a><a class="_docs-link" data-action-all="uninstall">Uninstall all</a>
+      <button type="button" class="_btn-link" data-action-all="install">Install all</button><button type="button" class="_btn-link" data-action-all="update"><strong>Update all</strong></button><button type="button" class="_btn-link" data-action-all="uninstall">Uninstall all</button>
     </div>
-    <label class="_docs-label">
-      <input type="checkbox" name="autoUpdate" value="1" #{if app.settings.get('manualUpdate') then '' else 'checked'}>
-      Check for and install updates automatically
-    </label>
   </div>
 
   <table class="_docs">
@@ -29,7 +28,7 @@ app.templates.offlinePage = (docs) -> """
     <dt>Can I close the tab/browser?
     <dd>#{canICloseTheTab()}
     <dt>What if I don't update a documentation?
-    <dd>You'll see outdated content and some pages will be missing or broken, since the rest of the app (including data for the search and sidebar) uses a different caching mechanism which is updated automatically.
+    <dd>You'll see outdated content and some pages will be missing or broken, because the rest of the app (including data for the search and sidebar) uses a different caching mechanism that's updated automatically.
     <dt>I found a bug, where do I report it?
     <dd>In the <a href="https://github.com/Thibaut/devdocs/issues">issue tracker</a>. Thanks!
     <dt>How do I uninstall/reset the app?
@@ -43,8 +42,8 @@ canICloseTheTab = ->
   if app.AppCache.isEnabled()
     """ Yes! Even offline, you can open a new tab, go to <a href="//devdocs.io">devdocs.io</a>, and everything will work as if you were online (provided you installed all the documentations you want to use beforehand). """
   else
-    """ No. AppCache isn't available in your browser (or is disabled) so loading <a href="//devdocs.io">devdocs.io</a> offline won't work.<br>
+    """ No. AppCache isn't available in your browser (or is disabled), so loading <a href="//devdocs.io">devdocs.io</a> offline won't work.<br>
-        The current tab will continue to work, though (provided you installed all the documentations you want to use beforehand). """
+        The current tab will continue to function even when you go offline (provided you installed all the documentations beforehand). """
 
 app.templates.offlineDoc = (doc, status) ->
   outdated = doc.isOutdated(status)
@@ -58,17 +57,17 @@ app.templates.offlineDoc = (doc, status) ->
   html += if !(status and status.installed)
     """
       <td>-</td>
-      <td><a data-action="install">Install</a></td>
+      <td><button type="button" class="_btn-link" data-action="install">Install</button></td>
     """
   else if outdated
     """
       <td><strong>Outdated</strong></td>
-      <td><a data-action="update">Update</a> - <a data-action="uninstall">Uninstall</a></td>
+      <td><button type="button" class="_btn-link _bold" data-action="update">Update</button> - <button type="button" class="_btn-link" data-action="uninstall">Uninstall</button></td>
     """
   else
     """
       <td>Up&#8209;to&#8209;date</td>
-      <td><a data-action="uninstall">Uninstall</a></td>
+      <td><button type="button" class="_btn-link" data-action="uninstall">Uninstall</button></td>
     """
 
   html + '</tr>'

assets/javascripts/views/content/offline_page.coffee

@@ -35,7 +35,7 @@ class app.views.OfflinePage extends app.View
 
   refreshLinks: ->
     for action in ['install', 'update', 'uninstall']
-      @find("a[data-action-all='#{action}']").classList[if @find("a[data-action='#{action}']") then 'add' else 'remove']('_show')
+      @find("[data-action-all='#{action}']").classList[if @find("[data-action='#{action}']") then 'add' else 'remove']('_show')
     return
 
   docByEl: (el) ->
@@ -53,17 +53,15 @@ class app.views.OfflinePage extends app.View
     return
 
   onClick: (event) =>
-    return unless link = $.closestLink(event.target)
+    el = event.target
-    if action = link.getAttribute('data-action')
+    if action = el.getAttribute('data-action')
-      $.stopEvent(event)
+      doc = @docByEl(el)
-      doc = @docByEl(link)
       action = 'install' if action is 'update'
       doc[action](@onInstallSuccess.bind(@, doc), @onInstallError.bind(@, doc), @onInstallProgress.bind(@, doc))
-      link.parentNode.innerHTML = "#{link.textContent.replace(/e$/, '')}ing…"
+      el.parentNode.innerHTML = "#{el.textContent.replace(/e$/, '')}ing…"
-    else if action = link.getAttribute('data-action-all')
+    else if action = el.getAttribute('data-action-all')
-      $.stopEvent(event)
       app.db.migrate()
-      el.click() for el in @findAll("a[data-action='#{action}']")
+      $.click(el) for el in @findAll("[data-action='#{action}']")
     return
 
   onInstallSuccess: (doc) ->

assets/stylesheets/components/_content.scss

@@ -233,7 +233,7 @@
 
 ._docs {
   width: 100%;
-  margin-top: .75rem;
+  margin-top: .25rem;
   line-height: 1.5rem;
 
   th, td {
@@ -242,8 +242,6 @@
     &:first-child { width: auto; }
     &:last-child { width: 12rem; }
   }
-
-  td > a { cursor: pointer; }
 }
 
 ._docs-name:before {
@@ -259,36 +257,31 @@
 }
 
 ._docs-tools {
-  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
   line-height: 1.5rem;
+  margin-top: -.5rem;
+
+  input[type=checkbox] {
+    vertical-align: top;
+    margin: .25rem;
+  }
 }
 
 ._docs-links {
-  float: right;
+  flex: 0 0 auto;
-  padding: .375rem .125rem;
+  margin: .5rem 0;
+  padding: .25rem 0;
   @extend %box;
-}
-
-._docs-link {
-  display: none;
-  vertical-align: top;
-  padding: 0 .75rem;
-  cursor: pointer;
-
-  &._show { display: inline-block; }
-  &._show ~ &._show { border-left: 1px solid $boxBorder; }
-}
 
-._docs-label {
+  ._btn-link {
-  overflow: hidden;
-  margin: 1px 0;
-  padding: .375rem .5rem;
-
-  > input {
-    display: inline-block;
     vertical-align: top;
-    margin: .25rem;
+    padding: 0 .75rem;
   }
+  ._btn-link:not(._show) { display: none; }
+  ._btn-link._show ~ ._btn-link._show { border-left: 1px solid $boxBorder; }
 }
 
 //
@@ -361,6 +354,7 @@
 // Utilities
 //
 
+._bold { font-weight: $boldFontWeight; }
 ._note { @extend %note; }
 ._note-green { @extend %note-green; }
 ._label { @extend %label; }
@@ -408,6 +402,18 @@
   }
 }
 
+._btn-link {
+  line-height: inherit;
+  color: $linkColor;
+  text-decoration: $linkTextDecoration;
+  cursor: pointer;
+
+  &:hover {
+    color: $linkColorHover;
+    text-decoration: underline;
+  }
+}
+
 ._github-btn {
   display: inline-block;
   vertical-align: text-top;

assets/stylesheets/components/_settings.scss

@@ -59,7 +59,6 @@
   }
 
   input[type=checkbox] {
-    display: inline-block;
     vertical-align: top;
     margin: .25rem .375rem;
   }

assets/stylesheets/global/_base.scss

@@ -176,6 +176,7 @@ label {
 }
 
 input, button {
+  display: inline-block;
   margin: 0;
   font-family: inherit;
   font-size: 100%;