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.

   result
 app.news = [
-  [ 1393027200000, # February 22, 2013
+  [ 1394236800000, # March 8, 2013
+    """ Added path bar. """,
+  ], [
+    1393027200000, # February 22, 2013
     """ New <a href="/c/">C</a> documentation """,
   ], [
     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	@addSubview @nav = new app.views.Nav,	11	@addSubview @nav = new app.views.Nav,
12	@addSubview @sidebar = new app.views.Sidebar	12	@addSubview @sidebar = new app.views.Sidebar
13	@addSubview @content = new app.views.Content	13	@addSubview @content = new app.views.Content
		14	@addSubview @path = new app.views.Path unless app.isSingleDoc() or app.isMobile()
14		15
15	@setTitle()	16	@setTitle()
16	@activate()	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	._icon-knockout:before { background-position: 0 -7rem; }	49	._icon-knockout:before { background-position: 0 -7rem; }
50	._icon-moment:before { background-position: -1rem -7rem; }	50	._icon-moment:before { background-position: -1rem -7rem; }
51	._icon-c:before { background-position: -2rem -7rem; }	51	._icon-c:before { background-position: -2rem -7rem; }
		52	%icon-path { background-position: -3rem -7rem; }

Binary file not shown.

Binary file not shown.