krisyotam/devdocs

Binary file not shown.

assets/javascripts/templates/pages/about_tmpl.coffee+6−6

assets/javascripts/templates/pages/help_tmpl.coffee+5−3

     </ul>
   </nav>
-  <h2 class="_lined-heading" id="search">Search</h2>
+  <h1 class="_lined-heading" id="search">Help</h2>
+  <h2 class="_block-heading" id="search">Search</h2>
   <p>
     The search is case-insensitive and supports fuzzy matching (for queries longer than two characters).
     For example, searching <code class="_label">bgcp</code> brings up <code class="_label">background-clip</code>.<br>
             <a href="https://support.mozilla.org/en-US/kb/how-search-from-address-bar">these instructions</a>.
   </dl>
-  <h2 class="_lined-heading" id="shortcuts">Keyboard Shortcuts</h2>
+  <h2 class="_block-heading" id="shortcuts">Keyboard Shortcuts</h2>
   <h3 class="_shortcuts-title">Selection</h3>
   <dl class="_shortcuts-dl">
     <dt class="_shortcuts-dt">
     <strong>Tip:</strong> If the cursor is no longer in the search field, press <code class="_label">/</code> or
     continue to type and it will refocus the search field and start showing new results.
-  <h2 class="_lined-heading" id="abbreviations">Abbreviations</h2>
+  <h2 class="_block-heading" id="abbreviations">Abbreviations</h2>
   <p>Feel free to suggest new abbreviations on <a href="https://github.com/Thibaut/devdocs/issues/new">GitHub</a>.
   <table class="_abbreviations">
     <tr>

assets/javascripts/templates/pages/news_tmpl.coffee.erb+1−1

@@ -15,7 +15,7 @@ app.templates.newsList = (news, options = {}) -> · 14 unmodified lines
15	date = new Date(value[0])	15	date = new Date(value[0])
16	if options.years isnt false and year isnt date.getUTCFullYear()	16	if options.years isnt false and year isnt date.getUTCFullYear()
17	year = date.getUTCFullYear()	17	year = date.getUTCFullYear()
18	result += "<h4>#{year}</h4>"	18	result += """<h2 class="_block-heading">#{year}</h2>"""
19	result += newsItem(date, value[1..])	19	result += newsItem(date, value[1..])
20		20
21	result	21	result

assets/javascripts/templates/pages/offline_tmpl.coffee+1−1

@@ -21,7 +21,7 @@ app.templates.offlinePage = (docs) -> """ · 20 unmodified lines
21	#{docs}	21	#{docs}
22	</table>	22	</table>
23	<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.	23	<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>
25	<dl>	25	<dl>
26	<dt>How does this work?	26	<dt>How does this work?
27	<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>	27	<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+0−9

@@ -48,15 +48,6 @@ app.templates.intro = """ · 47 unmodified lines
48	"""	48	"""
49	<% end %>	49	<% end %>
50		50
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
60	app.templates.mobileIntro = """	51	app.templates.mobileIntro = """
61	<div class="_mobile-intro">	52	<div class="_mobile-intro">
62	<h2 class="_intro-title">Welcome!</h2>	53	<h2 class="_intro-title">Welcome!</h2>

assets/javascripts/views/content/root_page.coffee+0−1

@@ -9,7 +9,6 @@ class app.views.RootPage extends app.View · 8 unmodified lines
9		9
10	render: ->	10	render: ->
11	@empty()	11	@empty()
12	@append @tmpl('mobileNav') if app.isMobile()
13	if app.isAndroidWebview()	12	if app.isAndroidWebview()
14	@append @tmpl('androidWarning')	13	@append @tmpl('androidWarning')
15	else	14	else

assets/javascripts/views/layout/document.coffee+11−37

@@ -1,6 +1,6 @@
1	class app.views.Document extends app.View	1	class app.views.Document extends app.View
2	MAX_WIDTH_CLASS = '_max-width'	2	MAX_WIDTH_LAYOUT = '_max-width'
3	HIDE_SIDEBAR_CLASS = '_sidebar-hidden'	3	SIDEBAR_HIDDEN_LAYOUT = '_sidebar-hidden'
4		4
5	@el: document	5	@el: document
6		6
@@ -14,16 +14,12 @@ class app.views.Document extends app.View · 7 unmodified lines
14	superRight: 'onForward'	14	superRight: 'onForward'
15		15
16	init: ->	16	init: ->
17	@addSubview @nav = new app.views.Nav,	17	@addSubview @menu = new app.views.Menu,
18	@addSubview @sidebar = new app.views.Sidebar	18	@addSubview @sidebar = new app.views.Sidebar
19	@addSubview @resizer = new app.views.Resizer if app.views.Resizer.isSupported()	19	@addSubview @resizer = new app.views.Resizer if app.views.Resizer.isSupported()
20	@addSubview @content = new app.views.Content	20	@addSubview @content = new app.views.Content
21	@addSubview @path = new app.views.Path unless app.isSingleDoc() or app.isMobile()	21	@addSubview @path = new app.views.Path unless app.isSingleDoc() or app.isMobile()
22		22
23	@sidebar.search
24	.on 'searching', @onSearching
25	.on 'clear', @onSearchClear
26
27	$.on document.body, 'click', @onClick	23	$.on document.body, 'click', @onClick
28		24
29	@activate()	25	@activate()
@@ -39,39 +35,17 @@ class app.views.Document extends app.View · 9 unmodified lines
39	return	35	return
40		36
41	toggleLayout: ->	37	toggleLayout: ->
42	wantsMaxWidth = !app.el.classList.contains(MAX_WIDTH_CLASS)	38	wantsMaxWidth = !app.el.classList.contains(MAX_WIDTH_LAYOUT)
43	app.el.classList[if wantsMaxWidth then 'add' else 'remove'](MAX_WIDTH_CLASS)	39	app.el.classList[if wantsMaxWidth then 'add' else 'remove'](MAX_WIDTH_LAYOUT)
44	app.settings.setLayout(MAX_WIDTH_CLASS, wantsMaxWidth)	40	app.settings.setLayout(MAX_WIDTH_LAYOUT, wantsMaxWidth)
45	app.appCache?.updateInBackground()	41	app.appCache?.updateInBackground()
46	return	42	return
47		43
48	showSidebar: (options = {}) ->	44	toggleSidebarLayout: ->
49	@toggleSidebar(options, true)	45	shouldHide = !app.settings.hasLayout(SIDEBAR_HIDDEN_LAYOUT)
50	return	46	app.el.classList[if shouldHide then 'add' else 'remove'](SIDEBAR_HIDDEN_LAYOUT)
51		47	app.settings.setLayout(SIDEBAR_HIDDEN_LAYOUT, shouldHide)
52	hideSidebar: (options = {}) ->	48	app.appCache?.updateInBackground()
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()
75	return	49	return
76		50
77	setTitle: (title) ->	51	setTitle: (title) ->

assets/javascripts/views/layout/menu.coffee+24−0

@@ -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

assets/javascripts/views/layout/mobile.coffee+17−18

     FastClick.attach @body
     $.on @body, 'click', @onClick
-    $.on $('._home-btn'), 'click', @onClickHome
-    $.on $('._menu-btn'), 'click', @onClickMenu
     $.on $('._search'), 'touchend', @onTapSearch
-    @back = $('._back-btn')
+    @toggleSidebar = $('button[data-toggle-sidebar]')
+    @toggleSidebar.removeAttribute('hidden')
+    $.on @toggleSidebar, 'click', @onClickToggleSidebar
+    @back = $('button[data-back]')
+    @back.removeAttribute('hidden')
     $.on @back, 'click', @onClickBack
-    @forward = $('._forward-btn')
+    @forward = $('button[data-forward]')
+    @forward.removeAttribute('hidden')
     $.on @forward, 'click', @onClickForward
     app.document.sidebar.search
       .on 'searching', @showSidebar
-      .on 'clear', @hideSidebar
     @activate()
     return
   showSidebar: =>
     if @isSidebarShown()
-      @body.scrollTop = 0
+      window.scrollTo 0, 0
       return
-    @contentTop = @body.scrollTop
+    @contentTop = window.scrollY
     @content.style.display = 'none'
     @sidebar.style.display = 'block'
     if selection = @findByClass app.views.ListSelect.activeClass
-      $.scrollTo selection, @body, 'center'
+      scrollContainer = if window.scrollY is @body.scrollTop then @body else document.documentElement
+      $.scrollTo selection, scrollContainer, 'center'
     else
-      @body.scrollTop = @findByClass(app.views.ListFold.activeClass) and @sidebarTop or 0
+      window.scrollTo 0, @findByClass(app.views.ListFold.activeClass) and @sidebarTop or 0
     return
   hideSidebar: =>
     return unless @isSidebarShown()
-    @sidebarTop = @body.scrollTop
+    @sidebarTop = window.scrollY
     @sidebar.style.display = 'none'
     @content.style.display = 'block'
-    @body.scrollTop = @contentTop or 0
+    window.scrollTo 0, @contentTop or 0
     return
   isSidebarShown: ->
   onClickForward: =>
     history.forward()
-  onClickHome: =>
+  onClickToggleSidebar: =>
-    app.shortcuts.trigger 'escape'
-    @hideSidebar()
-    return
-  onClickMenu: =>
     if @isSidebarShown() then @hideSidebar() else @showSidebar()
     return
   onTapSearch: =>
-    @body.scrollTop = 0
+    window.scrollTo 0, 0
   afterRoute: =>
     @hideSidebar()

assets/javascripts/views/layout/nav.coffee+0−26

@@ -1,26 +0,0 @@
1	class app.views.Nav extends app.View
2	@el: '._nav'
3	@activeClass: '_nav-current'
4
5	@routes:
6	after: 'afterRoute'
7
8	select: (href) ->
9	@deselect()
10	if @current = @find "a[href='#{href}']"
11	@current.classList.add @constructor.activeClass
12	@current.setAttribute 'tabindex', '-1'
13	return
14
15	deselect: ->
16	if @current
17	@current.classList.remove @constructor.activeClass
18	@current.removeAttribute 'tabindex'
19	@current = null
20	return
21
22	afterRoute: (route, context) =>
23	if route in ['page', 'offline']
24	@select context.pathname
25	else
26	@deselect()

assets/javascripts/views/layout/resizer.coffee+1−1

@@ -35,7 +35,7 @@ class app.views.Resizer extends app.View · 34 unmodified lines
35	return	35	return
36		36
37	onClick: ->	37	onClick: ->
38	app.document.toggleSidebar(save: true)	38	app.document.toggleSidebarLayout()
39	return	39	return
40		40
41	onDragStart: (event) =>	41	onDragStart: (event) =>

assets/javascripts/views/list/list_focus.coffee+6−6

@@ -14,7 +14,7 @@ class app.views.ListFocus extends app.View · 13 unmodified lines
14		14
15	constructor: (@el) ->	15	constructor: (@el) ->
16	super	16	super
17	@focus = $.framify(@focus, @)	17	@focusOnNextFrame = $.framify(@focus, @)
18		18
19	focus: (el) ->	19	focus: (el) ->
20	if el and not el.classList.contains @constructor.activeClass	20	if el and not el.classList.contains @constructor.activeClass
@@ -87,22 +87,22 @@ class app.views.ListFocus extends app.View · 66 unmodified lines
87		87
88	onDown: =>	88	onDown: =>
89	if cursor = @getCursor()	89	if cursor = @getCursor()
90	@focus @findNext(cursor)	90	@focusOnNextFrame @findNext(cursor)
91	else	91	else
92	@focus @findByTag('a')	92	@focusOnNextFrame @findByTag('a')
93	return	93	return
94		94
95	onUp: =>	95	onUp: =>
96	if cursor = @getCursor()	96	if cursor = @getCursor()
97	@focus @findPrev(cursor)	97	@focusOnNextFrame @findPrev(cursor)
98	else	98	else
99	@focus @findLastByTag('a')	99	@focusOnNextFrame @findLastByTag('a')
100	return	100	return
101		101
102	onLeft: =>	102	onLeft: =>
103	cursor = @getCursor()	103	cursor = @getCursor()
104	if cursor and not cursor.classList.contains(app.views.ListFold.activeClass) and cursor.parentElement isnt @el	104	if cursor and not cursor.classList.contains(app.views.ListFold.activeClass) and cursor.parentElement isnt @el
105	@focus cursor.parentElement.previousSibling	105	@focusOnNextFrame cursor.parentElement.previousSibling
106	return	106	return
107		107
108	onEnter: =>	108	onEnter: =>

assets/javascripts/views/misc/notice.coffee+0−1

@@ -18,7 +18,6 @@ class app.views.Notice extends app.View · 17 unmodified lines
18	return	18	return
19		19
20	show: ->	20	show: ->
21	@addClass '_top' if @type is 'disabledDoc'
22	@html @tmpl("#{@type}Notice", @args...)	21	@html @tmpl("#{@type}Notice", @args...)
23	@prependTo $('._app')	22	@prependTo $('._app')
24	return	23	return

assets/javascripts/views/search/search.coffee+1−1

@@ -130,7 +130,7 @@ class app.views.Search extends app.View · 129 unmodified lines
130	if event.target is @resetLink	130	if event.target is @resetLink
131	$.stopEvent(event)	131	$.stopEvent(event)
132	@reset()	132	@reset()
133	@focus()	133	app.document.onEscape()
134	return	134	return
135		135
136	onSubmit: (event) ->	136	onSubmit: (event) ->

assets/javascripts/views/sidebar/doc_list.coffee+1−1

@@ -148,7 +148,7 @@ class app.views.DocList extends app.View · 147 unmodified lines
148	return	148	return
149		149
150	scrollTo: (model) ->	150	scrollTo: (model) ->
151	$.scrollTo @find("a[href='#{model.fullPath()}']"), null, 'top', margin: 0	151	$.scrollTo @find("a[href='#{model.fullPath()}']"), null, 'top', margin: if app.isMobile() then 48 else 0
152	return	152	return
153		153
154	toggleDisabled: ->	154	toggleDisabled: ->

assets/javascripts/views/sidebar/results.coffee+2−2

     return
   init: ->
-    @addSubview @listSelect = new app.views.ListSelect @el
     @addSubview @listFocus  = new app.views.ListFocus @el unless app.isMobile()
+    @addSubview @listSelect = new app.views.ListSelect @el
     @search
       .on 'results', @onResults
     return
   focusFirst: ->
-    @listFocus?.focus @el.firstElementChild
+    @listFocus?.focusOnNextFrame @el.firstElementChild
     return
   openFirst: ->

assets/javascripts/views/sidebar/sidebar.coffee+41−14

   @events:
     focus: 'onFocus'
+    select: 'onSelect'
     click: 'onClick'
   @shortcuts:
     @addSubview @search = new app.views.Search
     @search
-      .on 'searching', @showResults
+      .on 'searching', @onSearching
-      .on 'clear', @showDocList
+      .on 'clear', @onSearchClear
     .scope
       .on 'change', @onScopeChange
     $.on document, 'click', @onGlobalClick if @docPicker
     return
-  show: (view) ->
+  display: ->
+    @el.style.display = 'block'
+    return
+  resetDisplay: ->
+    @el.style.display = '' unless @el.style.display is 'none'
+    return
+  showView: (view) ->
     unless @view is view
       @hover?.hide()
       @saveScrollPosition()
     @append @tmpl('sidebarSettings') if @view is @docList and @docPicker
     return
-  showDocList: (reset) =>
+  showDocList: ->
-    @show @docList
+    @showView @docList
-    if reset is true
-      @docList.reset(revealCurrent: true)
-      @search.reset()
     return
   showDocPicker: =>
-    @show @docPicker
+    @showView @docPicker
     return
   showResults: =>
-    @show @results
+    @showView @results
+    return
+  reset: ->
+    @display()
+    @showDocList()
+    @docList.reset()
+    @search.reset()
     return
   onReady: =>
     @view = @docList
     @render()
     @view.activate()
-  reset: ->
-    @showDocList true
     return
   onScopeChange: (newDoc, previousDoc) =>
     @el.scrollTop = 0
     return
+  onSearching: =>
+    @display()
+    @showResults()
+    return
+  onSearchClear: =>
+    @resetDisplay()
+    @showDocList()
+    return
   onFocus: (event) =>
+    @display()
     $.scrollTo event.target, @el, 'continuous', bottomGap: 2 unless event.target is @el
     return
+  onSelect: =>
+    @resetDisplay()
+    return
   onClick: (event) =>
     return if event.which isnt 1
     if event.target.hasAttribute? 'data-reset-list'
       $.stopEvent(event)
-      @reset()
+      @onAltR()
     else if event.target.hasAttribute? 'data-light'
       $.stopEvent(event)
       document.activeElement?.blur()
   onAltR: =>
     @reset()
+    @docList.reset(revealCurrent: true)
+    @display()
     return
   onEscape: =>

assets/javascripts/views/view.coffee+7−0

@@ -35,6 +35,13 @@ class app.View · 34 unmodified lines
35	@el.classList.remove(name)	35	@el.classList.remove(name)
36	return	36	return
37		37
		38	toggleClass: (name) ->
		39	@el.classList.toggle(name)
		40	return
		41
		42	hasClass: (name) ->
		43	@el.classList.contains(name)
		44
38	resetClass: ->	45	resetClass: ->
39	@el.className = @originalClassName or ''	46	@el.className = @originalClassName or ''
40	if @constructor.className	47	if @constructor.className

assets/stylesheets/components/_app.scss+2−3

   position: relative;
   z-index: 1;
   height: 100%;
-  padding-top: $headerHeight;
   overflow: hidden;
   background: $contentBackground;
   -webkit-transition: opacity .2s;
   ._booting > & { opacity: 0; }
   ._noscript > & { display: none; }
-  &._max-width {
+  &._max-width  {
     margin: 0 auto;
     max-width: $maxWidth;
     box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder;
     left: 0;
     right: 0;
     line-height: 1;
-    margin-top: -.75em;
+    margin-top: -.6em;
     font-size: 4rem;
     font-weight: 300;
     letter-spacing: -.125rem;

assets/stylesheets/components/_content.scss+29−14

   height: 100%;
   overflow-y: scroll;
   margin-left: .875rem;
-  padding: 1.25rem 1.5rem 0;
+  padding: 1.125rem 1.5rem 0;
   font-size: .875rem;
   pointer-events: auto;
   -webkit-overflow-scrolling: touch;
   @extend %border-box;
-  -webkit-padding-start: .75rem;
+  -webkit-padding-start: .625rem;
-  -webkit-padding-end: 1rem;
+  -webkit-padding-end: .75rem;
-  @media (-moz-overlay-scrollbars) { padding-left: .75rem; }
+  @media (-moz-overlay-scrollbars) { padding-left: .625rem; }
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { margin-left: 0; }
+  ._sidebar-hidden &:before {
+    content: '';
+    display: block;
+    margin-top: $headerHeight;
+  }
   &:after { // padding bottom
     content: '';
     display: block;
 // Intro
 //
-._intro { text-align: center; }
+._intro {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(100vh - 2.375rem);
+  ._sidebar-hidden & {
+    min-height: calc(100vh - 2.375rem - #{$headerHeight});
+  }
+}
 ._intro-message {
-  position: relative;
-  display: inline-block;
-  vertical-align: top;
   max-width: 37rem;
+  margin: .5rem 0;
   padding: 1rem 1.25rem;
-  text-align: left;
   @extend %note, %note-green;
 }
 ._lined-heading,
 %lined-heading {
-  white-space: nowrap;
+  display: flex;
-  overflow: hidden;
+  justify-content: center;
-  word-wrap: normal;
+  align-items: center;
-  overflow-wrap: normal;
   &:after {
     content: '';
     display: inline-block;
     vertical-align: middle;
-    width: 100%;
+    flex-grow: 1;
     height: 1px;
     line-height: 0;
+    margin-top: .25rem;
     margin-left: 1rem;
     background: $boxBorderLight;
   }
 }
+._block-heading { @extend %block-heading; }
 ._heading-links {
   float: right;
   font-weight: normal;

assets/stylesheets/components/_header.scss+104−51

   z-index: $headerZ;
   top: 0;
   left: 0;
-  right: 0;
+  display: flex;
+  width: $sidebarWidth;
   height: $headerHeight;
-  line-height: $headerHeight;
   background: $headerBackground;
   border-bottom: 1px solid $headerBorder;
   @extend %user-select-none;
+  @media #{$mediumScreen} { width: $sidebarMediumWidth; }
 }
-//
+._header-left {
-// Navigation menu
+  float: left;
-//
+  height: 100%;
+}
-._nav {
+._header-right {
   float: right;
-  margin-right: .5rem;
+  height: 100%;
-  font-size: .875rem;
-  color: $textColor;
 }
-._nav-link,
+._header-btn {
-._nav-link:hover {
   position: relative;
-  float: left;
+  width: 2.25rem;
-  padding: 0 1.25rem;
+  height: 100%;
-  color: inherit;
+  color: $textColorLight;
-  text-decoration: none;
+  text-align: center;
-  @media #{$mediumScreen} { padding: 0 .75rem; }
+  &[hidden] { display: none; }
-}
-._nav-link {
+  &[disabled] {
-  &:before, &:after {
+    opacity: .3;
-    position: absolute;
+    cursor: not-allowed;
-    left: 50%;
-    bottom: 0;
-    width: 0;
-    height: 0;
-    margin-left: -.375rem;
-    border: .375rem solid transparent;
-    border-bottom-color: darken($headerBorder, 2%);
   }
-  &:after {
+  > svg {
-    bottom: -1px;
+    display: inline-block;
-    border-bottom-color: $contentBackground;
+    vertical-align: top;
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: currentColor;
+    pointer-events: none;
   }
 }
-._nav-current {
+//
-  outline: 0;
+// Menu
+//
-  &:before, &:after { content: ''; }
+._menu-btn {
+  border-right: 1px solid $headerBorder;
 }
-//
+._menu {
-// Logo
+  position: absolute;
-//
+  z-index: 1;
+  top: .25rem;
+  right: .25rem;
+  width: 8rem;
+  height: calc(11.5rem + 1px);
+  font-size: .875rem;
+  background: $contentBackground;
+  border: 1px solid $headerBorder;
+  border-radius: 3px;
+  box-shadow: -1px 1px 1px rgba(black, .05);
+  transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1);
+  opacity: 0;
+  -webkit-transform: scale(0, 0);
+          transform: scale(0, 0);
+  -webkit-transform-origin: 100% 0;
+          transform-origin: 100% 0;
+  &:hover,
+  ._menu-btn:hover + & {
+    transition-delay: 100ms;
+  }
-._logo {
+  &:hover,
-  position: relative;
+  &.active,
-  float: left;
+  ._menu-btn:hover + &,
-  height: $headerHeight;
+  ._menu-btn:focus + & {
+    opacity: 1;
+    -webkit-transform: scale(1, 1);
+            transform: scale(1, 1);
+  }
+  &:focus-within {
+    opacity: 1;
+    -webkit-transform: scale(1, 1);
+            transform: scale(1, 1);
+  }
+}
+._menu-title {
   margin: 0;
-  line-height: inherit;
+  line-height: 1.5rem;
-  font-size: inherit;
+  font-size: 1rem;
   font-weight: $boldFontWeight;
-  cursor: default;
+  letter-spacing: -.5px;
+  background: $sidebarBackground;
+  border-bottom: 1px solid $sidebarBorder;
+  border-radius: 2px 2px 0 0;
+}
+._menu-title-link,
+._menu-title-link:hover {
+  display: block;
+  padding: .5rem 1rem;
+  color: $focusText;
+  text-decoration: none;
+}
-  > ._nav-link {
+._menu-link {
-    float: none;
+  display: block;
-    margin-left: .75rem;
+  padding: 0 1rem;
-    padding: 0 .25rem;
+  line-height: 2.25rem;
+  color: inherit;
+  text-decoration: none;
+  &:hover {
+    color: $focusText;
+    text-decoration: none;
+    background: $sidebarBackground;
   }
+  &:last-child { border-radius: 0 0 2px 2px; }
 }
 //
 //
 ._search {
+  flex-grow: 1;
   position: relative;
-  float: left;
-  width: $sidebarWidth;
   height: 100%;
   padding: .5rem 0 .5rem .5rem;
   @extend %border-box;
-  @media #{$mediumScreen} { width: $sidebarMediumWidth; }
   &:before {
     position: absolute;
+    z-index: 1;
     top: 1rem;
     left: 1rem;
     opacity: .4;
+    pointer-events: none;
     @if $style == 'dark' {
       @extend %icon, %icon-search-white;
     } @else {
 }
 ._search-input {
+  position: relative;
   display: block;
   width: 100%;
   height: 100%;
 ._search-tag {
   display: none;
   position: absolute;
+  z-index: 2;
   top: .875rem;
   left: .875rem;
   padding: 0 .5rem;

assets/stylesheets/components/_mobile.scss+14−108

@@ -10,18 +10,17 @@ · 9 unmodified lines
10		10
11	body { -ms-overflow-style: -ms-autohiding-scrollbar; }	11	body { -ms-overflow-style: -ms-autohiding-scrollbar; }
12		12
13	._app, ._container, ._content { overflow: visible; }	13	._app, ._content { overflow: visible; }
14		14	._app { padding-top: $headerHeight; }
15	._container {	15	._container { margin: 0; }
16	margin: 0;
17	border: 0;
18	}
19		16
20	._content {	17	._content {
21	position: static;	18	position: static;
22	height: auto;	19	height: auto;
23	margin: 0;	20	margin: 0;
24	padding: .75rem 1rem 2.5rem;	21	padding: .75rem 1rem 2.5rem;
		22
		23	&:before { content: none; }
25	}	24	}
26		25
27	._booting:before, ._content-loading:before { font-size: 3rem; }	26	._booting:before, ._content-loading:before { font-size: 3rem; }
@@ -33,16 +32,13 @@ · 5 unmodified lines
33	max-width: 100vw;	32	max-width: 100vw;
34	}	33	}
35		34
36	._logo, ._nav { display: none; }	35	._header-btn { width: 2.5rem; }
37	._mobile-btn { display: block; }	36	._header-btn[hidden] { display: block; }
		37	._menu-btn { border-right: 0; }
38		38
39	._search {	39	._search {
40	float: none;	40	padding-right: .125rem;
41	width: auto;	41	padding-left: .125rem;
42	overflow: hidden;
43	padding-left: 2px;
44	padding-right: 2px;
45	border-right: 0;
46		42
47	&:before { left: .5rem; }	43	&:before { left: .5rem; }
48	}	44	}
@@ -57,7 +53,7 @@ · 8 unmodified lines
57	overflow: visible;	53	overflow: visible;
58	}	54	}
59		55
60	._list, ._sidebar-footer { width: 100%; }	56	._header, ._list, ._sidebar-footer { width: 100%; }
61		57
62	._list-item {	58	._list-item {
63	white-space: normal;	59	white-space: normal;
@@ -85,33 +81,12 @@ · 21 unmodified lines
85	box-shadow: 0 1px $noteGreenBorder, 0 -1px $noteGreenBorder;	81	box-shadow: 0 1px $noteGreenBorder, 0 -1px $noteGreenBorder;
86	}	82	}
87		83
88	// Splash
89
90	._splash-sponsors { margin-top: 1rem; }
91
92	._splash-sponsor {
93	position: static;
94
95	._logo-info {
96	left: 1rem;
97	right: 1rem;
98	width: auto;
99	max-width: none;
100	margin: 0;
101	}
102	}
103
104	// Notice	84	// Notice
105		85
106	._notice {	86	._notice {
107	position: fixed;	87	position: fixed;
108	left: 0;	88	left: 0;
109	padding: 0 .5rem;	89	padding: 0 .5rem;
110
111	~ ._sidebar {
112	margin-top: 2.5rem;
113	padding-bottom: 4rem;
114	}
115	}	90	}
116		91
117	._notice-text { font-size: .75em; }	92	._notice-text { font-size: .75em; }
@@ -143,76 +118,10 @@ · 25 unmodified lines
143	// Header buttons	118	// Header buttons
144	//	119	//
145		120
146	._mobile-btn {
147	display: none;
148	position: relative;
149	float: left;
150	width: 2.5rem;
151	height: 100%;
152	@extend %hide-text;
153
154	&[disabled] {
155	opacity: .3;
156	cursor: not-allowed;
157	}
158
159	&:before {
160	position: absolute;
161	top: 50%;
162	left: 50%;
163	margin: -.5rem 0 0 -.5rem;
164	@extend %icon;
165	}
166	}
167
168	._back-btn {
169	&:before { @extend %icon-back; }
170	}
171
172	._forward-btn {	121	._forward-btn {
173	width: 2.25rem;	122	margin-right: -.5rem;
174	-webkit-transform: rotate(180deg);
175	transform: rotate(180deg);
176
177	&:before {
178	margin-left: -.375rem;
179	@extend %icon-back;
180	}
181	}
182
183	._home-btn {
184	float: right;
185	width: 2rem;
186
187	&:before {
188	margin-left: -.375rem;
189	@extend %icon-home;
190	}
191	}
192		123
193	._menu-btn {	124	> svg { margin-left: -.375rem; }
194	float: right;
195
196	&:before { @extend %icon-menu; }
197	}
198
199	//
200	// Navigation menu
201	//
202
203	._mobile-nav {
204	margin: .25rem 0 1.25rem;
205	padding: 0;
206	line-height: 2.8;
207	overflow: hidden;
208	@extend %box;
209	}
210
211	._mobile-nav-link {
212	float: left;
213	width: 25%;
214	text-align: center;
215	font-weight: $boldFontWeight;
216	}	125	}
217		126
218	//	127	//
@@ -222,14 +131,11 @@ · 3 unmodified lines
222	._mobile-intro {	131	._mobile-intro {
223	> ._intro-list { padding-left: 1.5rem; }	132	> ._intro-list { padding-left: 1.5rem; }
224		133
225	> ._intro-hide,	134	._intro-hide {
226	> ._intro-sponsors {
227	position: static;	135	position: static;
228	float: none;	136	float: none;
229	display: block;	137	display: block;
230	margin-top: .75rem;	138	margin-top: .75rem;
231	text-align: center;	139	text-align: center;
232	}	140	}
233
234	._intro-sponsor { margin: .5em .75em; }
235	}	141	}

assets/stylesheets/components/_notice.scss+1−11

@@ -12,17 +12,7 @@ · 11 unmodified lines
12	@media #{$mediumScreen} { left: $sidebarMediumWidth; }	12	@media #{$mediumScreen} { left: $sidebarMediumWidth; }
13		13
14	._sidebar-hidden & { left: $sidebarHiddenWidth; }	14	._sidebar-hidden & { left: $sidebarHiddenWidth; }
15		15	~ ._container { padding-bottom: 2.5rem; }
16	&:not(._top) ~ ._container { padding-bottom: 2.5rem; }
17
18	&._top {
19	bottom: auto;
20	top: $headerHeight;
21	margin-top: 1px;
22	box-shadow: inset 0 -1px $noticeBorder;
23
24	~ ._container { padding-top: 2.5rem; }
25	}
26	}	16	}
27		17
28	._notice-text {	18	._notice-text {

assets/stylesheets/components/_sidebar.scss+1−1

@@ -40,7 +40,7 @@ · 39 unmodified lines
40		40
41	._resizer {	41	._resizer {
42	position: absolute;	42	position: absolute;
43	z-index: $sidebarZ + 1;	43	z-index: $sidebarZ;
44	top: $headerHeight;	44	top: $headerHeight;
45	bottom: 0;	45	bottom: 0;
46	left: $sidebarWidth;	46	left: $sidebarWidth;

assets/stylesheets/global/_icons.scss+0−3

 %icon-clear                 { background-position: -3rem 0; }
 %icon-settings              { background-position: 0 -1rem; }
 %icon-check                 { background-position: -1rem -1rem; }
-%icon-menu                  { background-position: -2rem -1rem; @extend %darkIconFix !optional; }
-%icon-home                  { background-position: -3rem -1rem; @extend %darkIconFix !optional; }
 %icon-path                  { background-position: 0 -2rem; }
 %icon-search-white          { background-position: -1rem -2rem; }
 %icon-dir-white             { background-position: -2rem -2rem; }
 %icon-clipboard             { background-position: 0 -5rem; }
 %icon-clipboard-white       { background-position: -1rem -5rem; }
 %icon-close-white           { background-position: -2rem -5rem; }
-%icon-back                  { background-position: -3rem -5rem; @extend %darkIconFix !optional; }
 ._icon-codeceptjs:before    { background-position: -3rem 0; }
 ._icon-codeception:before   { background-position: -4rem 0; }

assets/stylesheets/global/_variables-dark.scss+2−2

@@ -7,7 +7,7 @@ $style: 'dark'; · 6 unmodified lines
7		7
8	$maxWidth: 80rem;	8	$maxWidth: 80rem;
9	$headerHeight: 3rem;	9	$headerHeight: 3rem;
10	$sidebarWidth: 18rem;	10	$sidebarWidth: 20rem;
11	$sidebarMediumWidth: 16rem;	11	$sidebarMediumWidth: 16rem;
12	$sidebarHiddenWidth: 9px;	12	$sidebarHiddenWidth: 9px;
13		13
@@ -37,7 +37,7 @@ $linkColor: $textColor; · 23 unmodified lines
37	$linkColorHover: white;	37	$linkColorHover: white;
38	$linkTextDecoration: underline;	38	$linkTextDecoration: underline;
39		39
40	$headerBackground: #1e1e1e;	40	$headerBackground: #1c1c1c;
41	$headerBorder: #000;	41	$headerBorder: #000;
42		42
43	$sidebarBackground: #24282a;	43	$sidebarBackground: #24282a;

assets/stylesheets/global/_variables.scss+4−4

@@ -7,7 +7,7 @@ $style: 'light'; · 6 unmodified lines
7		7
8	$maxWidth: 80rem;	8	$maxWidth: 80rem;
9	$headerHeight: 3rem;	9	$headerHeight: 3rem;
10	$sidebarWidth: 18rem;	10	$sidebarWidth: 20rem;
11	$sidebarMediumWidth: 16rem;	11	$sidebarMediumWidth: 16rem;
12	$sidebarHiddenWidth: 9px;	12	$sidebarHiddenWidth: 9px;
13		13
@@ -37,11 +37,11 @@ $linkColor: #3377c0; · 23 unmodified lines
37	$linkColorHover: #2f6cb6;	37	$linkColorHover: #2f6cb6;
38	$linkTextDecoration: none;	38	$linkTextDecoration: none;
39		39
40	$headerBackground: #f0f0f0;	40	$headerBackground: #eee;
41	$headerBorder: #d9d9d9;	41	$headerBorder: #d7d7d7;
42		42
43	$sidebarBackground: #f9f9f9;	43	$sidebarBackground: #f9f9f9;
44	$sidebarBorder: #e3e3e3;	44	$sidebarBorder: #e1e1e1;
45		45
46	$scrollbarColor: #d2d2d2;	46	$scrollbarColor: #d2d2d2;
47	$scrollbarColorHover: #aaa;	47	$scrollbarColorHover: #aaa;

lib/app.rb+1−1

@@ -184,7 +184,7 @@ class App < Sinatra::Application · 183 unmodified lines
184	end	184	end
185		185
186	def app_size	186	def app_size
187	@app_size \|\|= cookies[:size].nil? ? '18rem' : "#{cookies[:size]}px"	187	@app_size \|\|= cookies[:size].nil? ? '20rem' : "#{cookies[:size]}px"
188	end	188	end
189		189
190	def app_layout	190	def app_layout

public/icons/ui/back/16.png+0−0

Binary file not shown.

public/icons/ui/back/16@2x.png+0−0

Binary file not shown.

public/icons/ui/home/16.png+0−0

Binary file not shown.

public/icons/ui/home/16@2x.png+0−0

Binary file not shown.

public/icons/ui/home/SOURCE+0−1

@@ -1 +0,0 @@
1	http://www.entypo.com/

public/icons/ui/menu/16.png+0−0

Binary file not shown.

public/icons/ui/menu/16@2x.png+0−0

Binary file not shown.

test/app_test.rb+2−2

@@ -31,7 +31,7 @@ class AppTest < MiniTest::Spec · 30 unmodified lines
31		31
32	it "sets default size" do	32	it "sets default size" do
33	get '/'	33	get '/'
34	assert_includes last_response.body, 'data-size="18rem"'	34	assert_includes last_response.body, 'data-size="20rem"'
35	end	35	end
36		36
37	it "sets size from cookie" do	37	it "sets size from cookie" do
@@ -115,7 +115,7 @@ class AppTest < MiniTest::Spec · 77 unmodified lines
115		115
116	it "sets default size" do	116	it "sets default size" do
117	get '/manifest.appcache'	117	get '/manifest.appcache'
118	assert_includes last_response.body, '18rem'	118	assert_includes last_response.body, '20rem'
119	end	119	end
120		120
121	it "sets size from cookie" do	121	it "sets size from cookie" do

views/app.erb+19−13

 <div class="_app<%= " #{app_layout}" if app_layout %>" role="application">
   <header class="_header" role="banner">
-    <button type="button" class="_mobile-btn _back-btn">Back</button>
+    <button type="button" aria-label="Toggle navigation" class="_header-btn" data-toggle-sidebar hidden>
-    <button type="button" class="_mobile-btn _forward-btn">Forward</button>
+      <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg>
-    <button type="button" class="_mobile-btn _menu-btn">Menu</button>
+    </button>
-    <button type="button" class="_mobile-btn _home-btn">Home</button>
     <form class="_search" role="search">
       <input type="search" name="q" class="_search-input" placeholder="Search&hellip;" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" maxlength="30" aria-label="Search">
       <button type="reset" class="_search-clear" title="Clear search">Clear search</button>
       <div class="_search-tag"></div>
     </form>
-    <h1 class="_logo">
+    <button type="button" aria-label="Back" class="_header-btn" data-back hidden>
-      <a href="/" class="_nav-link" title="Offline API Documentation Browser">DevDocs</a><%= "/ #{@doc['full_name']}" if @doc %>
+      <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></svg>
-    </h1>
+    </button>
-    <nav class="_nav" role="navigation">
+    <button type="button" aria-label="Forward" class="_header-btn _forward-btn" data-forward hidden>
-      <a href="/offline" class="_nav-link">Offline</a>
+      <svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></svg>
-      <a href="/about" class="_nav-link">About</a>
+    </button>
-      <a href="/news" class="_nav-link">News</a>
+    <button type="button" aria-label="Toggle menu" title="Toggle menu" class="_header-btn _menu-btn" data-toggle-menu>
-      <a href="/help" class="_nav-link">Tips</a>
+      <svg viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
+    </button>
+    <nav class="_menu" role="navigation">
+      <h1 class="_menu-title"><a href="/" class="_menu-title-link">DevDocs</a></h1>
+      <a href="/offline" class="_menu-link">Offline</a>
+      <a href="/news" class="_menu-link">Changelog</a>
+      <a href="/help" class="_menu-link">Help</a>
+      <a href="/about" class="_menu-link">About</a>
     </nav>
   </header>
   <section class="_sidebar" tabindex="-1">
 </div>
 <style data-size="<%= app_size %>" data-resizer>
   ._container { margin-left: <%= app_size %>; }
-  ._search, ._list, ._sidebar-footer { width: <%= app_size %>; }
+  ._header, ._list, ._sidebar-footer { width: <%= app_size %>; }
   ._list-hover.clone { min-width: <%= app_size %>; }
   ._notice, ._path, ._resizer { left: <%= app_size %>; }
 </style>

@@ -10,7 +10,7 @@ app.templates.aboutPage = -> """ · 9 unmodified lines
10	</ul>	10	</ul>
11	</nav>	11	</nav>
12		12
13	<h1 class="_lined-heading">API Documentation Browser</h1>	13	<h1 class="_lined-heading">DevDocs: API Documentation Browser</h1>
14	<p>DevDocs combines multiple API documentations in a fast, organized, and searchable interface.	14	<p>DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
15	<ul>	15	<ul>
16	<li>Created and maintained by <a href="http://thibaut.me">Thibaut Courouble</a>	16	<li>Created and maintained by <a href="http://thibaut.me">Thibaut Courouble</a>
@@ -26,7 +26,7 @@ app.templates.aboutPage = -> """ · 9 unmodified lines
26	<p class="_note _note-green">If you like DevDocs, please consider supporting my work on	26	<p class="_note _note-green">If you like DevDocs, please consider supporting my work on
27	<a href="https://gratipay.com/devdocs/">Gratipay</a>. Thanks!<br>	27	<a href="https://gratipay.com/devdocs/">Gratipay</a>. Thanks!<br>
28		28
29	<h2 class="_lined-heading" id="credits">Credits</h2>	29	<h2 class="_block-heading" id="credits">Credits</h2>
30		30
31	<p><strong>Special thanks to:</strong>	31	<p><strong>Special thanks to:</strong>
32	<ul>	32	<ul>
@@ -45,7 +45,7 @@ app.templates.aboutPage = -> """ · 12 unmodified lines
45	#{("<tr><td>#{c[0]}<td>© #{c[1]}<td><a href=\"#{c[3]}\">#{c[2]}</a>" for c in credits).join('')}	45	#{("<tr><td>#{c[0]}<td>© #{c[1]}<td><a href=\"#{c[3]}\">#{c[2]}</a>" for c in credits).join('')}
46	</table>	46	</table>
47		47
48	<h2 class="_lined-heading" id="faq">Questions & Answers</h2>	48	<h2 class="_block-heading" id="faq">Questions & Answers</h2>
49	<dl>	49	<dl>
50	<dt>Where can I suggest new docs and features?	50	<dt>Where can I suggest new docs and features?
51	<dd>You can suggest and vote for new docs on the <a href="https://trello.com/b/6BmTulfx/devdocs-documentation">Trello board</a>.<br>	51	<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,7 +56,7 @@ app.templates.aboutPage = -> """ · 4 unmodified lines
56	</dl>	56	</dl>
57	<p>For anything else, feel free to email me at <a href="mailto:thibaut@devdocs.io">thibaut@devdocs.io</a>.	57	<p>For anything else, feel free to email me at <a href="mailto:thibaut@devdocs.io">thibaut@devdocs.io</a>.
58		58
59	<h2 class="_lined-heading" id="copyright">Copyright and License</h2>	59	<h2 class="_block-heading" id="copyright">Copyright and License</h2>
60	<p class="_note">	60	<p class="_note">
61	<strong>Copyright 2013–2017 Thibaut Courouble and <a href="https://github.com/Thibaut/devdocs/graphs/contributors">other contributors</a></strong><br>	61	<strong>Copyright 2013–2017 Thibaut Courouble and <a href="https://github.com/Thibaut/devdocs/graphs/contributors">other contributors</a></strong><br>
62	This software is licensed under the terms of the Mozilla Public License v2.0.<br>	62	This software is licensed under the terms of the Mozilla Public License v2.0.<br>
@@ -64,7 +64,7 @@ app.templates.aboutPage = -> """ · 1 unmodified line
64	For more information, see the <a href="https://github.com/Thibaut/devdocs/blob/master/COPYRIGHT">COPYRIGHT</a>	64	For more information, see the <a href="https://github.com/Thibaut/devdocs/blob/master/COPYRIGHT">COPYRIGHT</a>
65	and <a href="https://github.com/Thibaut/devdocs/blob/master/LICENSE">LICENSE</a> files.	65	and <a href="https://github.com/Thibaut/devdocs/blob/master/LICENSE">LICENSE</a> files.
66		66
67	<h2 class="_lined-heading" id="plugins">Plugins and Extensions</h2>	67	<h2 class="_block-heading" id="plugins">Plugins and Extensions</h2>
68	<ul>	68	<ul>
69	<li><a href="https://chrome.google.com/webstore/detail/devdocs/mnfehgbmkapmjnhcnbodoamcioleeooe">Chrome web app</a>	69	<li><a href="https://chrome.google.com/webstore/detail/devdocs/mnfehgbmkapmjnhcnbodoamcioleeooe">Chrome web app</a>
70	<li><a href="https://sublime.wbond.net/packages/DevDocs">Sublime Text plugin</a>	70	<li><a href="https://sublime.wbond.net/packages/DevDocs">Sublime Text plugin</a>
@@ -73,7 +73,7 @@ app.templates.aboutPage = -> """ · 2 unmodified lines
73	<li><a href="https://github.com/xuchunyang/DevDocs.el">Emacs Package</a>	73	<li><a href="https://github.com/xuchunyang/DevDocs.el">Emacs Package</a>
74	</ul>	74	</ul>
75		75
76	<h2 class="_lined-heading" id="privacy">Privacy Policy</h2>	76	<h2 class="_block-heading" id="privacy">Privacy Policy</h2>
77	<ul>	77	<ul>
78	<li><a href="http://devdocs.io">devdocs.io</a> ("App") is operated by Thibaut Courouble ("We").	78	<li><a href="http://devdocs.io">devdocs.io</a> ("App") is operated by Thibaut Courouble ("We").
79	<li>We do not collect personal information.	79	<li>We do not collect personal information.