Skip to content
This repository has been archived by the owner on Apr 24, 2020. It is now read-only.

Commit

Permalink
Merge pull request #6 from Financial-Times/fixes
Browse files Browse the repository at this point in the history 
Fixes
  • Loading branch information
Alberto Elias committed Jun 29, 2014
2 parents 2c4ba9b + de2e7b5 commit f90a920
Show file tree
Hide file tree
Showing 14 changed files with 58 additions and 57 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"o-grid": "^2.0.7",
"o-colors": "^2.2.20",
"o-fonts": ">=1.4.0 <2",
"o-ft-icons": "^1.2.4",
"o-ft-icons": "2.0.0",
"o-assets": "^0.4.0",
"o-hoverable": "^0.1.1",
"o-useragent": "^1.1.0",
Expand Down
4 changes: 2 additions & 2 deletions demos/mega-dropdown.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ <h1 class="demo__title">Horizontal megadropdown</h1>

<nav class="o-hierarchical-nav demo--horizontal-theme" data-o-component="o-hierarchical-nav" data-o-version="">
<ul data-o-hierarchical-nav-level="1">
<li data-priority="2" aria-controls="megadropdown-p1" aria-selected="true"><a>Mega 1 p2 <i class="o-hierarchical-nav__parent__down-arrow"></i></a></li>
<li data-priority="2" aria-controls="megadropdown-p1"><a>Mega 1 p2 <i class="o-hierarchical-nav__parent__down-arrow"></i></a></li>
<li data-priority="3" aria-controls="megadropdown-p2"><a>Mega 2 p3 <i class="o-hierarchical-nav__parent__down-arrow"></i></a></li>
<li data-priority="1" aria-controls="megadropdown-p3"><a>Mega 3 p1 <i class="o-hierarchical-nav__parent__down-arrow"></i></a></li>
<li data-priority="2" aria-controls="megadropdown-p4"><a>Mega 4 p2 <i class="o-hierarchical-nav__parent__down-arrow"></i></a></li>
Expand All @@ -40,6 +40,6 @@ <h1 class="demo__title">Horizontal megadropdown</h1>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-p6" aria-hidden="true">Mega-dropdown for Mega 6</div>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-pmore" aria-hidden="true">Mega-dropdown for More</div>
<script src="/bundles/js?modules=o-hierarchical-nav:/demos/src/demo.js"></script>
<script src='http://registry.origami.ft.com/embedapi?autoload=resize'></script>
<script src="//registry.origami.ft.com/embedapi?autoload=resize"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion demos/nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,6 @@ <h1 class="demo__title">Vertical theme</h1>
</ul>
</nav>
<script src="/bundles/js?modules=o-hierarchical-nav:/demos/src/nav.js"></script>
<script src='http://registry.origami.ft.com/embedapi?autoload=resize'></script>
<script src="//registry.origami.ft.com/embedapi?autoload=resize"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions demos/responsive-nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@ <h1 class="demo__title">Base theme</h1>
<li><a>Item 5.4</a></li>
</ul>
</li>
<li data-more class="o-hierarchical-nav__parent"><a><span class="o-hierarchical-nav__more--if-some">More</span><span class="o-hierarchical-nav__more--if-all">Menu</span></a></li>
<li data-more class="o-hierarchical-nav__parent"><a><span class="o-hierarchical-nav__more--if-some">More</span><span class="o-hierarchical-nav__more--if-all">Menu</span> <i class="o-hierarchical-nav__parent__down-arrow"></i></a></li>
</ul>
</nav>
<script src="/bundles/js?modules=o-hierarchical-nav:/demos/src/demo.js"></script>
<script src='http://registry.origami.ft.com/embedapi?autoload=resize'></script>
<script src="//registry.origami.ft.com/embedapi?autoload=resize"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion demos/src/mega-dropdown.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<nav class="o-hierarchical-nav demo--horizontal-theme" data-o-component="o-hierarchical-nav" data-o-version="{{o-hierarchical-nav.module-version}}">
<ul data-o-hierarchical-nav-level="1">
<li data-priority="2" aria-controls="megadropdown-p1" aria-selected="true"><a>Mega 1 p2 <i class="o-hierarchical-nav__parent__down-arrow"></i></a></li>
<li data-priority="2" aria-controls="megadropdown-p1"><a>Mega 1 p2 <i class="o-hierarchical-nav__parent__down-arrow"></i></a></li>
<li data-priority="3" aria-controls="megadropdown-p2"><a>Mega 2 p3 <i class="o-hierarchical-nav__parent__down-arrow"></i></a></li>
<li data-priority="1" aria-controls="megadropdown-p3"><a>Mega 3 p1 <i class="o-hierarchical-nav__parent__down-arrow"></i></a></li>
<li data-priority="2" aria-controls="megadropdown-p4"><a>Mega 4 p2 <i class="o-hierarchical-nav__parent__down-arrow"></i></a></li>
Expand Down
2 changes: 1 addition & 1 deletion demos/src/responsive-nav.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,6 @@
<li><a>Item 5.4</a></li>
</ul>
</li>
<li data-more class="o-hierarchical-nav__parent"><a><span class="o-hierarchical-nav__more--if-some">More</span><span class="o-hierarchical-nav__more--if-all">Menu</span></a></li>
<li data-more class="o-hierarchical-nav__parent"><a><span class="o-hierarchical-nav__more--if-some">More</span><span class="o-hierarchical-nav__more--if-all">Menu</span> <i class="o-hierarchical-nav__parent__down-arrow"></i></a></li>
</ul>
</nav>
3 changes: 2 additions & 1 deletion main.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
/*global require,module*/
function HierarchicalNav(rootEl) {
'use strict';

function init() {
if (rootEl.getAttribute('data-o-hierarchical-nav-orientiation') == 'vertical') {
if (rootEl.getAttribute('data-o-hierarchical-nav-orientiation') === 'vertical') {
var Nav = require('./src/js/Nav');
new Nav(rootEl);
} else {
Expand Down
3 changes: 2 additions & 1 deletion main.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
$o-ft-icons-assets-path: '[email protected]';
@import "o-assets/main";
@import "o-useragent/main";
@import "o-grid/main";
Expand All @@ -10,4 +11,4 @@
@import "src/scss/mixins";
@import "src/scss/nav-base";
@import "src/scss/theme-horizontal";
@import "src/scss/theme-vertical";
@import "src/scss/theme-vertical";
5 changes: 2 additions & 3 deletions src/js/ResponsiveNav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function ResponsiveNav(rootEl) {
moreListEl.innerHTML = '';
}

function addItemToMoreList(text, href, ul) {
function addItemToMoreList(text, href) {
var itemEl = document.createElement('li'),
aEl = document.createElement('a');
aEl.innerText = text;
Expand All @@ -43,8 +43,7 @@ function ResponsiveNav(rootEl) {
emptyMoreList();
for (var c = 0, l = hiddenEls.length; c < l; c++) {
var aEl = hiddenEls[c].querySelector('a');
var ulEl = hiddenEls[c].querySelector('ul');
addItemToMoreList(aEl.innerText, aEl.href, ulEl);
addItemToMoreList(aEl.innerText, aEl.href);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/scss/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
@function oHierarchicalNavAsset ($asset) {
@return oAssetsUse($asset, $o-hierarchical-nav-assets-path, $o-hierarchical-nav-version)
}
}
2 changes: 1 addition & 1 deletion src/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ $o-hierarchical-nav-assets-path: $o-hierarchical-nav-name !default;

$_o-hierarchical-nav-mega-dropdown-zindex: 10;

$_o-hierarchical-nav-dropdown-border: 1px solid rgba(255, 255, 255, 0.5);
$_o-hierarchical-nav-dropdown-border: 1px solid rgba(255, 255, 255, 0.5);
41 changes: 20 additions & 21 deletions src/scss/nav-base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
color: oColorsGetColorFor(link-alt-hover, text);
}
}


[data-o-hierarchical-nav-level] {
li {
Expand All @@ -39,29 +38,29 @@
}
}
}
}

[data-o-hierarchical-nav-level='1'] {
& > a {
text-transform: uppercase;
}
[data-o-hierarchical-nav-level='1'] {
& > a {
text-transform: uppercase;
}
}

[aria-controls] > a,
.o-hierarchical-nav__parent > a {
[aria-controls] > a,
.o-hierarchical-nav__parent > a {

i {
@include oFtIconsBaseIconStyles();
}
i {
@include oFtIconsBaseIconStyles();
}

.o-hierarchical-nav__parent__down-arrow {
@extend %o-ft-icons-icon--down-arrow;
font-size: 8px;
}

.o-hierarchical-nav__parent__right-arrow {
@extend %o-ft-icons-icon--arrow-right;
font-size: 9px;
display: none;
}
.o-hierarchical-nav__parent__down-arrow {
@extend %o-ft-icons-icon--arrow-down;
font-size: 8px;
}

.o-hierarchical-nav__parent__right-arrow {
@extend %o-ft-icons-icon--arrow-right;
font-size: 9px;
display: none;
}
}
}
41 changes: 21 additions & 20 deletions src/scss/theme-horizontal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,27 @@
[data-o-hierarchical-nav-level='1'] {
& > li {
display: inline-block;
& > a {
display: inline-block;
}
}

& > .o-hierarchical-nav__parent.o-hierarchical-nav--align-right [data-o-hierarchical-nav-level='2'] {
position: absolute;
right: 0;
a {
display: inline-block;
}
}

.o-hierarchical-nav__parent.o-hierarchical-nav--align-right [data-o-hierarchical-nav-level='2'] {
position: absolute;
right: 0;
}

[data-o-hierarchical-nav-level]:not([data-o-hierarchical-nav-level='1']) {
z-index: 10;
li {
display: block;
border-top: 1px solid #666;
& > a {
display: block;
}
border-top: 1px solid #666666;
}

a {
display: block;
}
}

Expand All @@ -31,12 +33,12 @@
border-left: $_o-hierarchical-nav-dropdown-border;
background-color: oColorsGetPaletteColor(grey-tint5);
position: absolute;
}

& > .o-hierarchical-nav__parent.o-hierarchical-nav__outside-right [data-o-hierarchical-nav-level='3'] {
position: absolute;
left: 100%;
top: 0;
}
.o-hierarchical-nav__parent.o-hierarchical-nav__outside-right [data-o-hierarchical-nav-level='3'] {
position: absolute;
left: 100%;
top: 0;
}

[data-o-hierarchical-nav-level='3'] {
Expand Down Expand Up @@ -65,18 +67,17 @@
position: absolute;
right: 0;
left: 0;
border-top: 20px solid oColorsGetPaletteColor(pink-tint2);
padding: 15px 33px;
min-height: 100px;
width: 100%;
color: #333;
color: #333333;
background-color: oColorsGetPaletteColor(pink-tint1);
z-index: $_o-hierarchical-nav-mega-dropdown-zindex;
}

.o-hierarchical-nav__more--some {
.o-hierarchical-nav__more--if-some {
display: block;
display: inline-block;
}
.o-hierarchical-nav__more--if-all {
display: none;
Expand All @@ -88,7 +89,7 @@
display: none;
}
.o-hierarchical-nav__more--if-all {
display: block;
display: inline-block;
}
}
}
}
2 changes: 1 addition & 1 deletion src/scss/theme-vertical.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,4 @@
[data-o-hierarchical-nav-level='3'] {
padding-left: 10px;
}
}
}

0 comments on commit f90a920

Please sign in to comment.