Skip to content

Commit e56744d

Browse files
vctrfrnndzvctrfrnndz
committed
More fixes
1 parent 7d0434e commit e56744d

8 files changed

Lines changed: 164 additions & 147 deletions

File tree

‎Gruntfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ module.exports = function (grunt) {
4848
copy: {
4949
main: {
5050
files: [
51-
{ expand: true, src: ['lib/**/*', '!**/*.styl', '!**/*.jade'], dest: 'build', filter: 'isFile'}
51+
{ expand: true, src: ['lib/**/*', '!**/*.styl', '!**/*.jade', 'landing/index.js'], dest: 'build', filter: 'isFile'}
5252
]
5353
}
5454
},

‎landing/includes/design.jade‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,25 @@
1212

1313
.row
1414

15-
.col-xs-3
15+
.col-xs-12.col-sm-6.col-md-3
1616
.js-color.color.color-red
1717
span.color-info
1818
strong Color Red
1919
span(data-hex) #eb5424
2020

21-
.col-xs-3
21+
.col-xs-12.col-sm-6.col-md-3
2222
.js-color.color.color-blue-light
2323
span.color-info
2424
strong Color Light Blue
2525
span(data-hex) #44c7f4
2626

27-
.col-xs-3
27+
.col-xs-12.col-sm-6.col-md-3
2828
.js-color.color.color-blue
2929
span.color-info
3030
strong Color Blue
3131
span(data-hex) #16214d
3232

33-
.col-xs-3
33+
.col-xs-12.col-sm-6.col-md-3
3434
.js-color.color.color-yellow
3535
span.color-info
3636
strong Color Yellow
@@ -43,31 +43,31 @@
4343

4444
.row
4545

46-
.col-xs-3
46+
.col-xs-12.col-sm-6.col-md-3
4747
.js-color.color.color-orange
4848
span.color-info
4949
strong Color Orange
5050
span(data-hex) #ff9a57
5151

52-
.col-xs-3
52+
.col-xs-12.col-sm-6.col-md-3
5353
.js-color.color.color-oil
5454
span.color-info
5555
strong Color Oil
5656
span(data-hex) #5c666f
5757

58-
.col-xs-3
58+
.col-xs-12.col-sm-6.col-md-3
5959
.js-color.color.color-green
6060
span.color-info
6161
strong Color Green
6262
span(data-hex) #01b48f
6363

64-
.col-xs-3
64+
.col-xs-12.col-sm-6.col-md-3
6565
.js-color.color.color-grey
6666
span.color-info
6767
strong Color Grey
6868
span(data-hex) #d0d2d3
6969

70-
.col-xs-3
70+
.col-xs-12.col-sm-6.col-md-3
7171
.js-color.color.color-pink
7272
span.color-info
7373
strong Color Pink
@@ -80,25 +80,25 @@
8080

8181
.row
8282

83-
.col-xs-3
83+
.col-xs-12.col-sm-6.col-md-3
8484
.color.bg-color-blue-dark
8585
span.color-info
8686
strong Color Dark Blue
8787
span(data-hex) #222228
8888

89-
.col-xs-3
89+
.col-xs-12.col-sm-6.col-md-3
9090
.color.bg-color-oil
9191
span.color-info
9292
strong Color Oil
9393
span(data-hex) #5c666f
9494

95-
.col-xs-3
95+
.col-xs-12.col-sm-6.col-md-3
9696
.color.bg-color-grey
9797
span.color-info
9898
strong Color Grey Alt
9999
span(data-hex) #e3e5e7
100100

101-
.col-xs-3
101+
.col-xs-12.col-sm-6.col-md-3
102102
.color.bg-color-grey-light
103103
span.color-info
104104
strong Color Grey Light

‎landing/includes/sidebar.jade‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
div.aside-styleguide(role='complementary')
2-
32
header.header
43
h1
54
a(href='#', title='Go to Auth0!')
65
img(src='https://cdn.auth0.com/styleguide/1.0.0/img/badge.png', alt='Auth0 badge', width='30', height='')
6+
7+
button.navbar-toggle(data-toggle="collapse", data-target="#menu")
8+
span.sr-only Toggle navigation
9+
span.icon-bar
10+
span.icon-bar
11+
span.icon-bar
12+
13+
#menu.collapse
14+
nav.nav-styleguide
15+
ul(data-accordion-group)
716

8-
nav.nav-styleguide
9-
ul(data-accordion-group)
10-
11-
footer.footer
12-
span#styleguide-version
13-
| Version #{version}
17+
footer.footer
18+
span#styleguide-version
19+
| Version #{version}

‎landing/includes/utils/mixins.jade‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ mixin header(title, img, description)
88
mixin playground(height)
99
.playground
1010
.playground-options
11-
button.dark-option.is-active(name='', type='') Dark
12-
button.light-option(name='', type='') Light
11+
button.light-option.is-active(name='', type='') Light
12+
button.dark-option(name='', type='') Dark
13+
1314
.playground-canvas
1415
if block
1516
block

‎landing/index.jade‎

Lines changed: 1 addition & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -26,112 +26,4 @@ html
2626
script(src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js")
2727
script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js")
2828
script(src="//cdn.rawgit.com/vctrfrnndz/jquery-accordion/master/js/jquery.accordion.js")
29-
30-
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-
107-
function playground() {
108-
var $module = $('.js-playground');
109-
110-
function setFrame($iframe, content) {
111-
$iframe.get(0).src = "data:text/html;charset=utf-8," + escape(content);
112-
}
113-
114-
function cleanFrames(html) {
115-
html.find('iframe').remove();
116-
117-
return html;
118-
}
119-
120-
function convertChars(str) {
121-
str = str.replace('©', '&copy;');
122-
123-
return str;
124-
}
125-
126-
$module.each(function() {
127-
var $component = $(this);
128-
var http = location.protocol;
129-
var dom = cleanFrames($('.playground-real-component', $component));
130-
var scripts = '<script src\="' + http + '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"><\/script><script src\="' + http + '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"><\/script>';
131-
var html = '<html><head><link href="' + location.origin + '/index.css" rel="stylesheet"></head><body>' + convertChars(dom.html()) + scripts + '</body></html>';
132-
133-
setFrame($('iframe', $component), html);
134-
});
135-
};
136-
137-
playground();
29+
script(src="landing/index.js")

‎landing/index.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
function navigation() {
2+
$(window).on('hashchange', setSelected);
3+
$('#menu .collapse').on('hidden.bs.collapse', setSelected)
4+
5+
function buildNav() {
6+
var $nav = $('.nav-styleguide ul');
7+
8+
$nav.html('');
9+
10+
$('[data-group]').each(function(i) {
11+
var $group = $(this);
12+
var name = $group.attr('data-group');
13+
var id = $group.attr('id');
14+
var tpl = [
15+
'<li data-accordion class="'+ ((i === 0) ? 'open' : '') +'"><a class="'+ ((i === 0) ? 'is-current' : '') +'" href="#'+ id +'">',
16+
name,
17+
'</a></li>'
18+
].join('');
19+
20+
var $item = $(tpl);
21+
22+
if($group.find('h2[id]').length) {
23+
var $list = $('<ul></ul>');
24+
25+
$group.find('h2[id]').each(function(i) {
26+
var name = $(this).text();
27+
var id = $(this).attr('id') || 'foo';
28+
29+
$list.append('<li><a href="#'+ id + '">' + name + '</li>');
30+
31+
$item.append($list);
32+
});
33+
}
34+
35+
return $nav.append($item);
36+
});
37+
}
38+
39+
function setSelected(hash) {
40+
var hash = location.hash || hash;
41+
var activeClass = 'is-current';
42+
var $section = $(hash + '[data-group]');
43+
var $subSection = $(hash).closest('[data-group]');
44+
var $navItem = $('.nav-styleguide a[href="' + hash + '"]');
45+
46+
$('[data-group], .nav-styleguide a').removeClass(activeClass);
47+
48+
$('#menu').collapse('hide');
49+
50+
if(hash.length) {
51+
$('[data-accordion]').removeClass('open');
52+
}
53+
54+
if($section.length) {
55+
$section.addClass(activeClass);
56+
} else if ($subSection.length) {
57+
$subSection.addClass(activeClass);
58+
}
59+
60+
$navItem.addClass(activeClass);
61+
$navItem.closest('[data-accordion]').addClass('open');
62+
}
63+
64+
buildNav();
65+
setSelected(location.hash);
66+
}
67+
68+
navigation();
69+
70+
function accordions() {
71+
$('.nav-styleguide [data-accordion]').accordion({
72+
controlElement: 'a',
73+
contentElement: 'ul'
74+
});
75+
}
76+
77+
accordions();
78+
79+
function playground() {
80+
var $module = $('.js-playground');
81+
};
82+
83+
playground();

0 commit comments

Comments
 (0)