Skip to content

Reworked footer and fixed overflow problem #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
philiphoek wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Reworked footer and fixed overflow problem #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1315fa8
Footer reworked
Apr 2, 2019
a11327b
Removed pointer-events
Apr 2, 2019
f110791
Changed font-size footer text
Apr 2, 2019
19b60e4
Fixed overflowing of content
Apr 2, 2019
3bf2773
Apply suggestions from code review
timvdalen Apr 3, 2019
f521b22
Overflow is now fixed in a better way
Apr 3, 2019
b18331d
Merge branch 'master' of github.com:philiphoek/telemachy
Apr 3, 2019
82f8d98
Improved code
Apr 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 39 additions & 4 deletions src/component/telemachy.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: 220px;
min-width: 400px;
z-index: 9000000;
transition: all 0.25s ease;
border-width: 1px;
Expand Down Expand Up @@ -45,12 +44,11 @@
height: calc(100% - 29px);
}
.popup .controls {
position: absolute;
bottom: 1em;
}
.controls a {
cursor: pointer;
font-size: 1.5em;
font-size: 1.2em;
font-weight: 100;
margin-left: 0.5em;
margin-right: 0.5em;
Expand Down Expand Up @@ -80,3 +78,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;
}
47 changes: 27 additions & 20 deletions src/component/telemachy.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@
<iframe width="853" height="480" [src]="getVideoUrl()" frameborder="0" allowfullscreen class="video"></iframe>
<div class="ytpopup">
<div class="content">
<div class="controls">
<a *ngIf="canGoBack()" (click)="previous()">&larr;</a>
<a *ngIf="!canFinish()" (click)="next()">&rarr;</a>
<a *ngIf="!canFinish()" (click)="skip()">skip</a>
<a *ngIf="canFinish()" (click)="finish()">finish</a>
<span>({{progress}}/{{total}})</span>
<div class="controls flex-container">
<div class="step-button">
<a *ngIf="canGoBack()" (click)="previous()"><< Prev</a>
<a *ngIf="!canFinish()" (click)="next()">Next >></a>
</div>
<span class="step-counter">({{progress}}/{{total}})</span>
<a *ngIf="!canFinish()" (click)="skip()" class="end-button">End tour</a>
<a *ngIf="canFinish()" (click)="finish()" class="end-button">finish</a>
</div>
</div>
</div>
Expand All @@ -20,12 +22,15 @@
<div class="popup">
<div class="content">
<div [innerHtml]="asHtmlTourStep(step).body" class="body"></div>
<div class="controls">
<a *ngIf="canGoBack()" (click)="previous()">&larr;</a>
<a *ngIf="!canFinish()" (click)="next()">&rarr;</a>
<a *ngIf="!canFinish()" (click)="skip()">skip</a>
<a *ngIf="canFinish()" (click)="finish()">finish</a>
<span>({{progress}}/{{total}})</span>
<hr class="horizontal-line"/>
<div class="controls flex-container">
<div class="step-button">
<a *ngIf="canGoBack()" (click)="previous()"><< Prev</a>
<a *ngIf="!canFinish()" (click)="next()">Next >></a>
</div>
<span class="step-counter">({{progress}}/{{total}})</span>
<a *ngIf="!canFinish()" (click)="skip()" class="end-button">End tour</a>
<a *ngIf="canFinish()" (click)="finish()" class="end-button">finish</a>
</div>
</div>
</div>
Expand All @@ -35,16 +40,18 @@
<div class="overlay" [ngStyle]="{left: 0, top: asElementTourStep(step).top, width: asElementTourStep(step).left, height: asElementTourStep(step).fromTop}"></div>
<div class="overlay" [ngStyle]="{left: asElementTourStep(step).left, top: asElementTourStep(step).bottom, width: asElementTourStep(step).fromLeft, height: asElementTourStep(step).toBottom}"></div>
<div class="overlay" [ngStyle]="{left: asElementTourStep(step).right, top: asElementTourStep(step).top, width: asElementTourStep(step).toRight, height: asElementTourStep(step).height}"></div>

<div class="explanation" [ngStyle]="{left: asElementTourStep(step).left, top: asElementTourStep(step).bottom, width: (asElementTourStep(step).domElement.getBoundingClientRect().width - 2) + 'px'}">
<div class="explanation" [ngStyle]="asElementTourStep(step).style">
<div class="content">
<div [innerHtml]="asElementTourStep(step).body"></div>
<div class="controls">
<a *ngIf="canGoBack()" (click)="previous()">&larr;</a>
<a *ngIf="!canFinish()" (click)="next()">&rarr;</a>
<a *ngIf="!canFinish()" (click)="skip()">skip</a>
<a *ngIf="canFinish()" (click)="finish()">finish</a>
<span>({{progress}}/{{total}})</span>
<hr class="horizontal-line"/>
<div class="controls flex-container">
<div class="step-button">
<a *ngIf="canGoBack()" (click)="previous()"><< Prev</a>
<a *ngIf="!canFinish()" (click)="next()">Next >></a>
</div>
<span class="step-counter">({{progress}}/{{total}})</span>
<a *ngIf="!canFinish()" (click)="skip()" class="end-button">End tour</a>
<a *ngIf="canFinish()" (click)="finish()" class="end-button">finish</a>
</div>
</div>
</div>
Expand Down
13 changes: 13 additions & 0 deletions src/step/element.step.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,5 +104,18 @@ export class ElementTourStep extends TourStep {
}
return this.domElement.getBoundingClientRect().width + 'px';
}
get style(): object {
let styles: any = {
top: this.domElement.getBoundingClientRect().bottom + 'px',
width: (this.domElement.getBoundingClientRect().width - 2) + 'px'
};
if (this.domElement.getBoundingClientRect().left >= (document.body.scrollWidth / 2)) {
styles.right = (document.body.scrollWidth - this.domElement.getBoundingClientRect().right) + 'px';
}
if (this.domElement.getBoundingClientRect().left <= (document.body.scrollWidth / 2)) {
styles.left = this.domElement.getBoundingClientRect().left + 'px';
}
return styles;
}
//endregion
}