Skip to content

Commit

Permalink
Prettify all the things
Browse files Browse the repository at this point in the history
  • Loading branch information
@barrymcgee
barrymcgee committed Feb 1, 2019
1 parent 22b6718 commit 0524ac2
Show file tree
Hide file tree
Showing 9 changed files with 507 additions and 286 deletions.
4 changes: 4 additions & 0 deletions .prettierrc
View file
@@ -0,0 +1,4 @@
{
"singleQuote": true,
"trailingComma": es5
}
16 changes: 10 additions & 6 deletions README.md
View file
Expand Up @@ -8,16 +8,18 @@ Simply use a node pacakage manager to install this component and then link the J

1. Install via yarn or npm

``` bash
```bash
yarn add global-nav
npm install global-nav --save
```

2. Add a link to the JS file and run the `canonicalGlobalNav.createNav()` function

``` html
```html
<script src="/node_modules/global-nav/dist/index.js"></script>
<script>canonicalGlobalNav.createNav();</script>
<script>
canonicalGlobalNav.createNav();
</script>
```

### Options
Expand All @@ -29,9 +31,11 @@ The `createNav` function takes an object of options with the following propertie

For example, to use the global-nav without the "login" section, and set the `max-width` to `80rem`:

``` html
```html
<script src="/node_modules/global-nav/dist/index.js"></script>
<script>canonicalGlobalNav.createNav({showLogins: false, maxWidt: '80rem'});</script>
<script>
canonicalGlobalNav.createNav({ showLogins: false, maxWidt: '80rem' });
</script>
```

## Building the Global nav
Expand Down Expand Up @@ -64,4 +68,4 @@ If you would like to help improve this project, here is a list of commands to he

Code licensed LGPLv3 by Canonical Ltd.

With ♥ from Canonical
With ♥ from Canonical
12 changes: 2 additions & 10 deletions bower.json
View file
Expand Up @@ -2,17 +2,9 @@
"name": "canonical-global-nav",
"description": "A script and stylesheet that displays the Canonical global nav across the top of a site",
"main": "src/js/global.js",
"authors": [
"Anthony Dillon"
],
"authors": ["Anthony Dillon"],
"license": "ISC",
"homepage": "https://github.com/canonical-webteam/global-nav",
"moduleType": [],
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
"ignore": ["**/.*", "node_modules", "bower_components", "test", "tests"]
}
200 changes: 144 additions & 56 deletions index.html
View file
@@ -1,58 +1,146 @@
<!doctype html>
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Canonical global navigation demo</title>
<meta name="description" content="Canonical global navigation demo">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
display: block;
height: 100%;
margin: 0;
width: 100%;
}
</style>
</head>
<body>
<h1>Page content</h1>
<p>This is the demo of the global navigation project for Canonicals websites.</p>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non mi justo. Mauris nisi neque, posuere sed consequat vel, aliquet id nulla. Aliquam nec velit elit. Nam eu sapien nisl. Morbi mattis viverra leo a lobortis. Aenean at nisl lobortis, tristique odio ac, porta massa. Curabitur vehicula malesuada turpis in varius. Pellentesque leo neque, vehicula sed porttitor eu, hendrerit vel lacus. Suspendisse suscipit ultricies erat id facilisis. Ut hendrerit vitae ex nec convallis.
</p>
<p>
Nunc scelerisque, mi vitae fringilla euismod, arcu nisl dignissim neque, nec accumsan ante risus ut ipsum. Pellentesque vulputate odio turpis. Nunc sed semper dui, ut tempor nulla. Nullam consectetur fermentum ligula eu eleifend. Morbi ullamcorper gravida mauris. Cras sed massa eu ante convallis pulvinar. Pellentesque interdum sollicitudin elit, et efficitur purus varius vitae. Morbi euismod faucibus sapien id laoreet. Quisque euismod est bibendum lorem ultricies, nec facilisis nibh lobortis. Fusce in tempor justo, ut mollis orci. Sed sem purus, tristique a magna sit amet, sollicitudin lobortis ipsum. Proin mauris eros, pretium at magna ac, rhoncus tristique nulla.
</p>
<p>
Nullam blandit purus et nulla vehicula, sit amet convallis erat ullamcorper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum dignissim placerat velit in mollis. Quisque sed magna nisi. Praesent varius congue felis sit amet scelerisque. Phasellus purus lorem, porta sit amet eleifend et, dapibus imperdiet erat. Nunc dictum nibh quis convallis imperdiet. Praesent ut diam eget eros auctor sollicitudin nec id urna. In ante nisl, facilisis vitae mauris in, faucibus fringilla justo. Nunc rhoncus purus et tellus imperdiet finibus.
</p>
<p>
Quisque ullamcorper eros mauris, non eleifend leo sagittis nec. Aenean ut ex id lorem sagittis dapibus. Pellentesque consequat sapien erat, quis cursus augue ultrices in. Mauris nec venenatis nisi. Integer gravida semper elit sagittis finibus. Vestibulum convallis odio et leo imperdiet, non molestie eros posuere. Quisque egestas nulla a libero pretium, nec pulvinar mauris vestibulum. Pellentesque vehicula dolor nulla, eu feugiat dolor tempor congue. Duis id tincidunt quam. In hac habitasse platea dictumst. Mauris tempus tortor eget sapien ultrices egestas. Nulla facilisi. Nulla hendrerit quis ante a viverra. Maecenas eu egestas libero.
</p>
<p>
Curabitur ut lacus vitae massa congue sagittis vitae blandit magna. Fusce pharetra arcu risus, a tempor tortor convallis vitae. Sed varius fermentum metus, id placerat eros hendrerit ullamcorper. Suspendisse porta felis odio, eu sollicitudin dui tristique ut. Ut ullamcorper leo nec sodales tempus. Nunc porttitor et libero in dignissim. Proin euismod eleifend erat. Vivamus nec aliquam ex. Ut aliquet venenatis diam, vitae sollicitudin ligula suscipit vel. Suspendisse et justo sapien. Etiam eleifend mauris non orci fringilla vulputate. Ut imperdiet magna faucibus, sagittis ex eu, sagittis tellus. Vestibulum faucibus vestibulum arcu non dictum. Nullam quis volutpat arcu, sit amet viverra ante.
</p>
</div>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non mi justo. Mauris nisi neque, posuere sed consequat vel, aliquet id nulla. Aliquam nec velit elit. Nam eu sapien nisl. Morbi mattis viverra leo a lobortis. Aenean at nisl lobortis, tristique odio ac, porta massa. Curabitur vehicula malesuada turpis in varius. Pellentesque leo neque, vehicula sed porttitor eu, hendrerit vel lacus. Suspendisse suscipit ultricies erat id facilisis. Ut hendrerit vitae ex nec convallis.
</p>
<p>
Nunc scelerisque, mi vitae fringilla euismod, arcu nisl dignissim neque, nec accumsan ante risus ut ipsum. Pellentesque vulputate odio turpis. Nunc sed semper dui, ut tempor nulla. Nullam consectetur fermentum ligula eu eleifend. Morbi ullamcorper gravida mauris. Cras sed massa eu ante convallis pulvinar. Pellentesque interdum sollicitudin elit, et efficitur purus varius vitae. Morbi euismod faucibus sapien id laoreet. Quisque euismod est bibendum lorem ultricies, nec facilisis nibh lobortis. Fusce in tempor justo, ut mollis orci. Sed sem purus, tristique a magna sit amet, sollicitudin lobortis ipsum. Proin mauris eros, pretium at magna ac, rhoncus tristique nulla.
</p>
<p>
Nullam blandit purus et nulla vehicula, sit amet convallis erat ullamcorper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum dignissim placerat velit in mollis. Quisque sed magna nisi. Praesent varius congue felis sit amet scelerisque. Phasellus purus lorem, porta sit amet eleifend et, dapibus imperdiet erat. Nunc dictum nibh quis convallis imperdiet. Praesent ut diam eget eros auctor sollicitudin nec id urna. In ante nisl, facilisis vitae mauris in, faucibus fringilla justo. Nunc rhoncus purus et tellus imperdiet finibus.
</p>
<p>
Quisque ullamcorper eros mauris, non eleifend leo sagittis nec. Aenean ut ex id lorem sagittis dapibus. Pellentesque consequat sapien erat, quis cursus augue ultrices in. Mauris nec venenatis nisi. Integer gravida semper elit sagittis finibus. Vestibulum convallis odio et leo imperdiet, non molestie eros posuere. Quisque egestas nulla a libero pretium, nec pulvinar mauris vestibulum. Pellentesque vehicula dolor nulla, eu feugiat dolor tempor congue. Duis id tincidunt quam. In hac habitasse platea dictumst. Mauris tempus tortor eget sapien ultrices egestas. Nulla facilisi. Nulla hendrerit quis ante a viverra. Maecenas eu egestas libero.
</p>
<p>
Curabitur ut lacus vitae massa congue sagittis vitae blandit magna. Fusce pharetra arcu risus, a tempor tortor convallis vitae. Sed varius fermentum metus, id placerat eros hendrerit ullamcorper. Suspendisse porta felis odio, eu sollicitudin dui tristique ut. Ut ullamcorper leo nec sodales tempus. Nunc porttitor et libero in dignissim. Proin euismod eleifend erat. Vivamus nec aliquam ex. Ut aliquet venenatis diam, vitae sollicitudin ligula suscipit vel. Suspendisse et justo sapien. Etiam eleifend mauris non orci fringilla vulputate. Ut imperdiet magna faucibus, sagittis ex eu, sagittis tellus. Vestibulum faucibus vestibulum arcu non dictum. Nullam quis volutpat arcu, sit amet viverra ante.
</p>
</div>
<script src="dist/index.js"></script>
<script>canonicalGlobalNav.createNav();</script>
</body>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Canonical global navigation demo</title>
<meta name="description" content="Canonical global navigation demo" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
display: block;
height: 100%;
margin: 0;
width: 100%;
}
</style>
</head>
<body>
<h1>Page content</h1>
<p>
This is the demo of the global navigation project for Canonicals websites.
</p>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non mi
justo. Mauris nisi neque, posuere sed consequat vel, aliquet id nulla.
Aliquam nec velit elit. Nam eu sapien nisl. Morbi mattis viverra leo a
lobortis. Aenean at nisl lobortis, tristique odio ac, porta massa.
Curabitur vehicula malesuada turpis in varius. Pellentesque leo neque,
vehicula sed porttitor eu, hendrerit vel lacus. Suspendisse suscipit
ultricies erat id facilisis. Ut hendrerit vitae ex nec convallis.
</p>
<p>
Nunc scelerisque, mi vitae fringilla euismod, arcu nisl dignissim neque,
nec accumsan ante risus ut ipsum. Pellentesque vulputate odio turpis.
Nunc sed semper dui, ut tempor nulla. Nullam consectetur fermentum
ligula eu eleifend. Morbi ullamcorper gravida mauris. Cras sed massa eu
ante convallis pulvinar. Pellentesque interdum sollicitudin elit, et
efficitur purus varius vitae. Morbi euismod faucibus sapien id laoreet.
Quisque euismod est bibendum lorem ultricies, nec facilisis nibh
lobortis. Fusce in tempor justo, ut mollis orci. Sed sem purus,
tristique a magna sit amet, sollicitudin lobortis ipsum. Proin mauris
eros, pretium at magna ac, rhoncus tristique nulla.
</p>
<p>
Nullam blandit purus et nulla vehicula, sit amet convallis erat
ullamcorper. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Vestibulum dignissim placerat velit in
mollis. Quisque sed magna nisi. Praesent varius congue felis sit amet
scelerisque. Phasellus purus lorem, porta sit amet eleifend et, dapibus
imperdiet erat. Nunc dictum nibh quis convallis imperdiet. Praesent ut
diam eget eros auctor sollicitudin nec id urna. In ante nisl, facilisis
vitae mauris in, faucibus fringilla justo. Nunc rhoncus purus et tellus
imperdiet finibus.
</p>
<p>
Quisque ullamcorper eros mauris, non eleifend leo sagittis nec. Aenean
ut ex id lorem sagittis dapibus. Pellentesque consequat sapien erat,
quis cursus augue ultrices in. Mauris nec venenatis nisi. Integer
gravida semper elit sagittis finibus. Vestibulum convallis odio et leo
imperdiet, non molestie eros posuere. Quisque egestas nulla a libero
pretium, nec pulvinar mauris vestibulum. Pellentesque vehicula dolor
nulla, eu feugiat dolor tempor congue. Duis id tincidunt quam. In hac
habitasse platea dictumst. Mauris tempus tortor eget sapien ultrices
egestas. Nulla facilisi. Nulla hendrerit quis ante a viverra. Maecenas
eu egestas libero.
</p>
<p>
Curabitur ut lacus vitae massa congue sagittis vitae blandit magna.
Fusce pharetra arcu risus, a tempor tortor convallis vitae. Sed varius
fermentum metus, id placerat eros hendrerit ullamcorper. Suspendisse
porta felis odio, eu sollicitudin dui tristique ut. Ut ullamcorper leo
nec sodales tempus. Nunc porttitor et libero in dignissim. Proin euismod
eleifend erat. Vivamus nec aliquam ex. Ut aliquet venenatis diam, vitae
sollicitudin ligula suscipit vel. Suspendisse et justo sapien. Etiam
eleifend mauris non orci fringilla vulputate. Ut imperdiet magna
faucibus, sagittis ex eu, sagittis tellus. Vestibulum faucibus
vestibulum arcu non dictum. Nullam quis volutpat arcu, sit amet viverra
ante.
</p>
</div>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non mi
justo. Mauris nisi neque, posuere sed consequat vel, aliquet id nulla.
Aliquam nec velit elit. Nam eu sapien nisl. Morbi mattis viverra leo a
lobortis. Aenean at nisl lobortis, tristique odio ac, porta massa.
Curabitur vehicula malesuada turpis in varius. Pellentesque leo neque,
vehicula sed porttitor eu, hendrerit vel lacus. Suspendisse suscipit
ultricies erat id facilisis. Ut hendrerit vitae ex nec convallis.
</p>
<p>
Nunc scelerisque, mi vitae fringilla euismod, arcu nisl dignissim neque,
nec accumsan ante risus ut ipsum. Pellentesque vulputate odio turpis.
Nunc sed semper dui, ut tempor nulla. Nullam consectetur fermentum
ligula eu eleifend. Morbi ullamcorper gravida mauris. Cras sed massa eu
ante convallis pulvinar. Pellentesque interdum sollicitudin elit, et
efficitur purus varius vitae. Morbi euismod faucibus sapien id laoreet.
Quisque euismod est bibendum lorem ultricies, nec facilisis nibh
lobortis. Fusce in tempor justo, ut mollis orci. Sed sem purus,
tristique a magna sit amet, sollicitudin lobortis ipsum. Proin mauris
eros, pretium at magna ac, rhoncus tristique nulla.
</p>
<p>
Nullam blandit purus et nulla vehicula, sit amet convallis erat
ullamcorper. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Vestibulum dignissim placerat velit in
mollis. Quisque sed magna nisi. Praesent varius congue felis sit amet
scelerisque. Phasellus purus lorem, porta sit amet eleifend et, dapibus
imperdiet erat. Nunc dictum nibh quis convallis imperdiet. Praesent ut
diam eget eros auctor sollicitudin nec id urna. In ante nisl, facilisis
vitae mauris in, faucibus fringilla justo. Nunc rhoncus purus et tellus
imperdiet finibus.
</p>
<p>
Quisque ullamcorper eros mauris, non eleifend leo sagittis nec. Aenean
ut ex id lorem sagittis dapibus. Pellentesque consequat sapien erat,
quis cursus augue ultrices in. Mauris nec venenatis nisi. Integer
gravida semper elit sagittis finibus. Vestibulum convallis odio et leo
imperdiet, non molestie eros posuere. Quisque egestas nulla a libero
pretium, nec pulvinar mauris vestibulum. Pellentesque vehicula dolor
nulla, eu feugiat dolor tempor congue. Duis id tincidunt quam. In hac
habitasse platea dictumst. Mauris tempus tortor eget sapien ultrices
egestas. Nulla facilisi. Nulla hendrerit quis ante a viverra. Maecenas
eu egestas libero.
</p>
<p>
Curabitur ut lacus vitae massa congue sagittis vitae blandit magna.
Fusce pharetra arcu risus, a tempor tortor convallis vitae. Sed varius
fermentum metus, id placerat eros hendrerit ullamcorper. Suspendisse
porta felis odio, eu sollicitudin dui tristique ut. Ut ullamcorper leo
nec sodales tempus. Nunc porttitor et libero in dignissim. Proin euismod
eleifend erat. Vivamus nec aliquam ex. Ut aliquet venenatis diam, vitae
sollicitudin ligula suscipit vel. Suspendisse et justo sapien. Etiam
eleifend mauris non orci fringilla vulputate. Ut imperdiet magna
faucibus, sagittis ex eu, sagittis tellus. Vestibulum faucibus
vestibulum arcu non dictum. Nullam quis volutpat arcu, sit amet viverra
ante.
</p>
</div>
<script src="dist/index.js"></script>
<script>
canonicalGlobalNav.createNav();
</script>
</body>
</html>
7 changes: 4 additions & 3 deletions rollup.config.js
View file
Expand Up @@ -29,9 +29,10 @@ export default [
resolve(),
sass({
insert: true,
processor: css => postcss([autoprefixer, cssnano])
.process(css)
.then(result => result.css),
processor: css =>
postcss([autoprefixer, cssnano])
.process(css)
.then(result => result.css),
}),
uglify(),
],
Expand Down

0 comments on commit 0524ac2

Please sign in to comment.