From 1315fa8dbdac9b815d70bff5e69b7eaf918bb862 Mon Sep 17 00:00:00 2001 From: philip van der hoek Date: Tue, 2 Apr 2019 12:07:28 +0200 Subject: [PATCH 1/7] Footer reworked --- src/component/telemachy.component.css | 40 ++++++++++++++++++++++-- src/component/telemachy.component.html | 42 +++++++++++++++----------- 2 files changed, 62 insertions(+), 20 deletions(-) diff --git a/src/component/telemachy.component.css b/src/component/telemachy.component.css index 2acf5c6..8f69fac 100755 --- a/src/component/telemachy.component.css +++ b/src/component/telemachy.component.css @@ -7,7 +7,7 @@ } .explanation { position: absolute; - min-width: 220px; + min-width: 700px; z-index: 9000000; transition: all 0.25s ease; border-width: 1px; @@ -45,7 +45,6 @@ height: calc(100% - 29px); } .popup .controls { - position: absolute; bottom: 1em; } .controls a { @@ -80,3 +79,40 @@ .ytpopup .content { padding: 1em; } + +.flex-container{ + display: flex; +} + +.step-button { + flex: 1; + display: flex; + align-items: center; + justify-content: flex-start; + flex-grow: 2; +} + +.step-counter { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + flex-grow: 2; + padding-right: 15%; +} + +.end-button { + flex: 1; + display: flex; + align-items: center; + justify-content: flex-end; +} + +.horizontal-line { + margin-top: 20px; + height: 2px; + border: none; + color: #333; + background-color: #269189; + text-align: center; +} diff --git a/src/component/telemachy.component.html b/src/component/telemachy.component.html index 90548cb..0a5cfb0 100755 --- a/src/component/telemachy.component.html +++ b/src/component/telemachy.component.html @@ -5,12 +5,12 @@
-
- ← - → - skip - finish - ({{progress}}/{{total}}) +
+ << Prev + Next >> + ({{progress}}/{{total}}) + End tour + finish
@@ -20,12 +20,15 @@
-
- ← - → - skip - finish - ({{progress}}/{{total}}) +
+
+
+ << Prev + Next >> +
+ ({{progress}}/{{total}}) + End tour + finish
@@ -39,12 +42,15 @@
-
- ← - → - skip - finish - ({{progress}}/{{total}}) +
+
+
+ << Prev + Next >> +
+ ({{progress}}/{{total}}) + End tour + finish
From a11327b5645b6f352c826c52736ab0df7e03d27f Mon Sep 17 00:00:00 2001 From: philip van der hoek Date: Tue, 2 Apr 2019 12:39:18 +0200 Subject: [PATCH 2/7] Removed pointer-events --- src/component/telemachy.component.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/telemachy.component.css b/src/component/telemachy.component.css index 8f69fac..ca8c74f 100755 --- a/src/component/telemachy.component.css +++ b/src/component/telemachy.component.css @@ -1,7 +1,7 @@ .overlay { position: absolute; background: rgba(0, 0, 0, 0.5); - pointer-events: none; + /*pointer-events: none;*/ z-index: 9000000; transition: all 0.25s ease; } From f1107912c26ad4e86b726cbe3caab7c146cb1591 Mon Sep 17 00:00:00 2001 From: philip van der hoek Date: Tue, 2 Apr 2019 12:48:40 +0200 Subject: [PATCH 3/7] Changed font-size footer text --- src/component/telemachy.component.css | 2 +- src/component/telemachy.component.html | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/component/telemachy.component.css b/src/component/telemachy.component.css index ca8c74f..d88333b 100755 --- a/src/component/telemachy.component.css +++ b/src/component/telemachy.component.css @@ -49,7 +49,7 @@ } .controls a { cursor: pointer; - font-size: 1.5em; + font-size: 1.2em; font-weight: 100; margin-left: 0.5em; margin-right: 0.5em; diff --git a/src/component/telemachy.component.html b/src/component/telemachy.component.html index 0a5cfb0..8622c31 100755 --- a/src/component/telemachy.component.html +++ b/src/component/telemachy.component.html @@ -6,8 +6,10 @@
- << Prev - Next >> +
+ << Prev + Next >> +
({{progress}}/{{total}}) End tour finish From 19b60e4ee03792556f2114e06ed8dc570433c06a Mon Sep 17 00:00:00 2001 From: philip van der hoek Date: Tue, 2 Apr 2019 15:23:14 +0200 Subject: [PATCH 4/7] Fixed overflowing of content --- src/component/telemachy.component.html | 2 +- src/step/element.step.ts | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/component/telemachy.component.html b/src/component/telemachy.component.html index 8622c31..071bc68 100755 --- a/src/component/telemachy.component.html +++ b/src/component/telemachy.component.html @@ -41,7 +41,7 @@
-
+
diff --git a/src/step/element.step.ts b/src/step/element.step.ts index c700a61..309eea6 100755 --- a/src/step/element.step.ts +++ b/src/step/element.step.ts @@ -56,6 +56,17 @@ export class ElementTourStep extends TourStep { } return (this.domElement.getBoundingClientRect().left + window.pageXOffset) + 'px'; } + get leftContent(): string { + if (!this.domElement) { + return '0'; + } + + if (((this.domElement.getBoundingClientRect().left + window.pageXOffset) - window.innerWidth) >= -700) { + return ((window.innerWidth - 720) + 'px'); + } + console.log(((this.domElement.getBoundingClientRect().left + window.pageXOffset) - window.innerWidth)); + return (this.domElement.getBoundingClientRect().left + window.pageXOffset) + 'px'; + } get right(): string { if (!this.domElement) { return '0'; From 3bf27731a1c7977f22c7c28912990086fb4a4276 Mon Sep 17 00:00:00 2001 From: Tim van Dalen Date: Wed, 3 Apr 2019 12:01:14 +0200 Subject: [PATCH 5/7] Apply suggestions from code review --- src/component/telemachy.component.css | 1 - src/step/element.step.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/src/component/telemachy.component.css b/src/component/telemachy.component.css index d88333b..ef96821 100755 --- a/src/component/telemachy.component.css +++ b/src/component/telemachy.component.css @@ -1,7 +1,6 @@ .overlay { position: absolute; background: rgba(0, 0, 0, 0.5); - /*pointer-events: none;*/ z-index: 9000000; transition: all 0.25s ease; } diff --git a/src/step/element.step.ts b/src/step/element.step.ts index 309eea6..6ab147c 100755 --- a/src/step/element.step.ts +++ b/src/step/element.step.ts @@ -64,7 +64,6 @@ export class ElementTourStep extends TourStep { if (((this.domElement.getBoundingClientRect().left + window.pageXOffset) - window.innerWidth) >= -700) { return ((window.innerWidth - 720) + 'px'); } - console.log(((this.domElement.getBoundingClientRect().left + window.pageXOffset) - window.innerWidth)); return (this.domElement.getBoundingClientRect().left + window.pageXOffset) + 'px'; } get right(): string { From f521b22c5654d988953a667c0979bbb842ee68b6 Mon Sep 17 00:00:00 2001 From: philip van der hoek Date: Wed, 3 Apr 2019 16:15:59 +0200 Subject: [PATCH 6/7] Overflow is now fixed in a better way --- src/component/telemachy.component.css | 3 +-- src/component/telemachy.component.html | 3 +-- src/step/element.step.ts | 37 ++++++++++++++++++-------- 3 files changed, 28 insertions(+), 15 deletions(-) diff --git a/src/component/telemachy.component.css b/src/component/telemachy.component.css index d88333b..3c0cd85 100755 --- a/src/component/telemachy.component.css +++ b/src/component/telemachy.component.css @@ -1,13 +1,12 @@ .overlay { position: absolute; background: rgba(0, 0, 0, 0.5); - /*pointer-events: none;*/ z-index: 9000000; transition: all 0.25s ease; } .explanation { position: absolute; - min-width: 700px; + min-width: 400px; z-index: 9000000; transition: all 0.25s ease; border-width: 1px; diff --git a/src/component/telemachy.component.html b/src/component/telemachy.component.html index 071bc68..6f6ef43 100755 --- a/src/component/telemachy.component.html +++ b/src/component/telemachy.component.html @@ -40,8 +40,7 @@
- -
+
diff --git a/src/step/element.step.ts b/src/step/element.step.ts index 309eea6..24ebaaa 100755 --- a/src/step/element.step.ts +++ b/src/step/element.step.ts @@ -56,17 +56,6 @@ export class ElementTourStep extends TourStep { } return (this.domElement.getBoundingClientRect().left + window.pageXOffset) + 'px'; } - get leftContent(): string { - if (!this.domElement) { - return '0'; - } - - if (((this.domElement.getBoundingClientRect().left + window.pageXOffset) - window.innerWidth) >= -700) { - return ((window.innerWidth - 720) + 'px'); - } - console.log(((this.domElement.getBoundingClientRect().left + window.pageXOffset) - window.innerWidth)); - return (this.domElement.getBoundingClientRect().left + window.pageXOffset) + 'px'; - } get right(): string { if (!this.domElement) { return '0'; @@ -115,5 +104,31 @@ export class ElementTourStep extends TourStep { } return this.domElement.getBoundingClientRect().width + 'px'; } + + get leftSide(): boolean { + if (this.domElement.getBoundingClientRect().left <= (document.body.scrollWidth / 2)) { + return true; + } + } + + get rightSide(): boolean { + if (this.domElement.getBoundingClientRect().left >= (document.body.scrollWidth / 2)) { + console.log(this.domElement.getBoundingClientRect().right); + return true; + } + } + get style(): object { + let styles: any = { + top: this.domElement.getBoundingClientRect().bottom + 'px', + width: (this.domElement.getBoundingClientRect().width - 2) + 'px' + }; + if (this.rightSide) { + styles.right = (document.body.scrollWidth - this.domElement.getBoundingClientRect().right) + 'px'; + } + if (this.leftSide) { + styles.left = this.domElement.getBoundingClientRect().left + 'px'; + } + return styles; + } //endregion } From 82f8d98d8a9a595cfc0df2a3626a6ed1db0b10c1 Mon Sep 17 00:00:00 2001 From: philip van der hoek Date: Wed, 3 Apr 2019 16:22:46 +0200 Subject: [PATCH 7/7] Improved code --- src/step/element.step.ts | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/src/step/element.step.ts b/src/step/element.step.ts index 24ebaaa..4b32a00 100755 --- a/src/step/element.step.ts +++ b/src/step/element.step.ts @@ -104,28 +104,15 @@ export class ElementTourStep extends TourStep { } return this.domElement.getBoundingClientRect().width + 'px'; } - - get leftSide(): boolean { - if (this.domElement.getBoundingClientRect().left <= (document.body.scrollWidth / 2)) { - return true; - } - } - - get rightSide(): boolean { - if (this.domElement.getBoundingClientRect().left >= (document.body.scrollWidth / 2)) { - console.log(this.domElement.getBoundingClientRect().right); - return true; - } - } get style(): object { let styles: any = { top: this.domElement.getBoundingClientRect().bottom + 'px', width: (this.domElement.getBoundingClientRect().width - 2) + 'px' }; - if (this.rightSide) { + if (this.domElement.getBoundingClientRect().left >= (document.body.scrollWidth / 2)) { styles.right = (document.body.scrollWidth - this.domElement.getBoundingClientRect().right) + 'px'; } - if (this.leftSide) { + if (this.domElement.getBoundingClientRect().left <= (document.body.scrollWidth / 2)) { styles.left = this.domElement.getBoundingClientRect().left + 'px'; } return styles;