Fixing multiline navigation bar links in vertical mode (#1)

- bugfix: in vertical navigation bar mode, if a step title needs a linebreak to be displayed, the space between the lines is now correctly calculated - changed travis badge link to lead to the badge for the master branch - updated tests to be compatible to the current navigation bar structure - update horizontal navigation bar layout to fit to the vertical navigation bar - some small improvements in the css files for the navigation bar - fixed the url to the github issues page in package.json - added angular 4 keywords to package.json
madoar · May 12, 2017 · d858e1a · d858e1a
1 parent ea90492
commit d858e1a
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Overview ng2-archwizard
 
-[![Build Status](https://travis-ci.org/madoar/ng2-archwizard.png)](https://travis-ci.org/madoar/ng2-archwizard)
+[![Build Status](https://travis-ci.org/madoar/ng2-archwizard.svg?branch=master)](https://travis-ci.org/madoar/ng2-archwizard)
 [![Dependency Status](https://david-dm.org/madoar/ng2-archwizard.svg)](https://david-dm.org/madoar/ng2-archwizard)
 [![Dev-Dependency Status](https://david-dm.org/madoar/ng2-archwizard/dev-status.svg)](https://david-dm.org/madoar/ng2-archwizard?type=dev)
 [![Dependency Licence Status](https://dependencyci.com/github/madoar/ng2-archwizard/badge)](https://dependencyci.com/github/madoar/ng2-archwizard)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng2-archwizard",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "license": "MIT",
   "description": "An angular 2 module containing a wizard component and its supporting components and directives",
   "homepage": "https://github.com/madoar/ng2-archwizard",
@@ -13,12 +13,15 @@
     "url": "https://github.com/madoar/ng2-archwizard"
   },
   "bugs": {
-    "url": "https://github.com/madoar/ng2-archwizard"
+    "url": "https://github.com/madoar/ng2-archwizard/issues"
   },
   "keywords": [
     "angular2",
+    "angular4",
     "angular 2",
+    "angular 4",
     "ng2",
+    "ng4",
     "typescript",
     "wizard",
     "component"

diff --git a/src/components/components/wizard-navigation-bar.component.horizontal.less b/src/components/components/wizard-navigation-bar.component.horizontal.less
@@ -27,12 +27,9 @@
 
 // padding between text and baseline
 @text-padding-bottom: 10px;
-@text-height: 15px;
+@text-height: 14px;
 
 :host.horizontal {
-  display: flex;
-  flex-direction: row;
-
   .line(@dot-width, @dot-height, @dot-border-width, @line-color) {
     background-color: @line-color;
     content: '';
@@ -272,6 +269,10 @@
   }
 
   ul.steps-indicator {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
     right: 0;
     bottom: 0;
     left: 0;
@@ -335,22 +336,27 @@
 
     li {
       position: relative;
-      float: left;
       margin: 0;
       padding: @text-padding-bottom 0 0 0;
-      text-align: center;
-      line-height: @text-height;
 
-      a {
-        color: @wz-color-current;
-        text-decoration: none;
-        text-transform: uppercase;
-        font-weight: bold;
-        transition: 0.25s;
-        cursor: pointer;
-
-        &:hover {
-          color: darken(@wz-color-current, 20%);
+      div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        a {
+          color: @wz-color-current;
+          line-height: @text-height;
+          text-decoration: none;
+          text-transform: uppercase;
+          text-align: center;
+          font-weight: bold;
+          transition: 0.25s;
+          cursor: pointer;
+
+          &:hover {
+            color: darken(@wz-color-current, 20%);
+          }
         }
       }
     }

diff --git a/src/components/components/wizard-navigation-bar.component.html b/src/components/components/wizard-navigation-bar.component.html
@@ -11,6 +11,8 @@
         editing: step.selected && step.completed,
         optional: step.optional && !step.completed && !step.selected
   }">
-    <a [goToStep]="step">{{step.title}}</a>
+    <div>
+      <a [goToStep]="step">{{step.title}}</a>
+    </div>
   </li>
 </ul>
diff --git a/src/components/components/wizard-navigation-bar.component.spec.ts b/src/components/components/wizard-navigation-bar.component.spec.ts
@@ -264,7 +264,7 @@ describe('WizardNavigationBarComponent', () => {
   });
 
   it('should move back to the first step from the second step, after clicking on the corresponding link', () => {
-    const goToFirstStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(1) > a')).nativeElement;
+    const goToFirstStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(1) a')).nativeElement;
 
     expect(wizardTest.wizard.currentStepIndex).toBe(0);
 
@@ -280,7 +280,7 @@ describe('WizardNavigationBarComponent', () => {
   });
 
   it('should move back to the first step from the third step, after clicking on the corresponding link', () => {
-    const goToFirstStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(1) > a')).nativeElement;
+    const goToFirstStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(1) a')).nativeElement;
 
     expect(wizardTest.wizard.currentStepIndex).toBe(0);
 
@@ -296,7 +296,7 @@ describe('WizardNavigationBarComponent', () => {
   });
 
   it('should move back to the second step from the third step, after clicking on the corresponding link', () => {
-    const goToSecondStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(2) > a')).nativeElement;
+    const goToSecondStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(2) a')).nativeElement;
 
     expect(wizardTest.wizard.currentStepIndex).toBe(0);
 

diff --git a/src/components/components/wizard-navigation-bar.component.vertical.less b/src/components/components/wizard-navigation-bar.component.vertical.less
@@ -27,16 +27,14 @@
 
 // padding between text and baseline
 @text-margin-left: 15px;
-@text-height: 15px;
+@text-height: 14px;
 
 @distance-between-steps: 10px;
 
 :host.vertical {
   max-width: 280px;
   width: 20%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
   position: sticky;
   top: 0;
 
@@ -89,8 +87,6 @@
       padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @small-dot-height);
 
       li {
-        line-height: @small-dot-height;
-
         &:not(:last-child):before {
           .line(@small-dot-width, @small-dot-height, 0, @wz-color-default);
         }
@@ -99,6 +95,10 @@
           .state-circle(@small-dot-width, @small-dot-height);
           .state-circle-with-background(@wz-color-default);
         }
+
+        div {
+          min-height: @small-dot-height;
+        }
       }
 
       // default steps shouldn't change when hovered, because they aren't clickable
@@ -129,8 +129,6 @@
       padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @big-dot-height);
 
       li {
-        line-height: @big-dot-height;
-
         &:not(:last-child):before {
           .line(@big-dot-width, @big-dot-height, 0, @wz-color-default);
         }
@@ -139,6 +137,10 @@
           .state-circle(@big-dot-width, @big-dot-height);
           .state-circle-with-background(@wz-color-default);
         }
+
+        div {
+          min-height: @big-dot-height;
+        }
       }
 
       // default steps shouldn't change when hovered, because they aren't clickable
@@ -169,8 +171,6 @@
       padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @big-dot-height);
 
       li {
-        line-height: @big-dot-height;
-
         &:not(:last-child):before {
           .line(@big-dot-width, @big-dot-height, @dot-border-width, @wz-color-default);
         }
@@ -179,6 +179,10 @@
           .state-circle(@big-dot-width, @big-dot-height);
           .state-circle-with-border(@dot-border-width, @wz-color-default);
         }
+
+        div {
+          min-height: @big-dot-height + 2 * @dot-border-width;
+        }
       }
 
       // default steps shouldn't change when hovered, because they aren't clickable
@@ -209,8 +213,6 @@
       padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @big-dot-height);
 
       li {
-        line-height: @big-dot-height;
-
         &:not(:last-child):before {
           .line(@big-dot-width, @big-dot-height, 0, @wz-color-default);
         }
@@ -221,6 +223,10 @@
 
           content: attr(step-symbol);
         }
+
+        div {
+          min-height: @big-dot-height;
+        }
       }
 
       // default steps shouldn't change when hovered, because they aren't clickable
@@ -251,8 +257,6 @@
       padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @big-dot-height);
 
       li {
-        line-height: @big-dot-height;
-
         &:not(:last-child):before {
           .line(@big-dot-width, @big-dot-height, @dot-border-width, @wz-color-default);
         }
@@ -263,6 +267,10 @@
 
           content: attr(step-symbol);
         }
+
+        div {
+          min-height: @big-dot-height + 2 * @dot-border-width;
+        }
       }
 
       // default steps shouldn't change when hovered, because they aren't clickable
@@ -289,6 +297,10 @@
   }
 
   ul.steps-indicator {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
     list-style: none;
     margin: auto;
 
@@ -301,26 +313,31 @@
 
     li {
       position: relative;
-      display: table;
 
       &:not(:last-child) {
         margin-bottom: 0;
         padding-bottom: @distance-between-steps;
       }
 
-      a {
-        color: @wz-color-current;
-        float: left;
-        margin-left: @text-margin-left;
-        text-decoration: none;
-        text-transform: uppercase;
-        text-align: left;
-        font-weight: bold;
-        transition: 0.25s;
-        cursor: pointer;
-
-        &:hover {
-          color: darken(@wz-color-current, 20%);
+      div {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        a {
+          color: @wz-color-current;
+          margin-left: @text-margin-left;
+          line-height: @text-height;
+          text-decoration: none;
+          text-transform: uppercase;
+          text-align: left;
+          font-weight: bold;
+          transition: 0.25s;
+          cursor: pointer;
+
+          &:hover {
+            color: darken(@wz-color-current, 20%);
+          }
         }
       }
     }