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.

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

551 content in map modal is hidden #565

Merged
merged 2 commits into from
Apr 1, 2024
Merged

551 content in map modal is hidden #565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2eb2d59
update prettirer and override supabase auth-js to fix error
Apr 1, 2024
bca5e6d
Fix hidden content in map feature modal
Apr 1, 2024
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
5 changes: 4 additions & 1 deletion .vscode/settings.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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