Skip to content

Commit 0e2da4b

Browse files
vctrfrnndzvctrfrnndz
committed
Navigation refactor
1 parent 81ac294 commit 0e2da4b

9 files changed

Lines changed: 208 additions & 197 deletions

File tree

‎landing/includes/components.jade‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
#components(data-group, style='background-color: #fafafa')
1+
#components(data-group="Components", style='background-color: #fafafa')
22

33
+header('Components')
44

55
section.content-styleguide
66

77
section
88

9-
h2 Header
9+
h2#header Header
1010
p Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
1111

1212
+playground()
1313
include ../../lib/header/demo
1414

1515
section
1616

17-
h2 Footer
17+
h2#footer Footer
1818
p Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
1919

2020
+playground(320)

‎landing/includes/design.jade‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
#design(data-group)
1+
#design(data-group="Design")
22

33
+header('Design')
44

@@ -7,75 +7,75 @@
77

88
section
99

10-
h2 Primary Colors
10+
h2#primary-colors Primary Colors
1111
p Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
1212

1313
.row
1414

1515
.col-xs-3
16-
.color.color-red
16+
.js-color.color.color-red
1717
span.color-info
1818
strong Color Red
19-
| #eb5424
19+
span(data-hex) #eb5424
2020

2121
.col-xs-3
22-
.color.color-blue-light
22+
.js-color.color.color-blue-light
2323
span.color-info
2424
strong Color Light Blue
25-
| #44c7f4
25+
span(data-hex) #44c7f4
2626

2727
.col-xs-3
28-
.color.color-blue
28+
.js-color.color.color-blue
2929
span.color-info
3030
strong Color Blue
31-
| #16214d
31+
span(data-hex) #16214d
3232

3333
.col-xs-3
34-
.color.color-yellow
34+
.js-color.color.color-yellow
3535
span.color-info
3636
strong Color Yellow
37-
| #eaca2c
37+
span(data-hex) #eaca2c
3838

3939
section
4040

41-
h2 Secondary Colors
41+
h2#secondary-colors Secondary Colors
4242
p Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
4343

4444
.row
4545

4646
.col-xs-3
47-
.color.color-orange
47+
.js-color.color.color-orange
4848
span.color-info
4949
strong Color Orange
50-
| #ff9a57
50+
span(data-hex) #ff9a57
5151

5252
.col-xs-3
53-
.color.color-oil
53+
.js-color.color.color-oil
5454
span.color-info
5555
strong Color Oil
56-
| #5c666f
56+
span(data-hex) #5c666f
5757

5858
.col-xs-3
59-
.color.color-green
59+
.js-color.color.color-green
6060
span.color-info
6161
strong Color Green
62-
| #01b48f
62+
span(data-hex) #01b48f
6363

6464
.col-xs-3
65-
.color.color-grey
65+
.js-color.color.color-grey
6666
span.color-info
6767
strong Color Grey
68-
| #d0d2d3
68+
span(data-hex) #d0d2d3
6969

7070
.col-xs-3
71-
.color.color-pink
71+
.js-color.color.color-pink
7272
span.color-info
7373
strong Color Pink
74-
| #c879b2
74+
span(data-hex) #c879b2
7575

7676
section
7777

78-
h2 Background Colors
78+
h2#bg-colors Background Colors
7979
p Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
8080

8181
.row
@@ -84,29 +84,29 @@
8484
.color.bg-color-blue-dark
8585
span.color-info
8686
strong Color Dark Blue
87-
| #222228
87+
span(data-hex) #222228
8888

8989
.col-xs-3
9090
.color.bg-color-oil
9191
span.color-info
9292
strong Color Oil
93-
| #5c666f
93+
span(data-hex) #5c666f
9494

9595
.col-xs-3
9696
.color.bg-color-grey
9797
span.color-info
9898
strong Color Grey Alt
99-
| #e3e5e7
99+
span(data-hex) #e3e5e7
100100

101101
.col-xs-3
102102
.color.bg-color-grey-light
103103
span.color-info
104104
strong Color Grey Light
105-
| #f5f7f9
105+
span(data-hex) #f5f7f9
106106

107107
section
108108

109-
h2 Color hues
109+
h2#color-hues Color hues
110110
p Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
111111

112112
.row

‎landing/includes/getting-started.jade‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
#getting-started(data-group)
1+
#getting-started(data-group="Getting Started" class="is-current")
22
+header('Getting Started')
33

44
section.content-styleguide
55

6-
h2 Why Styleguide?
6+
h2#why-styleguide Why Styleguide?
77
p Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
88
pre.prettyprint <link href="https://cdn.auth0.com/styleguide/latest/index.css" rel="stylesheet" />
99

1010
br
1111

12-
h2 From CDN
12+
h2#from-cdn From CDN
1313
p Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
1414
pre.prettyprint npm install styleguide
1515

1616
br
1717

18-
h2 Installing from Github
18+
h2#from-gh Installing from Github
1919
p Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

‎landing/includes/resources.jade‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
#resources(data-group)
1+
#resources(data-group="Resources")
22
+header('Resources')
33

44
include ../../lib/budicon/budicon

‎landing/includes/sidebar.jade‎

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,12 @@
1-
aside.aside-styleguide(role='complementary')
1+
div.aside-styleguide(role='complementary')
22

33
header.header
44
h1
55
a(href='#', title='Go to Auth0!')
66
img(src='https://cdn.auth0.com/styleguide/1.0.0/img/badge.png', alt='Auth0 badge', width='30', height='')
77

88
nav.nav-styleguide
9-
ul.nav-styleguide-list
10-
li
11-
a(href='#getting-started')
12-
span.icon.icon-budicon-464(aria-hidden='true')
13-
| Getting started
14-
li
15-
a(href='#design')
16-
span.icon.icon-budicon-258(aria-hidden='true')
17-
| Design
18-
.in
19-
ul.nav-styleguide-in-list
20-
li: a(href='#') Typography
21-
li: a(href='#') Colors
22-
li: a(href='#') Grid system
23-
li: a(href='#') Something
24-
li: a(href='#') Colors
25-
li
26-
a(href='#components')
27-
span.icon.icon-budicon-690(aria-hidden='true')
28-
| Components
29-
li
30-
a(href='#resources')
31-
span.icon.icon-budicon-845(aria-hidden='true')
32-
| Resources
9+
ul(data-accordion-group)
3310

3411
footer.footer
3512
span#styleguide-version

‎landing/includes/utils/mixins.jade‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,14 @@ mixin header(title, img, description)
66

77

88
mixin playground(height)
9-
.playground.js-playground
9+
.playground
1010
.playground-options
1111
button.dark-option.is-active(name='', type='') Dark
1212
button.light-option(name='', type='') Light
13-
.playground-real-component.hide
13+
.playground-canvas
1414
if block
1515
block
16-
.playground-canvas
17-
iframe(scrolling='no', style!='height:' + (height || '200px') + ';').playground-showcase
16+
1817
ul.playground-actions
1918
li.is-active: a(href='#') Show code
2019
li: a(href='#') Copy HTML

‎landing/index.jade‎

Lines changed: 80 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,101 @@ html
99
link(href='landing.css', rel='stylesheet')
1010
link(rel="shortcut icon", href="img/favicon.png")
1111
script(type='text/javascript', src='//cdn.auth0.com/web-header/latest/standalone.min.js')
12+
script(src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js")
1213

1314
body
1415
include includes/utils/mixins
1516

1617
.container-styleguide
1718
include includes/sidebar
1819

19-
main.main-content-styleguide(role='main')
20+
div.main-content-styleguide(role='main')
2021
include includes/getting-started
2122
include includes/design
2223
include includes/components
2324
include includes/resources
2425

2526
script(src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js")
26-
script(src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js")
2727
script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js")
28+
script(src="//cdn.rawgit.com/vctrfrnndz/jquery-accordion/master/js/jquery.accordion.js")
29+
2830
script.
31+
function navigation() {
32+
33+
$(window).on('hashchange', setSelected);
34+
35+
function buildNav() {
36+
var $nav = $('.nav-styleguide ul');
37+
38+
$nav.html('');
39+
40+
$('[data-group]').each(function(i) {
41+
var $group = $(this);
42+
var name = $group.attr('data-group');
43+
var id = $group.attr('id');
44+
var tpl = [
45+
'<li data-accordion class="'+ ((i === 0) ? 'open' : '') +'"><a class="'+ ((i === 0) ? 'is-current' : '') +'" href="#'+ id +'">',
46+
name,
47+
'</a></li>'
48+
].join('');
49+
50+
var $item = $(tpl);
51+
52+
if($group.find('h2[id]').length) {
53+
var $list = $('<ul></ul>');
54+
55+
$group.find('h2[id]').each(function(i) {
56+
var name = $(this).text();
57+
var id = $(this).attr('id') || 'foo';
58+
59+
$list.append('<li><a href="#'+ id + '">' + name + '</li>');
60+
61+
$item.append($list);
62+
});
63+
}
64+
65+
return $nav.append($item);
66+
});
67+
}
68+
69+
function setSelected(hash) {
70+
var hash = location.hash || hash;
71+
var activeClass = 'is-current';
72+
var $section = $(hash + '[data-group]');
73+
var $subSection = $(hash).closest('[data-group]');
74+
var $navItem = $('.nav-styleguide a[href="' + hash + '"]');
75+
76+
$('[data-group], .nav-styleguide a').removeClass(activeClass);
77+
78+
if(hash.length) {
79+
$('[data-accordion]').removeClass('open');
80+
}
81+
82+
if($section.length) {
83+
$section.addClass(activeClass);
84+
} else if ($subSection.length) {
85+
$subSection.addClass(activeClass);
86+
}
87+
88+
$navItem.addClass(activeClass);
89+
$navItem.closest('[data-accordion]').addClass('open');
90+
}
91+
92+
buildNav();
93+
setSelected(location.hash);
94+
}
95+
96+
navigation();
97+
98+
function accordions() {
99+
$('[data-accordion]').accordion({
100+
controlElement: 'a',
101+
contentElement: 'ul'
102+
});
103+
}
104+
105+
accordions();
106+
29107
function playground() {
30108
var $module = $('.js-playground');
31109

0 commit comments

Comments
 (0)