Miroirs/devdocs
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/devdocs synced 2024-11-16 19:48:10 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve doc picker UI

Browse source 
Rel: #189
This commit is contained in:
Thibaut Courouble 2017-08-07 11:32:09 -04:00
parent 8d2a2fb298
commit 01afa80686
3 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/javascripts/templates/sidebar_tmpl.coffee
View file

@ -60,6 +60,8 @@ templates.sidebarDisabledList = (html) ->
templates.sidebarDisabledVersionedDoc = (doc, versions) ->
"""<a class="_list-item _list-dir _icon-#{doc.icon} _list-disabled" data-slug="#{doc.slug_without_version}" tabindex="-1">#{arrow}#{doc.name}</a><div class="_list _list-sub">#{versions}</div>"""
templates.docPickerHeader = """<div class="_list-picker-head"><span>Documentation</span> <span>Enable</span></div>"""
templates.docPickerNote = """
<div class="_list-note">Tip: for faster and better search results, select only the docs you need.</div>
<a href="https://trello.com/b/6BmTulfx/devdocs-documentation" class="_list-link" target="_blank" rel="noopener">Vote for new documentation</a>

6
assets/javascripts/views/sidebar/doc_picker.coffee
View file

@ -23,7 +23,7 @@ class app.views.DocPicker extends app.View
return
render: ->
html = ''
html = @tmpl('docPickerHeader')
docs = app.docs.all().concat(app.disabledDocs.all()...)
while doc = docs.shift()
@ -35,9 +35,7 @@ class app.views.DocPicker extends app.View
@html html + @tmpl('docPickerNote')
$.requestAnimationFrame =>
@addClass '_in'
@findByTag('input')?.focus()
$.requestAnimationFrame => @findByTag('input')?.focus()
return
renderVersions: (docs) ->

24
assets/stylesheets/components/_sidebar.scss
View file

@ -322,16 +322,28 @@
//
._list-picker {
> ._list, > ._list-item {
opacity: 0;
transition: opacity .2s;
}
&._in { > ._list, > ._list-item { opacity: 1; } }
._list-item { cursor: pointer; }
._list-sub > ._list-item { padding-left: 2.375rem; }
}
._list-picker-head {
display: flex;
justify-content: space-between;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
margin-right: 1px;
padding: .5rem .75rem .25rem .75rem;
line-height: 1.5rem;
font-size: .75rem;
font-weight: $bolderFontWeight;
color: $textColorLight;
text-transform: uppercase;
background: linear-gradient(to bottom, $sidebarBackground, $sidebarBackground 75%, rgba($sidebarBackground, 0));
cursor: default;
}
._list-checkbox {
position: absolute;
top: .5rem;