diff --git a/assets/javascripts/templates/pages/offline_tmpl.coffee b/assets/javascripts/templates/pages/offline_tmpl.coffee index cf22bfc2..b655aa82 100644 --- a/assets/javascripts/templates/pages/offline_tmpl.coffee +++ b/assets/javascripts/templates/pages/offline_tmpl.coffee @@ -2,13 +2,12 @@ app.templates.offlinePage = (docs) -> """

Offline Documentation

+ -
@@ -29,7 +28,7 @@ app.templates.offlinePage = (docs) -> """
Can I close the tab/browser?
#{canICloseTheTab()}
What if I don't update a documentation? -
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. +
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.
I found a bug, where do I report it?
In the issue tracker. Thanks!
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 devdocs.io, 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 devdocs.io offline won't work.
- The current tab will continue to work, though (provided you installed all the documentations you want to use beforehand). """ + """ No. AppCache isn't available in your browser (or is disabled), so loading devdocs.io offline won't work.
+ 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) """
- + """ else if outdated """ - + """ else """ - + """ html + '' diff --git a/assets/javascripts/views/content/offline_page.coffee b/assets/javascripts/views/content/offline_page.coffee index 20fcbaee..22859f5a 100644 --- a/assets/javascripts/views/content/offline_page.coffee +++ b/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) - if action = link.getAttribute('data-action') - $.stopEvent(event) - doc = @docByEl(link) + el = event.target + if action = el.getAttribute('data-action') + doc = @docByEl(el) 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…" - else if action = link.getAttribute('data-action-all') - $.stopEvent(event) + el.parentNode.innerHTML = "#{el.textContent.replace(/e$/, '')}ing…" + else if action = el.getAttribute('data-action-all') 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) -> diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss index 341be1a1..bc83f175 100644 --- a/assets/stylesheets/components/_content.scss +++ b/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; - padding: .375rem .125rem; + flex: 0 0 auto; + 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 { - overflow: hidden; - margin: 1px 0; - padding: .375rem .5rem; - - > input { - display: inline-block; + ._btn-link { 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; diff --git a/assets/stylesheets/components/_settings.scss b/assets/stylesheets/components/_settings.scss index 43e16564..3fc1cb6b 100644 --- a/assets/stylesheets/components/_settings.scss +++ b/assets/stylesheets/components/_settings.scss @@ -59,7 +59,6 @@ } input[type=checkbox] { - display: inline-block; vertical-align: top; margin: .25rem .375rem; } diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss index 5ff84a49..e0e71f49 100644 --- a/assets/stylesheets/global/_base.scss +++ b/assets/stylesheets/global/_base.scss @@ -176,6 +176,7 @@ label { } input, button { + display: inline-block; margin: 0; font-family: inherit; font-size: 100%;
-InstallOutdatedUpdate - Uninstall - Up‑to‑dateUninstall