Fix IE 11 primary navigation icon positioning
Added height value of 100% to nav-icon in order to properly align
in IE11.
Tested on Chrome, Firefox, Safari, Edge and IE11.
Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I66b2d4de1b67f546e0709eab70a780a297efbb7a
diff --git a/app/assets/icons/icon-key.svg b/app/assets/icons/icon-key.svg
index 44a811c..d366d24 100644
--- a/app/assets/icons/icon-key.svg
+++ b/app/assets/icons/icon-key.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path id="a" d="M19.9 7.056a2.144 2.144 0 0 0 1.515 3.658 2.141 2.141 0 0 0 1.514-3.658 2.143 2.143 0 0 0-3.028 0zM20.345 0a9.633 9.633 0 0 0-7.74 3.898 9.646 9.646 0 0 0-1.481 8.543L0 23.571V30h6.424l11.124-11.13a9.642 9.642 0 0 0 8.216-1.251 9.655 9.655 0 0 0 4.196-7.179 9.426 9.426 0 0 0-1.746-6.393A9.706 9.706 0 0 0 20.344 0zm0 17.143c-.737 0-1.47-.11-2.176-.324l-1.227-.373-.908.908-3.406 3.408-1.476-1.476L9.637 20.8l1.476 1.477-1.698 1.7L7.939 22.5l-1.515 1.515 1.477 1.477-2.364 2.365H2.141V24.46l10.496-10.502.907-.908-.307-1.016a7.643 7.643 0 0 1 3.642-9.046 7.509 7.509 0 0 1 7.253.184 7.519 7.519 0 0 1 3.716 6.235 7.199 7.199 0 0 1-1.17 4.282 7.565 7.565 0 0 1-6.334 3.455z"/>
</svg>
\ No newline at end of file
diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index 6205a18..435980a 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -2,13 +2,13 @@
<ul id="nav__top-level" ng-style="navStyle">
<li>
<a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/server" ng-click="change('overview')">
- <icon class="nav-icon" file="icon-overview.svg"></icon>
+ <icon class="nav-icon" file="icon-overview.svg" aria-hidden="true"></icon>
Server overview
</a>
</li>
<li>
<button class="btn-health" ng-class="{opened: firstLevel == 'server-health'}" ng-click="change('server-health')">
- <icon class="nav-icon" file="icon-health.svg"></icon>
+ <icon class="nav-icon" file="icon-health.svg" aria-hidden="true"></icon>
Server health
</button>
<ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-health')}">
@@ -28,7 +28,7 @@
</li>
<li>
<button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')">
- <icon class="nav-icon nav-icon__control" file="icon-control.svg"></icon>
+ <icon class="nav-icon nav-icon__control" file="icon-control.svg" aria-hidden="true"></icon>
Server control
</button>
<ul class="nav__second-level btn-control" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-control')}">
@@ -58,7 +58,7 @@
</li>
<li>
<button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')">
- <icon class="nav-icon" file="icon-config.svg"></icon>
+ <icon class="nav-icon" file="icon-config.svg" aria-hidden="true"></icon>
Server configuration
</button>
<ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'configuration')}">
@@ -78,10 +78,8 @@
</li>
<li>
<button class="btn-access-control" ng-class="{opened: firstLevel == 'access-control'}" ng-click="change('access-control')">
- <span>
- <icon class="nav-icon" file="icon-key.svg"></icon>
+ <icon class="nav-icon nav-icon__key" file="icon-key.svg" aria-hidden="true"></icon>
Access control
- </span>
</button>
<ul class="nav__second-level btn-access-control" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'access-control')}">
<li ng-class="{'active': (path == '/access-control' || path == '/access-control/ldap')}">
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index d7e8909..f8f5a6f 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -56,13 +56,14 @@
.nav-icon {
@include navIcons;
width: 100%;
+ height: 100%;
svg {
width: 36px;
height: auto;
}
}
- .nav-icon__control {
- margin-bottom: 1em;
+ .nav-icon__control,
+ .nav-icon__key {
svg {
width: 30px;
}
