Unified · Split
| @@ -48,5 +48,5 @@ class app.collections.Docs extends app.Collection · 47 unmodified lines | ||
| 48 | 48 | app.db.versions @models, (statuses) -> |
| 49 | 49 | if statuses |
| 50 | 50 | for key, value of statuses |
| 51 | − statuses[key] = downloaded: !!value, version: value | |
| 51 | + statuses[key] = downloaded: !!value, mtime: value | |
| 52 | 52 | callback(statuses) |
| @@ -128,5 +128,5 @@ class app.models.Doc extends app.Model · 127 unmodified lines | ||
| 128 | 128 | |
| 129 | 129 | getDownloadStatus: (callback) -> |
| 130 | 130 | app.db.version @, (value) -> |
| 131 | − callback downloaded: !!value, version: value | |
| 131 | + callback downloaded: !!value, mtime: value | |
| 132 | 132 | return |
| @@ -1,6 +1,14 @@ | ||
| 1 | 1 | app.templates.offlinePage = (docs) -> """ |
| 2 | 2 | <h1 class="_lined-heading">Offline Documentation</h1> |
| 3 | − <table class="_docs">#{docs}</table> | |
| 3 | + <table class="_docs"> | |
| 4 | + <tr> | |
| 5 | + <th>Documentation</th> | |
| 6 | + <th class="_docs-size">Size</th> | |
| 7 | + <th>Status</th> | |
| 8 | + <th>Action</th> | |
| 9 | + </tr> | |
| 10 | + #{docs} | |
| 11 | + </table> | |
| 4 | 12 | <h1 class="_lined-heading">Questions & Answers</h1> |
| 5 | 13 | <dl> |
| 6 | 14 | <dt>How does this work? |
| @@ -29,11 +37,28 @@ canICloseTheTab = -> · 22 unmodified lines | ||
| 29 | 37 | The current tab will continue to work, though (provided you downloaded all the documentations you want to use beforehand). """ |
| 30 | 38 | |
| 31 | 39 | app.templates.offlineDoc = (doc, status) -> |
| 32 | − html = """<tr data-slug="#{doc.slug}">""" | |
| 33 | − html += """<th class="_icon-#{doc.slug}">#{doc.name}</th>""" | |
| 34 | − html += if status.downloaded | |
| 35 | − """<td><a data-del>Delete</a></td>""" | |
| 40 | + outdated = status.downloaded and status.mtime isnt doc.mtime | |
| 41 | + | |
| 42 | + html = """ | |
| 43 | + <tr data-slug="#{doc.slug}"#{if outdated then ' class="_highlight"' else ''}> | |
| 44 | + <td class="_docs-name _icon-#{doc.slug}">#{doc.name}</td> | |
| 45 | + <td class="_docs-size">#{Math.ceil(doc.db_size / 100000) / 10} MB</td> | |
| 46 | + """ | |
| 47 | + | |
| 48 | + html += if !status.downloaded | |
| 49 | + """ | |
| 50 | + <td>-</td> | |
| 51 | + <td><a data-dl>Download</a></td> | |
| 52 | + """ | |
| 53 | + else if outdated | |
| 54 | + """ | |
| 55 | + <td>Outdated</td> | |
| 56 | + <td><a data-dl>Update</a> - <a data-del>Delete</a></td> | |
| 57 | + """ | |
| 36 | 58 | else |
| 37 | − """<td><a data-dl>Download</a></td>""" | |
| 38 | − html += """</tr>""" | |
| 39 | − html | |
| 59 | + """ | |
| 60 | + <td>Up-to-date</td> | |
| 61 | + <td><a data-del>Delete</a></td> | |
| 62 | + """ | |
| 63 | + | |
| 64 | + html + '</tr>' | |
| @@ -39,25 +39,27 @@ class app.views.OfflinePage extends app.View · 38 unmodified lines | ||
| 39 | 39 | return |
| 40 | 40 | |
| 41 | 41 | onClick: (event) => |
| 42 | − if event.target.hasAttribute('data-dl') | |
| 42 | + link = event.target | |
| 43 | + | |
| 44 | + if link.hasAttribute('data-dl') | |
| 43 | 45 | action = 'download' |
| 44 | − else if event.target.hasAttribute('data-del') | |
| 46 | + else if link.hasAttribute('data-del') | |
| 45 | 47 | action = 'undownload' |
| 46 | 48 | |
| 47 | 49 | if action |
| 48 | 50 | $.stopEvent(event) |
| 49 | − doc = @docByEl(event.target) | |
| 51 | + doc = @docByEl(link) | |
| 50 | 52 | doc[action](@onDownloadSuccess.bind(@, doc), @onDownloadError.bind(@, doc)) |
| 51 | − @docEl(doc).classList.add("#{action}ing") | |
| 53 | + link.parentNode.innerHTML = "#{link.textContent.replace(/e$/, '')}ing…" | |
| 52 | 54 | return |
| 53 | 55 | |
| 54 | 56 | onDownloadSuccess: (doc) -> |
| 55 | 57 | doc.getDownloadStatus (status) => |
| 56 | 58 | @docEl(doc).outerHTML = @renderDoc(doc, status) |
| 59 | + $.highlight @docEl(doc), className: '_highlight' | |
| 57 | 60 | return |
| 58 | 61 | |
| 59 | 62 | onDownloadError: (doc) -> |
| 60 | 63 | el = @docEl(doc) |
| 61 | − el.className = '' | |
| 62 | − el.classList.add('error') | |
| 64 | + el.lastElementChild.textContent = 'Error' | |
| 63 | 65 | return |
| @@ -250,43 +250,25 @@ · 249 unmodified lines | ||
| 250 | 250 | width: 100%; |
| 251 | 251 | line-height: 1.5rem; |
| 252 | 252 | |
| 253 | − th { | |
| 254 | − max-width: 0; | |
| 255 | − padding-left: .5rem; | |
| 256 | − padding-right: .5rem; | |
| 253 | + th, td { | |
| 254 | + width: 1%; | |
| 257 | 255 | white-space: nowrap; |
| 258 | − font-weight: normal; | |
| 259 | 256 | |
| 260 | − &:before { | |
| 261 | − float: left; | |
| 262 | − margin: .25rem .5rem .25rem 0; | |
| 263 | − @extend %icon; | |
| 264 | − } | |
| 257 | + &:first-child { width: auto; } | |
| 258 | + &:last-child { width: 12rem; } | |
| 265 | 259 | } |
| 266 | 260 | |
| 267 | − td:last-child { text-align: right; } | |
| 268 | 261 | td > a { cursor: pointer; } |
| 262 | +} | |
| 269 | 263 | |
| 270 | − tr.downloading > td:last-child { | |
| 271 | − > a { display: none; } | |
| 272 | − &:before { content: 'Downloading…' } | |
| 273 | − } | |
| 274 | − | |
| 275 | − tr.undownloading > td:last-child { | |
| 276 | − > a { display: none; } | |
| 277 | − &:before { content: 'Deleting…' } | |
| 278 | − } | |
| 279 | − | |
| 280 | − tr.error > td:last-child { | |
| 281 | − > a { display: none; } | |
| 282 | − | |
| 283 | − &:before { | |
| 284 | − content: 'Error'; | |
| 285 | − color: red; | |
| 286 | − } | |
| 287 | − } | |
| 264 | +._docs-name:before { | |
| 265 | + float: left; | |
| 266 | + margin: .25rem .5rem .25rem 0; | |
| 267 | + @extend %icon; | |
| 288 | 268 | } |
| 289 | 269 | |
| 270 | +._docs-size { text-align: right; } | |
| 271 | + | |
| 290 | 272 | // |
| 291 | 273 | // News |
| 292 | 274 | // |