Add path bar

Closes #32.

Thibaut committed 12 years ago

Commit 06bdb771 parent f3cfcd011 files · +94 −-3Browse files

Unified · Split

11 files

Binary file not shown.

Binary file not shown.

@@ -24,7 +24,10 @@ newsItem = (date, news) -> · 23 unmodified lines
24	24	result
25	25
26	26	app.news = [
27		− [ 1393027200000, # February 22, 2013
	27	+ [ 1394236800000, # March 8, 2013
	28	+ """ Added path bar. """,
	29	+ ], [
	30	+ 1393027200000, # February 22, 2013
28	31	""" New <a href="/c/">C</a> documentation """,
29	32	], [
30	33	1392508800000, # February 16, 2013

@@ -0,0 +1,5 @@
	1	+app.templates.path = (doc, type, entry) ->
	2	+ html = """<a href="#{doc.fullPath()}" class="_path-item _icon-#{doc.slug}">#{doc.name}</a>"""
	3	+ html += """<a href="#{type.fullPath()}" class="_path-item">#{type.name}</a>""" if type
	4	+ html += """<span class="_path-item">#{entry.name}</span>""" if entry
	5	+ html

@@ -11,6 +11,7 @@ class app.views.Document extends app.View · 10 unmodified lines
11	11	@addSubview @nav = new app.views.Nav,
12	12	@addSubview @sidebar = new app.views.Sidebar
13	13	@addSubview @content = new app.views.Content
	14	+ @addSubview @path = new app.views.Path unless app.isSingleDoc() or app.isMobile()
14	15
15	16	@setTitle()
16	17	@activate()

@@ -0,0 +1,36 @@
	1	+class app.views.Path extends app.View
	2	+ @className: '_path'
	3	+
	4	+ @events:
	5	+ click: 'onClick'
	6	+
	7	+ @routes:
	8	+ after: 'afterRoute'
	9	+
	10	+ render: (args...) ->
	11	+ @show()
	12	+ @html @tmpl 'path', args...
	13	+
	14	+ show: ->
	15	+ $.prepend $('._app'), @el unless @el.parentNode
	16	+
	17	+ hide: ->
	18	+ $.remove @el if @el.parentNode
	19	+
	20	+ onClick: (event) =>
	21	+ @clicked = true if link = $.closestLink event.target, @el
	22	+
	23	+ afterRoute: (route, context) =>
	24	+ if context.type
	25	+ @render context.doc, context.type
	26	+ else if context.entry
	27	+ if context.entry.isIndex()
	28	+ @render context.doc
	29	+ else
	30	+ @render context.doc, context.entry.getType(), context.entry
	31	+ else
	32	+ @hide()
	33	+
	34	+ if @clicked
	35	+ @clicked = null
	36	+ app.document.sidebar.reset()

@@ -0,0 +1,50 @@
	1	+._path {
	2	+ position: absolute;
	3	+ z-index: $noticeZ;
	4	+ bottom: 0;
	5	+ left: $sidebarWidth;
	6	+ right: 0;
	7	+ height: 2rem;
	8	+ line-height: 2rem;
	9	+ padding: 0 .375rem;
	10	+ font-size: .875rem;
	11	+ text-shadow: 0 1px rgba(white, .5);
	12	+ background: #f5f5f7;
	13	+ box-shadow: inset 0 1px #d5d5da, // top border
	14	+ inset 0 2px rgba(white, .3), // top inner glow
	15	+ inset 1px 0 rgba(black, .03); // left inner shadow
	16	+
	17	+ @media #{$mediumScreen} { left: $sidebarMediumWidth; }
	18	+
	19	+ ~ ._container { padding-bottom: 2rem; }
	20	+}
	21	+
	22	+._path-item {
	23	+ position: relative;
	24	+ display: inline-block;
	25	+ vertical-align: top;
	26	+ margin: 0 1rem 0 0;
	27	+ padding: 0 .375rem;
	28	+ color: $textColor;
	29	+
	30	+ &:first-child:before {
	31	+ content: '';
	32	+ float: left;
	33	+ width: 1rem;
	34	+ height: 1rem;
	35	+ margin: .5rem .375rem 0 0;
	36	+ @extend %icon;
	37	+ }
	38	+
	39	+ & + &:after {
	40	+ content: '';
	41	+ position: absolute;
	42	+ top: 50%;
	43	+ right: 100%;
	44	+ width: 1rem;
	45	+ height: 1rem;
	46	+ margin: -.5rem 0 0 0;
	47	+ pointer-events: none;
	48	+ @extend %icon, %icon-path;
	49	+ }
	50	+}

@@ -49,3 +49,4 @@ · 48 unmodified lines
49	49	._icon-knockout:before { background-position: 0 -7rem; }
50	50	._icon-moment:before { background-position: -1rem -7rem; }
51	51	._icon-c:before { background-position: -2rem -7rem; }
	52	+%icon-path { background-position: -3rem -7rem; }

Binary file not shown.

Binary file not shown.