Skip to content

Commit 0f23860

Browse files
ThibautThibaut
committed
UI improvements
1 parent fd03ac1 commit 0f23860

39 files changed

Lines changed: 303 additions & 342 deletions

‎assets/images/icons.png‎

-273 Bytes
Loading

‎assets/images/[email protected]‎

-596 Bytes
Loading

‎assets/javascripts/templates/pages/about_tmpl.coffee‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ app.templates.aboutPage = -> """
1010
</ul>
1111
</nav>
1212
13-
<h1 class="_lined-heading">API Documentation Browser</h1>
13+
<h1 class="_lined-heading">DevDocs: API Documentation Browser</h1>
1414
<p>DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
1515
<ul>
1616
<li>Created and maintained by <a href="http://thibaut.me">Thibaut Courouble</a>
@@ -26,7 +26,7 @@ app.templates.aboutPage = -> """
2626
<p class="_note _note-green">If you like DevDocs, please consider supporting my work on
2727
<a href="https://gratipay.com/devdocs/">Gratipay</a>. Thanks!<br>
2828
29-
<h2 class="_lined-heading" id="credits">Credits</h2>
29+
<h2 class="_block-heading" id="credits">Credits</h2>
3030
3131
<p><strong>Special thanks to:</strong>
3232
<ul>
@@ -45,7 +45,7 @@ app.templates.aboutPage = -> """
4545
#{("<tr><td>#{c[0]}<td>&copy; #{c[1]}<td><a href=\"#{c[3]}\">#{c[2]}</a>" for c in credits).join('')}
4646
</table>
4747
48-
<h2 class="_lined-heading" id="faq">Questions & Answers</h2>
48+
<h2 class="_block-heading" id="faq">Questions & Answers</h2>
4949
<dl>
5050
<dt>Where can I suggest new docs and features?
5151
<dd>You can suggest and vote for new docs on the <a href="https://trello.com/b/6BmTulfx/devdocs-documentation">Trello board</a>.<br>
@@ -56,15 +56,15 @@ app.templates.aboutPage = -> """
5656
</dl>
5757
<p>For anything else, feel free to email me at <a href="mailto:[email protected]">[email protected]</a>.
5858
59-
<h2 class="_lined-heading" id="copyright">Copyright and License</h2>
59+
<h2 class="_block-heading" id="copyright">Copyright and License</h2>
6060
<p class="_note">
6161
<strong>Copyright 2013&ndash;2017 Thibaut Courouble and <a href="https://github.com/Thibaut/devdocs/graphs/contributors">other contributors</a></strong><br>
6262
This software is licensed under the terms of the Mozilla Public License v2.0.<br>
6363
You may obtain a copy of the source code at <a href="https://github.com/Thibaut/devdocs">github.com/Thibaut/devdocs</a>.<br>
6464
For more information, see the <a href="https://github.com/Thibaut/devdocs/blob/master/COPYRIGHT">COPYRIGHT</a>
6565
and <a href="https://github.com/Thibaut/devdocs/blob/master/LICENSE">LICENSE</a> files.
6666
67-
<h2 class="_lined-heading" id="plugins">Plugins and Extensions</h2>
67+
<h2 class="_block-heading" id="plugins">Plugins and Extensions</h2>
6868
<ul>
6969
<li><a href="https://chrome.google.com/webstore/detail/devdocs/mnfehgbmkapmjnhcnbodoamcioleeooe">Chrome web app</a>
7070
<li><a href="https://sublime.wbond.net/packages/DevDocs">Sublime Text plugin</a>
@@ -73,7 +73,7 @@ app.templates.aboutPage = -> """
7373
<li><a href="https://github.com/xuchunyang/DevDocs.el">Emacs Package</a>
7474
</ul>
7575
76-
<h2 class="_lined-heading" id="privacy">Privacy Policy</h2>
76+
<h2 class="_block-heading" id="privacy">Privacy Policy</h2>
7777
<ul>
7878
<li><a href="http://devdocs.io">devdocs.io</a> ("App") is operated by Thibaut Courouble ("We").
7979
<li>We do not collect personal information.

‎assets/javascripts/templates/pages/help_tmpl.coffee‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ app.templates.helpPage = """
1111
</ul>
1212
</nav>
1313
14-
<h2 class="_lined-heading" id="search">Search</h2>
14+
<h1 class="_lined-heading" id="search">Help</h2>
15+
16+
<h2 class="_block-heading" id="search">Search</h2>
1517
<p>
1618
The search is case-insensitive and supports fuzzy matching (for queries longer than two characters).
1719
For example, searching <code class="_label">bgcp</code> brings up <code class="_label">background-clip</code>.<br>
@@ -42,7 +44,7 @@ app.templates.helpPage = """
4244
<a href="https://support.mozilla.org/en-US/kb/how-search-from-address-bar">these instructions</a>.
4345
</dl>
4446
45-
<h2 class="_lined-heading" id="shortcuts">Keyboard Shortcuts</h2>
47+
<h2 class="_block-heading" id="shortcuts">Keyboard Shortcuts</h2>
4648
<h3 class="_shortcuts-title">Selection</h3>
4749
<dl class="_shortcuts-dl">
4850
<dt class="_shortcuts-dt">
@@ -110,7 +112,7 @@ app.templates.helpPage = """
110112
<strong>Tip:</strong> If the cursor is no longer in the search field, press <code class="_label">/</code> or
111113
continue to type and it will refocus the search field and start showing new results.
112114
113-
<h2 class="_lined-heading" id="abbreviations">Abbreviations</h2>
115+
<h2 class="_block-heading" id="abbreviations">Abbreviations</h2>
114116
<p>Feel free to suggest new abbreviations on <a href="https://github.com/Thibaut/devdocs/issues/new">GitHub</a>.
115117
<table class="_abbreviations">
116118
<tr>

‎assets/javascripts/templates/pages/news_tmpl.coffee.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ app.templates.newsList = (news, options = {}) ->
1515
date = new Date(value[0])
1616
if options.years isnt false and year isnt date.getUTCFullYear()
1717
year = date.getUTCFullYear()
18-
result += "<h4>#{year}</h4>"
18+
result += """<h2 class="_block-heading">#{year}</h2>"""
1919
result += newsItem(date, value[1..])
2020

2121
result

‎assets/javascripts/templates/pages/offline_tmpl.coffee‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ app.templates.offlinePage = (docs) -> """
2121
#{docs}
2222
</table>
2323
<p class="_note"><strong>Note:</strong> your browser may delete DevDocs's offline data if your computer is running low on disk space and you haven't used the app in a while. Load this page before going offline to make sure the data is still there.
24-
<h1 class="_lined-heading">Questions & Answers</h1>
24+
<h2 class="_block-heading">Questions & Answers</h2>
2525
<dl>
2626
<dt>How does this work?
2727
<dd>Each page is cached as a key-value pair in <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> (downloaded from a single file).<br>

‎assets/javascripts/templates/pages/root_tmpl.coffee.erb‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,6 @@ app.templates.intro = """
4848
"""
4949
<% end %>
5050

51-
app.templates.mobileNav = """
52-
<nav class="_mobile-nav">
53-
<a href="/offline" class="_mobile-nav-link">Offline</a>
54-
<a href="/about" class="_mobile-nav-link">About</a>
55-
<a href="/news" class="_mobile-nav-link">News</a>
56-
<a href="/help" class="_mobile-nav-link">Help</a>
57-
</nav>
58-
"""
59-
6051
app.templates.mobileIntro = """
6152
<div class="_mobile-intro">
6253
<h2 class="_intro-title">Welcome!</h2>

‎assets/javascripts/views/content/root_page.coffee‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ class app.views.RootPage extends app.View
99

1010
render: ->
1111
@empty()
12-
@append @tmpl('mobileNav') if app.isMobile()
1312
if app.isAndroidWebview()
1413
@append @tmpl('androidWarning')
1514
else

‎assets/javascripts/views/layout/document.coffee‎

Lines changed: 11 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
class app.views.Document extends app.View
2-
MAX_WIDTH_CLASS = '_max-width'
3-
HIDE_SIDEBAR_CLASS = '_sidebar-hidden'
2+
MAX_WIDTH_LAYOUT = '_max-width'
3+
SIDEBAR_HIDDEN_LAYOUT = '_sidebar-hidden'
44

55
@el: document
66

@@ -14,16 +14,12 @@ class app.views.Document extends app.View
1414
superRight: 'onForward'
1515

1616
init: ->
17-
@addSubview @nav = new app.views.Nav,
17+
@addSubview @menu = new app.views.Menu,
1818
@addSubview @sidebar = new app.views.Sidebar
1919
@addSubview @resizer = new app.views.Resizer if app.views.Resizer.isSupported()
2020
@addSubview @content = new app.views.Content
2121
@addSubview @path = new app.views.Path unless app.isSingleDoc() or app.isMobile()
2222

23-
@sidebar.search
24-
.on 'searching', @onSearching
25-
.on 'clear', @onSearchClear
26-
2723
$.on document.body, 'click', @onClick
2824

2925
@activate()
@@ -39,39 +35,17 @@ class app.views.Document extends app.View
3935
return
4036

4137
toggleLayout: ->
42-
wantsMaxWidth = !app.el.classList.contains(MAX_WIDTH_CLASS)
43-
app.el.classList[if wantsMaxWidth then 'add' else 'remove'](MAX_WIDTH_CLASS)
44-
app.settings.setLayout(MAX_WIDTH_CLASS, wantsMaxWidth)
38+
wantsMaxWidth = !app.el.classList.contains(MAX_WIDTH_LAYOUT)
39+
app.el.classList[if wantsMaxWidth then 'add' else 'remove'](MAX_WIDTH_LAYOUT)
40+
app.settings.setLayout(MAX_WIDTH_LAYOUT, wantsMaxWidth)
4541
app.appCache?.updateInBackground()
4642
return
4743

48-
showSidebar: (options = {}) ->
49-
@toggleSidebar(options, true)
50-
return
51-
52-
hideSidebar: (options = {}) ->
53-
@toggleSidebar(options, false)
54-
return
55-
56-
toggleSidebar: (options = {}, shouldShow) ->
57-
shouldShow ?= if options.save then !@hasSidebar() else app.el.classList.contains(HIDE_SIDEBAR_CLASS)
58-
app.el.classList[if shouldShow then 'remove' else 'add'](HIDE_SIDEBAR_CLASS)
59-
if options.save
60-
app.settings.setLayout(HIDE_SIDEBAR_CLASS, !shouldShow)
61-
app.appCache?.updateInBackground()
62-
return
63-
64-
hasSidebar: ->
65-
!app.settings.hasLayout(HIDE_SIDEBAR_CLASS)
66-
67-
onSearching: =>
68-
unless @hasSidebar()
69-
@showSidebar()
70-
return
71-
72-
onSearchClear: =>
73-
unless @hasSidebar()
74-
@hideSidebar()
44+
toggleSidebarLayout: ->
45+
shouldHide = !app.settings.hasLayout(SIDEBAR_HIDDEN_LAYOUT)
46+
app.el.classList[if shouldHide then 'add' else 'remove'](SIDEBAR_HIDDEN_LAYOUT)
47+
app.settings.setLayout(SIDEBAR_HIDDEN_LAYOUT, shouldHide)
48+
app.appCache?.updateInBackground()
7549
return
7650

7751
setTitle: (title) ->

‎assets/javascripts/views/layout/menu.coffee‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
class app.views.Menu extends app.View
2+
@el: '._menu'
3+
@activeClass: 'active'
4+
5+
@events:
6+
click: 'onClick'
7+
8+
init: ->
9+
$.on document.body, 'click', @onGlobalClick
10+
return
11+
12+
onClick: =>
13+
prev = @el.previousElementSibling
14+
$.remove @el
15+
$.requestAnimationFrame => $.after(prev, @el)
16+
return
17+
18+
onGlobalClick: (event) =>
19+
return if event.which isnt 1
20+
if event.target.hasAttribute?('data-toggle-menu')
21+
@toggleClass @constructor.activeClass
22+
else if @hasClass @constructor.activeClass
23+
@removeClass @constructor.activeClass
24+
return

0 commit comments

Comments
 (0)