Skip to content

Commit

Permalink
Fix hidden content in map feature modal (#565)
Browse files Browse the repository at this point in the history 
* update prettier and override supabase auth-js to fix error

* Fix hidden content in map feature modal

---------

Co-authored-by: Anders Barfod <[email protected]>
  • Loading branch information
@baffioso
baffioso and Anders Barfod authored Apr 1, 2024
1 parent 2aee5e7 commit a950868
Show file tree
Hide file tree
Showing 12 changed files with 327 additions and 270 deletions.
5 changes: 4 additions & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,8 @@
],
"editor.tabSize": 2,
"editor.detectIndentation": false,
"editor.formatOnSave": true
"editor.formatOnSave": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
32 changes: 14 additions & 18 deletions apps/distortion/src/app/pages/map/feature-info-modal/asset/asset.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,19 @@
<ng-container *ngIf="asset$ | async as asset; else loading">
<ion-header>
<ion-toolbar>
<ion-title>
{{ asset.properties.name }}
</ion-title>
@if (asset$ | async; as asset) {
<ion-toolbar>
<ion-title>
{{ asset.properties.name }}
</ion-title>

<ion-buttons slot="end">
<ng-container *ngIf="location$ | async as location">
<ion-button (click)="onOpenGoogleMapsDirections(location)">
Directions
</ion-button>
</ng-container>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-buttons slot="end">
<ng-container *ngIf="location$ | async as location">
<ion-button (click)="onOpenGoogleMapsDirections(location)">
Directions
</ion-button>
</ng-container>
</ion-buttons>
</ion-toolbar>

<ion-content class="ion-padding">
{{ asset.properties.description }}
</ion-content>
</ng-container>

<ng-template #loading> </ng-template>
}
21 changes: 13 additions & 8 deletions apps/distortion/src/app/pages/map/feature-info-modal/feature-info-modal.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
<ng-container *ngIf="selectedFeature$ | async as f">
<app-stage-timetable
*ngIf="f.mapLayer === mapLayer.Stage"
></app-stage-timetable>
<app-asset
*ngIf="f.mapLayer === mapLayer.Asset || f.mapLayer === mapLayer.AssetIcon"
></app-asset>
</ng-container>
@if (selectedFeature$ | async; as selectedFeature) {
@switch (selectedFeature.mapLayer) {
@case (mapLayer.Stage) {
<app-stage-timetable></app-stage-timetable>
}
@case (mapLayer.Asset) {
<app-asset></app-asset>
}
@case (mapLayer.AssetIcon) {
<app-asset></app-asset>
}
}
}
4 changes: 4 additions & 0 deletions apps/distortion/src/app/pages/map/feature-info-modal/feature-info-modal.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
app-stage-timetable {
// Use the same height as the parent container to make scrolling work
height: 100%;
}
269 changes: 142 additions & 127 deletions ...rtion/src/app/pages/map/feature-info-modal/stage-timetable/stage-timetable.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,138 +1,153 @@
<ion-header>
<ion-toolbar mode="md">
<ion-title>{{ stageName$ | async }}</ion-title>
<div class="container">
<header>
<ion-toolbar mode="md">
<ion-title>{{ stageName$ | async }}</ion-title>

<ion-buttons slot="end">
@if (tickets$ | async) {
<ion-button id="open-tickets-modal">
<ion-icon slot="icon-only" name="ticket-outline"></ion-icon>
</ion-button>
} @if (hasTimetable$ | async) {
<ion-button id="open-description-modal">
<ion-icon slot="icon-only" name="information-outline"></ion-icon>
</ion-button>
} @if (location$ | async; as location) {
<ion-button
color="primary"
fill="outline"
(click)="onOpenGoogleMapsDirections(location)"
>
Directions
</ion-button>
}
</ion-buttons>
</ion-toolbar>
<ion-buttons slot="end">
@if (tickets$ | async) {
<ion-button id="open-tickets-modal">
<ion-icon slot="icon-only" name="ticket-outline"></ion-icon>
</ion-button>
}
@if (hasTimetable$ | async) {
<ion-button id="open-description-modal">
<ion-icon slot="icon-only" name="information-outline"></ion-icon>
</ion-button>
}
@if (location$ | async; as location) {
<ion-button
color="primary"
fill="outline"
(click)="onOpenGoogleMapsDirections(location)"
>
Directions
</ion-button>
}
</ion-buttons>
</ion-toolbar>

@if (days$ | async; as days) {
<ion-segment
scrollable
(ionChange)="onSelectDay($event)"
[value]="selectedDay$ | async"
>
@for (day of days; track day.id) {
<ion-segment-button [value]="day.id">
<ion-label>{{ day.name }}</ion-label>
</ion-segment-button>
@if (days$ | async; as days) {
<ion-toolbar>
<ion-segment
scrollable
(ionChange)="onSelectDay($event)"
[value]="selectedDay$ | async"
>
@for (day of days; track day.id) {
<ion-segment-button [value]="day.id">
<ion-label>{{ day.name }}</ion-label>
</ion-segment-button>
}
</ion-segment>
</ion-toolbar>
}
</ion-segment>
}
</ion-header>
</header>

<!-- Timetable -->
@if (timetable$ | async; as timetable) { @for (act of timetable; track
act.artist_id; let i = $index) {
<ion-item [style.--animation-order]="i">
@if (act.start_time) {
<span slot="start">
{{ act?.start_time | date : 'HH:mm' }} -
{{ act?.end_time | date : 'HH:mm' }}
</span>
} @else {
<span slot="start">N/A</span>
}
<main (touchmove)="$event.stopPropagation()">
@if (timetable$ | async; as timetable) {
<ion-list lines="none">
@for (act of timetable; track act.artist_id; let i = $index) {
<ion-item [style.--animation-order]="i">
@if (act.start_time) {
<span slot="start" class="time-slot">
{{ act?.start_time | date: 'HH:mm' }} -
{{ act?.end_time | date: 'HH:mm' }}
</span>
} @else {
<span slot="start" class="time-slot">N/A</span>
}

<ion-label (click)="onGoToArtist(act?.name)">
{{ act?.name }}
</ion-label>
</ion-item>
}
<!-- Show description if no timetable is assigned to stage -->
} @else {
<div class="description">
<div class="no-timetable ion-margin">
@if (tags$ | async; as tags) { @for (tag of tags; track $index) {
<ion-badge color="tertiary" class="tag">
{{ tag }}
</ion-badge>
} }
</div>
<ion-label (click)="onGoToArtist(act?.name)">
{{ act?.name }}
</ion-label>
</ion-item>
}
</ion-list>

<!-- Show description if no timetable is assigned to stage -->
} @else {
<div class="description">
<div class="no-timetable ion-margin">
@if (tags$ | async; as tags) {
@for (tag of tags; track $index) {
<ion-badge color="tertiary" class="tag">
{{ tag }}
</ion-badge>
}
}
</div>

@if (stageDescription$ | async; as description) {
<p class="stage-description">{{ description }}</p>
} @else {
<div class="no-timetable ion-margin">
<ion-badge color="medium">
No description or timetable available for this stage
</ion-badge>
</div>
} @if (url$ | async; as url) {
<div class="ion-text-center">
<ion-button color="primary" (click)="onGoToUrl(url)">
More info
</ion-button>
</div>
}
@if (stageDescription$ | async; as description) {
<p class="stage-description">{{ description }}</p>
} @else {
<div class="no-timetable ion-margin">
<ion-badge color="medium">
No description or timetable available for this stage
</ion-badge>
</div>
}
@if (url$ | async; as url) {
<div class="more-info ion-text-center">
<ion-button color="primary" (click)="onGoToUrl(url)">
More info
</ion-button>
</div>
}
</div>
}
</main>
</div>
}

<!-- Modals for tickets and description -->
@if (hasTimetable$ | async) {
<ion-modal
trigger="open-description-modal"
[initialBreakpoint]="0.4"
[breakpoints]="[0.4, 0.75, 1]"
>
<ng-template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="end">
<ion-button (click)="onCloseModal()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Stage description</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h3>{{ stageName$ | async }}</h3>
<p class="stage-description">{{ stageDescription$ | async }}</p>
</ion-content>
</ng-template>
</ion-modal>
} @if (tickets$ | async) {
<ion-modal
trigger="open-tickets-modal"
[initialBreakpoint]="0.4"
[breakpoints]="[0.4, 0.75]"
>
<ng-template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="end">
<ion-button (click)="onCloseModal()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Tickets</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-list>
<ion-item *ngFor="let ticket of tickets$ | async" [href]="ticket.url">
{{ ticket.name }}
</ion-item>
</ion-list>
</ion-content>
</ng-template>
</ion-modal>
<ion-modal
trigger="open-description-modal"
[initialBreakpoint]="0.4"
[breakpoints]="[0.4, 0.75, 1]"
>
<ng-template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="end">
<ion-button (click)="onCloseModal()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Stage description</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h3>{{ stageName$ | async }}</h3>
<p class="stage-description">{{ stageDescription$ | async }}</p>
</ion-content>
</ng-template>
</ion-modal>
}

@if (tickets$ | async) {
<ion-modal
trigger="open-tickets-modal"
[initialBreakpoint]="0.4"
[breakpoints]="[0.4, 0.75]"
>
<ng-template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="end">
<ion-button (click)="onCloseModal()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Tickets</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-list>
<ion-item *ngFor="let ticket of tickets$ | async" [href]="ticket.url">
{{ ticket.name }}
</ion-item>
</ion-list>
</ion-content>
</ng-template>
</ion-modal>
}
Loading

0 comments on commit a950868

Please sign in to comment.