Skip to content
This repository was archived by the owner on Jan 24, 2019. It is now read-only.

Commit 14fd162

Browse files
k88hudsonk88hudson
committed
Merge pull request #68 from k88hudson/nav
Requesting a pull to mozilla:master from k88hudson:nav
2 parents 3e9b731 + 5e78a60 commit 14fd162

13 files changed

Lines changed: 484 additions & 39 deletions

File tree

‎bower.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"author": "@k88hudson",
44
"version": "0.1.8",
55
"dependencies": {
6-
"bootstrap": "3.1.1"
6+
"bootstrap": "3.1.1",
7+
"selectize": "0.10.1"
78
},
89
"ignore": [
910
"bower_components/",
@@ -13,4 +14,4 @@
1314
"Procfile",
1415
"package.json"
1516
]
16-
}
17+
}

‎demo/compiled/demo.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/github.min.css">
1111
<link rel="stylesheet" href="compiled/demo.css">
1212
</head>
13-
<body >
13+
<body class="angular">
1414
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="navController">
1515

1616
<div class="container">

‎demo/js/styleguide.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ angular.module('styleguide', ['ngRoute', 'ui.bootstrap', 'hljs'])
127127
"forms",
128128
"tables",
129129
"logo",
130-
"userInfo",
130+
"navs",
131131
"LESSMixins",
132132
"gallery"
133133
];

‎demo/less/demo.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import '../../less/makerstrap';
22
@makerstrap-bower-path: '../../bower_components';
33

4-
body {
4+
body.angular {
55
padding-top: 50px;
66
}
77

‎demo/nav.html‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<!doctype html>
2+
<html lang="en" ng-app="styleguide">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
5+
<meta charset="utf-8">
6+
<title>Makerstrap</title>
7+
8+
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
9+
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
10+
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/github.min.css">
11+
<link rel="stylesheet" href="compiled/demo.css">
12+
</head>
13+
<body>
14+
<nav class="navbar navbar-webmaker">
15+
<div class="container">
16+
<div class="navbar-header">
17+
<button class="navbar-toggle" nav-toggle>
18+
<span class="sr-only">Toggle navigation</span>
19+
<span class="fa fa-bars fa-lg"></span>
20+
</button>
21+
<a href="#" class="logo webmaker-logo">
22+
<img src="https://webmaker.org/img/logo.png">
23+
</a>
24+
</div>
25+
<div class="navbar-collapse collapse">
26+
<form class="navbar-form navbar-right">
27+
<select class="form-control selectize"></select>
28+
</form>
29+
<form class="navbar-form navbar-right" logged-out-only>
30+
<button data-log-in class="btn btn-primary">
31+
Sign in
32+
</button>
33+
</form>
34+
<ul class="nav navbar-nav navbar-right">
35+
<li class="dropdown" href="#" logged-in-only>
36+
<a class="navbar-user-info dropdown-toggle" data-toggle="dropdown">
37+
<img
38+
class="user-info-avatar"
39+
src="https://i1.wp.com/stuff.webmaker.org/avatars/webmaker-avatar-200x200.png">
40+
Hi <strong>webmaker123</strong>
41+
<span class="hidden label label-primary">admin</span>
42+
<span class="label label-info">supermentor</span>
43+
<span class="hidden label label-warning">mentor</span>
44+
<span class="caret"></span>
45+
</a>
46+
<ul class="dropdown-menu">
47+
<li><a href="#">
48+
<span class="fa fa-fw fa-th-large"></span> My makes
49+
</a></li>
50+
<li><a href="#">
51+
<span class="fa fa-fw fa-user"></span> My profile
52+
</a></li>
53+
<li><a href="#">
54+
<span class="fa fa-fw fa-cog"></span> My settings
55+
</a></li>
56+
<li class="divider"></li>
57+
<li><a href="#" data-log-out>
58+
<span class="fa fa-fw fa-sign-out"></span>Sign out
59+
</a></li>
60+
</ul>
61+
</li>
62+
</ul>
63+
</div>
64+
</div>
65+
</nav>
66+
67+
<!-- Secondary nav -->
68+
<nav class="navbar navbar-inverse navbar-no-header-xs">
69+
<div class="container">
70+
<div class="navbar-collapse collapse">
71+
<ul class="nav navbar-nav">
72+
<li class="nav-icon">
73+
<a href="#"><span class="fa fa-random"></span> Explore</a>
74+
</li>
75+
<li class="nav-icon">
76+
<a href="#"><span class="fa fa-book"></span> Resources</a>
77+
</li>
78+
</ul>
79+
</div>
80+
</div>
81+
</nav>
82+
83+
<!-- Tertiary nav -->
84+
<nav class="navbar navbar-no-header-xs navbar-tertiary">
85+
<div class="container">
86+
<div class="navbar-collapse collapse">
87+
<ul class="nav navbar-nav">
88+
<li class="hidden nav-icon nav-title">
89+
<a href="#">
90+
<span class="fa fa-random"></span> Explore
91+
</a>
92+
</li>
93+
<li class="active"><a href="#">Gallery</a></li>
94+
<li><a href="#">Badges</a></li>
95+
<li><a href="#">More</a></li>
96+
</ul>
97+
</div>
98+
</div>
99+
</nav>
100+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
101+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
102+
<script src="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.9.0/js/standalone/selectize.js"></script>
103+
<script type="text/javascript">
104+
// Sign in/out
105+
var $login = $('[data-log-in]');
106+
var $logout = $('[data-log-out]');
107+
var $loggedInOnly = $('[logged-in-only]');
108+
var $loggedOutOnly = $('[logged-out-only]');
109+
$logout.click(function (e) {
110+
e.preventDefault();
111+
$loggedInOnly.hide();
112+
$loggedOutOnly.show();
113+
});
114+
$login.click(function (e) {
115+
e.preventDefault();
116+
$loggedInOnly.show();
117+
$loggedOutOnly.hide();
118+
});
119+
$loggedOutOnly.hide();
120+
121+
// Collapse
122+
$('[nav-toggle]').click(function (e) {
123+
e.preventDefault();
124+
$('.navbar-collapse').toggleClass('collapse');
125+
});
126+
127+
// Language
128+
var href = window.location.pathname;
129+
var supportedLanguages = ['en-us', 'fr-ca'];
130+
var langmap = {
131+
'en-us': {
132+
nativeName: 'English',
133+
englishName: 'English'
134+
},
135+
'fr-ca': {
136+
nativeName: 'Français',
137+
englishName: 'French'
138+
}
139+
};
140+
var currentLang = 'en-us';
141+
var options = supportedLanguages.map(function (lang) {
142+
return {
143+
id: lang,
144+
title: langmap[lang] ? langmap[lang].nativeName : lang,
145+
english: langmap[lang] && langmap[lang].englishName
146+
};
147+
});
148+
var $select = $('.selectize').selectize({
149+
options: options,
150+
labelField: 'title',
151+
valueField: 'id',
152+
searchField: ['title', 'english'],
153+
onItemAdd: function (selectedLang) {
154+
var matchesLang;
155+
var matches = href.match(/([a-z]{2,3})([-]([a-zA-Z]{2}))?/);
156+
if (matches) {
157+
if (matches[1] && matches[2]) {
158+
matchesLang = matches[1].toLowerCase() + matches[2].toUpperCase();
159+
} else {
160+
matchesLang = matches[1].toLowerCase();
161+
}
162+
}
163+
//if the selected language matches the language in the header
164+
if (selectedLang === currentLang) {
165+
return;
166+
// check if we have any matches and they are exist in the array we have
167+
} else if ((matches && matches[0]) && supportedLanguages.indexOf(matchesLang) !== -1) {
168+
href = href.replace(matches[0], selectedLang);
169+
// This is where you might set window.location = href;
170+
console.log(href);
171+
} else if (href === '/') {
172+
// This is where you might set window.location = '/' + selectedLang;
173+
console.log('/' + selectedLang);
174+
} else {
175+
// This is where you might set window.location = '/' + selectedLang + href;
176+
console.log('/' + selectedLang + href);
177+
}
178+
}
179+
});
180+
var selectize = $select[0].selectize;
181+
selectize.setValue(currentLang);
182+
</script>
183+
</body>
184+
</html>

‎demo/views/docs.html‎

Lines changed: 85 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -484,49 +484,105 @@ <h1 id="logo" class="page-header" section>Logo</h1>
484484
</div>
485485

486486
<div class="container">
487-
<h1 id="userInfo" class="page-header" section>User Info</h1>
487+
<h1 id="navs" class="page-header" section>Navs</h1>
488+
489+
<h3>Webmaker nav</h3>
488490
</div>
489-
<nav class="navbar navbar-default" role="navigation">
491+
<nav class="navbar navbar-webmaker">
490492
<div class="container">
491-
492493
<div class="navbar-header">
493-
494-
<button type="button" class="navbar-toggle" ng-click="userbarCollapsed = !userbarCollapsed">
494+
<!-- toggle button for mobile -->
495+
<button class="navbar-toggle">
495496
<span class="sr-only">Toggle navigation</span>
496-
<span class="fa fa-bars fa-fw"></span>
497+
<span class="fa fa-bars fa-lg"></span>
497498
</button>
498-
499-
<a class="navbar-brand" href="#">App Name</a>
499+
<!-- logo -->
500+
<a href="#" class="logo webmaker-logo">
501+
<img src="https://webmaker.org/img/logo.png">
502+
</a>
500503
</div>
501-
502-
<div class="collapse navbar-collapse" collapse="userbarCollapsed">
503-
<ul class="nav navbar-nav navbar-left">
504-
<li><a>Link</a></li>
505-
<li><a>Other link</a></li>
506-
</ul>
507-
<ul class="nav navbar-nav navbar-right">
508-
509-
<!-- User info -->
510-
<li class="dropdown">
511-
<a class="navbar-user-info dropdown-toggle" type="button" data-toggle="dropdown">
512-
<img class="user-info-avatar" src="https://stuff.webmaker.org/avatars/webmaker-avatar-44x44.png">
513-
Username <span class="caret"></span>
504+
<div class="navbar-collapse">
505+
<!-- Sign in button -->
506+
<form ng-hide="navExLoggedIn" class="navbar-form navbar-right">
507+
<button ng-click="navExLoggedIn=true" class="btn btn-primary">Sign in</button>
508+
</form>
509+
<!-- User info -->
510+
<ul ng-show="navExLoggedIn" class="nav navbar-nav navbar-right">
511+
<li class="dropdown" href="#" logged-in-only>
512+
<a class="navbar-user-info dropdown-toggle" data-toggle="dropdown">
513+
<img
514+
class="user-info-avatar"
515+
src="https://i1.wp.com/stuff.webmaker.org/avatars/webmaker-avatar-200x200.png">
516+
Hi <strong>webmaker123</strong>
517+
<!-- labels for different user types -->
518+
<span class="hidden label label-primary">admin</span>
519+
<span class="label label-info">supermentor</span>
520+
<span class="hidden label label-warning">mentor</span>
521+
<span class="caret"></span>
514522
</a>
515-
<ul class="dropdown-menu" role="menu">
516-
<li><a href="#"><span class="fa fa-th-large"></span> My Makes</a></li>
517-
<li><a href="#"><span class="fa fa-cog"> Account Settings</a></li>
523+
<ul class="dropdown-menu">
524+
<li><a href="#"><span class="fa fa-fw fa-th-large"></span> My makes</a></li>
525+
<li><a href="#"><span class="fa fa-fw fa-user"></span> My profile</a></li>
526+
<li><a href="#"><span class="fa fa-fw fa-cog"></span> My settings</a></li>
518527
<li class="divider"></li>
519-
<li><a href="#"><span class="fa fa-sign-out"></span> Logout</a></li>
528+
<li><a href="#" ng-click="navExLoggedIn=false"><span class="fa fa-fw fa-sign-out"></span>Sign out</a></li>
520529
</ul>
521530
</li>
522-
<!-- end user info -->
523-
524531
</ul>
525-
</ul>
526-
532+
</div>
527533
</div>
528534
</nav>
529535

536+
<div class="container">
537+
<p class="alert alert-info">To see a more complete example including <strong>the language picker</strong> and secondary/tertiary navs, see <a href="./nav.html">nav.html</a></p>
538+
<div hljs>
539+
<nav class="navbar navbar-webmaker">
540+
<div class="container">
541+
<div class="navbar-header">
542+
<!-- toggle button for mobile -->
543+
<button class="navbar-toggle">
544+
<span class="sr-only">Toggle navigation</span>
545+
<span class="fa fa-bars fa-lg"></span>
546+
</button>
547+
<!-- logo -->
548+
<a href="#" class="logo webmaker-logo">
549+
<img src="https://webmaker.org/img/logo.png">
550+
</a>
551+
</div>
552+
<div class="navbar-collapse">
553+
<!-- Sign in button - you should hide this when the user is logged in. -->
554+
<form class="navbar-form navbar-right">
555+
<button data-log-in class="btn btn-primary">Sign in</button>
556+
</form>
557+
<!-- User info - you should only show this when the user is logged in -->
558+
<ul class="nav navbar-nav navbar-right">
559+
<li class="dropdown" href="#">
560+
<a class="navbar-user-info dropdown-toggle" data-toggle="dropdown">
561+
<img
562+
class="user-info-avatar"
563+
src="https://i1.wp.com/stuff.webmaker.org/avatars/webmaker-avatar-200x200.png">
564+
Hi <strong>webmaker123</strong>
565+
<!-- labels for different user types -->
566+
<span class="hidden label label-primary">admin</span>
567+
<span class="label label-info">supermentor</span>
568+
<span class="hidden label label-warning">mentor</span>
569+
<span class="caret"></span>
570+
</a>
571+
<ul class="dropdown-menu">
572+
<li><a href="#"><span class="fa fa-fw fa-th-large"></span> My makes</a></li>
573+
<li><a href="#"><span class="fa fa-fw fa-user"></span> My profile</a></li>
574+
<li><a href="#"><span class="fa fa-fw fa-cog"></span> My settings</a></li>
575+
<li class="divider"></li>
576+
<li><a href="#"><span class="fa fa-fw fa-sign-out"></span>Sign out</a></li>
577+
</ul>
578+
</li>
579+
</ul>
580+
</div>
581+
</div>
582+
</nav>
583+
</div>
584+
</div>
585+
530586
<div class="container">
531587
<h1 id="LESSMixins" class="page-header" section>LESS Mixins</h1>
532588
</div>

‎dist/makerstrap.complete.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/makerstrap.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎less/custom-components/selectize.less‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*********************************************************
2+
* Selectize
3+
*/
4+
5+
.navbar-form .selectize-control.form-control {
6+
min-width: 160px;
7+
.selectize-input {
8+
padding-right: 25px;
9+
&:after {
10+
right: 8px;
11+
}
12+
}
13+
}

0 commit comments

Comments
 (0)