Skip to content
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.

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

Change banner text, map fullscreen, explore map backup link #155

Merged
merged 2 commits into from
Jan 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
13 changes: 10 additions & 3 deletions src/app/pages/hike/banner/hike-banner.component.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
<div class="banner">
<div class="banner_text-box">
<h6 class="banner_text-box-line">
Over niet al te lange tijd ga ik de Pacific Crest Trail hiken! Dit is een langeafstandspad in het westen van de Verenigde
Staten, dat loopt van de grens met Mexico over 4,273 kilometer helemaal tot aan de grens met Canada.
{{
hasStartedHike
? 'Momenteel ben ik de Pacific Crest Trail aan het hiken!'
: 'Over niet al te lange tijd ga ik de Pacific Crest Trail hiken!'
}}
Dit is een langeafstandspad in het westen van de Verenigde Staten, dat loopt van de grens met Mexico over 4,273 kilometer
helemaal tot aan de grens met Canada.
</h6>
<br />
<h6 class="banner_text-box-line">Hieronder ben ik te volgen tijdens dit fantastische avontuur!</h6>
<h6 class="banner_text-box-line">
Hieronder ben ik {{ hasStartedHike ? '' : 'binnenkort' }} te volgen tijdens dit fantastische avontuur!
</h6>
</div>
</div>
14 changes: 12 additions & 2 deletions src/app/pages/hike/banner/hike-banner.component.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
import { NgIf } from '@angular/common';
import { Component } from '@angular/core';

@Component({
selector: 'hike-banner',
templateUrl: './hike-banner.component.html',
styleUrls: ['./hike-banner.component.scss'],
standalone: true
standalone: true,
imports: [NgIf]
})
export class HikeBannerComponent {}
export class HikeBannerComponent {
hasStartedHike: boolean;
constructor() {
const startDate = new Date(2024, 3, 15); // 15 April 2024
if (Date.now() > startDate.valueOf()) {
this.hasStartedHike = true;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@
<ng-container *ngIf="locationResult | data as data">
<location-map *ngIf="data.mapboxEnabled; else noMap" [token]="data.token" [lat]="data.lat" [lon]="data.lon"></location-map>
<ng-template #noMap>
<p><i>De kaart is momenteel niet beschikbaar.</i></p>
<p>
<i>
De kaart is momenteel niet beschikbaar. In plaats daarvan ben ik te volgen via
<a href="https://share.garmin.com/riesj" target="_blank">deze kaart</a>.
</i>
</p>
</ng-template>
</ng-container>
</ng-container>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export class LocationMapComponent implements OnInit {

map.addControl(new mapboxgl.ScaleControl());
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl());

map.on('style.load', () => {
map.addSource('current-location-data', {
Expand Down
Loading