Fully implement offline docs table

assets/javascripts/collections/docs.coffee

@@ -48,5 +48,5 @@ class app.collections.Docs extends app.Collection
     app.db.versions @models, (statuses) ->
       if statuses
         for key, value of statuses
-          statuses[key] = downloaded: !!value, version: value
+          statuses[key] = downloaded: !!value, mtime: value
       callback(statuses)

assets/javascripts/models/doc.coffee

@@ -128,5 +128,5 @@ class app.models.Doc extends app.Model
 
   getDownloadStatus: (callback) ->
     app.db.version @, (value) ->
-      callback downloaded: !!value, version: value
+      callback downloaded: !!value, mtime: value
     return

assets/javascripts/templates/pages/offline_tmpl.coffee

@@ -1,6 +1,14 @@
 app.templates.offlinePage = (docs) -> """
   <h1 class="_lined-heading">Offline Documentation</h1>
-  <table class="_docs">#{docs}</table>
+  <table class="_docs">
+    <tr>
+      <th>Documentation</th>
+      <th class="_docs-size">Size</th>
+      <th>Status</th>
+      <th>Action</th>
+    </tr>
+    #{docs}
+  </table>
   <h1 class="_lined-heading">Questions & Answers</h1>
   <dl>
     <dt>How does this work?
@@ -29,11 +37,28 @@ canICloseTheTab = ->
         The current tab will continue to work, though (provided you downloaded all the documentations you want to use beforehand). """
 
 app.templates.offlineDoc = (doc, status) ->
-  html = """<tr data-slug="#{doc.slug}">"""
-  html += """<th class="_icon-#{doc.slug}">#{doc.name}</th>"""
-  html += if status.downloaded
-    """<td><a data-del>Delete</a></td>"""
+  outdated = status.downloaded and status.mtime isnt doc.mtime
+
+  html = """
+    <tr data-slug="#{doc.slug}"#{if outdated then ' class="_highlight"' else ''}>
+      <td class="_docs-name _icon-#{doc.slug}">#{doc.name}</td>
+      <td class="_docs-size">#{Math.ceil(doc.db_size / 100000) / 10} MB</td>
+  """
+
+  html += if !status.downloaded
+    """
+      <td>-</td>
+      <td><a data-dl>Download</a></td>
+    """
+  else if outdated
+    """
+      <td>Outdated</td>
+      <td><a data-dl>Update</a> - <a data-del>Delete</a></td>
+    """
   else
-    """<td><a data-dl>Download</a></td>"""
-  html += """</tr>"""
-  html
+    """
+      <td>Up-to-date</td>
+      <td><a data-del>Delete</a></td>
+    """
+
+  html + '</tr>'

assets/javascripts/views/content/offline_page.coffee

@@ -39,25 +39,27 @@ class app.views.OfflinePage extends app.View
     return
 
   onClick: (event) =>
-    if event.target.hasAttribute('data-dl')
+    link = event.target
+
+    if link.hasAttribute('data-dl')
       action = 'download'
-    else if event.target.hasAttribute('data-del')
+    else if link.hasAttribute('data-del')
       action = 'undownload'
 
     if action
       $.stopEvent(event)
-      doc = @docByEl(event.target)
+      doc = @docByEl(link)
       doc[action](@onDownloadSuccess.bind(@, doc), @onDownloadError.bind(@, doc))
-      @docEl(doc).classList.add("#{action}ing")
+      link.parentNode.innerHTML = "#{link.textContent.replace(/e$/, '')}ing…"
     return
 
   onDownloadSuccess: (doc) ->
     doc.getDownloadStatus (status) =>
       @docEl(doc).outerHTML = @renderDoc(doc, status)
+      $.highlight @docEl(doc), className: '_highlight'
     return
 
   onDownloadError: (doc) ->
     el = @docEl(doc)
-    el.className = ''
-    el.classList.add('error')
+    el.lastElementChild.textContent = 'Error'
     return

assets/stylesheets/components/_content.scss

@@ -250,43 +250,25 @@
   width: 100%;
   line-height: 1.5rem;
 
-  th {
-    max-width: 0;
-    padding-left: .5rem;
-    padding-right: .5rem;
+  th, td {
+    width: 1%;
     white-space: nowrap;
-    font-weight: normal;
 
-    &:before {
-      float: left;
-      margin: .25rem .5rem .25rem 0;
-      @extend %icon;
-    }
+    &:first-child { width: auto; }
+    &:last-child { width: 12rem; }
   }
 
-  td:last-child { text-align: right; }
   td > a { cursor: pointer; }
+}
 
-  tr.downloading > td:last-child {
-    > a { display: none; }
-    &:before { content: 'Downloading…' }
-  }
-
-  tr.undownloading > td:last-child {
-    > a { display: none; }
-    &:before { content: 'Deleting…' }
-  }
-
-  tr.error > td:last-child {
-    > a { display: none; }
-
-    &:before {
-      content: 'Error';
-      color: red;
-    }
-  }
+._docs-name:before {
+  float: left;
+  margin: .25rem .5rem .25rem 0;
+  @extend %icon;
 }
 
+._docs-size { text-align: right; }
+
 //
 // News
 //