From 3ce649351c9408322cf6aaec6f953e4794a10404 Mon Sep 17 00:00:00 2001 From: Thibaut Courouble Date: Sun, 26 Feb 2017 17:53:19 -0500 Subject: [PATCH] Improve help page --- assets/javascripts/news.json | 2 +- .../templates/pages/help_tmpl.coffee | 27 +++++++++---------- assets/stylesheets/components/_content.scss | 7 +---- 3 files changed, 15 insertions(+), 21 deletions(-) diff --git a/assets/javascripts/news.json b/assets/javascripts/news.json index e28e6f25..02cc7605 100644 --- a/assets/javascripts/news.json +++ b/assets/javascripts/news.json @@ -88,7 +88,7 @@ "New documentations: Q and OpenTSDB" ], [ "2015-07-26", - "Added search abbreviations (e.g. $ is an alias for jQuery).\nClick here to see the full list. Feel free to suggest more on GitHub.", + "Added search aliases (e.g. $ is an alias for jQuery).\nClick here to see the full list. Feel free to suggest more on GitHub.", "Added shift + ↓/↑ shortcut for scrolling (same as alt + ↓/↑)." ], [ "2015-07-05", diff --git a/assets/javascripts/templates/pages/help_tmpl.coffee b/assets/javascripts/templates/pages/help_tmpl.coffee index 51831d63..52d757db 100644 --- a/assets/javascripts/templates/pages/help_tmpl.coffee +++ b/assets/javascripts/templates/pages/help_tmpl.coffee @@ -7,7 +7,7 @@ app.templates.helpPage = """ @@ -15,14 +15,13 @@ app.templates.helpPage = """

Search

- The search is case-insensitive and supports fuzzy matching (for queries longer than two characters). - For example, searching bgcp brings up background-clip.
- Abbreviations are also supported (full list below). - For example, $ is an alias for jQuery. + The search is case-insensitive. It supports fuzzy matching + (e.g. bgcp matches background-clip) + and aliases (full list below).

- You can scope the search to a single documentation by typing its name (or an abbreviation), + You can scope the search to a single documentation by typing its name (or an abbreviation) and pressing Tab (Space on mobile devices). For example, to search the JavaScript documentation, enter javascript or js, then Tab.
@@ -30,16 +29,16 @@ app.templates.helpPage = """
The search field can be prefilled from the URL by visiting devdocs.io/#q=keyword. - Characters after #q= will be used as search string.
+ Characters after #q= will be used as search query.
To search a single documentation, add its name and a space before the keyword: devdocs.io/#q=js date.
- DevDocs supports OpenSearch, meaning it can easily be installed as a search engine on most web browsers. + DevDocs supports OpenSearch. It can easily be installed as a search engine on most web browsers:
  • On Chrome, the setup is done automatically. Simply press Tab when devdocs.io is autocompleted in the omnibox (to set a custom keyword, click Manage search engines\u2026 in Chrome's settings). -
  • On Firefox, open the search engine list (icon in the search bar) and select Add "DevDocs Search". +
  • On Firefox, open the search engine list (icon in the search bar) and click Add "DevDocs Search". DevDocs is now available in the search bar. You can also search from the location bar by following these instructions.
@@ -114,16 +113,16 @@ app.templates.helpPage = """ alt + s
Search on Stack Overflow -

+

Tip: If the cursor is no longer in the search field, press / or continue to type and it will refocus the search field and start showing new results. -

Abbreviations

-

Feel free to suggest new abbreviations on GitHub. - +

Search Aliases

+
Word Alias - #{("
#{key}#{value}" for key, value of app.models.Entry.ALIASES).join('')} + #{("
#{key}#{value}" for key, value of app.models.Entry.ALIASES).join('')}
+

Feel free to suggest new aliases on GitHub. """ diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss index b5744001..341be1a1 100644 --- a/assets/stylesheets/components/_content.scss +++ b/assets/stylesheets/components/_content.scss @@ -357,12 +357,6 @@ @extend %label; } -// -// Abbreviations -// - -._abbreviations td { @extend %code; } - // // Utilities // @@ -370,6 +364,7 @@ ._note { @extend %note; } ._note-green { @extend %note-green; } ._label { @extend %label; } +._code { @extend %code; } ._highlight { background: $highlightBackground !important; } ._pre-clip {