From d858e1a004eb653df1e3d44d7ccbe5b4c052fdec Mon Sep 17 00:00:00 2001 From: madoar Date: Fri, 12 May 2017 20:58:40 +0200 Subject: [PATCH] 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 --- README.md | 2 +- package.json | 7 +- ...d-navigation-bar.component.horizontal.less | 40 ++++++----- .../wizard-navigation-bar.component.html | 4 +- .../wizard-navigation-bar.component.spec.ts | 6 +- ...ard-navigation-bar.component.vertical.less | 71 ++++++++++++------- 6 files changed, 79 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 6af700f3..5c838fe8 100644 --- 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 index 9f71babf..d59fda72 100644 --- 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 index 72817587..fe0994f7 100644 --- 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 index e34b5639..5d0646b4 100644 --- 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 }"> - {{step.title}} +
+ {{step.title}} +
diff --git a/src/components/components/wizard-navigation-bar.component.spec.ts b/src/components/components/wizard-navigation-bar.component.spec.ts index 213ef68d..6b24e759 100644 --- 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 index 3022ca47..aa0bd047 100644 --- a/src/components/components/wizard-navigation-bar.component.vertical.less +++ b/src/components/components/wizard-navigation-bar.component.vertical.less @@ -27,7 +27,7 @@ // padding between text and baseline @text-margin-left: 15px; -@text-height: 15px; +@text-height: 14px; @distance-between-steps: 10px; @@ -35,8 +35,6 @@ 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%); + } } } }