self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-01-10 04:07:35 +02:00
Code Issues Releases Activity

Fix map open and hide animation #587

Browse Source
This commit is contained in:
Patrik J. Braun 2023-03-14 23:00:29 +01:00
parent 44978f8b53
commit b090bd5b24
4 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
View File

@ -199,7 +199,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
this.visible = true;
this.opacity = 1.0;
this.startPosition = position;
this.lightboxDimension = position;
this.lightboxDimension = Utils.clone(position);
this.lightboxDimension.top -= PageHelper.ScrollY;
this.mapDimension = {
top: 0,
@ -228,7 +228,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
this.controllersVisible = false;
const to = this.startPosition;
// iff target image out of screen -> scroll to there
// if target image out of screen -> scroll to there
if (
PageHelper.ScrollY > to.top ||
PageHelper.ScrollY + GalleryMapLightboxComponent.getScreenHeight() <

2
src/frontend/app/ui/gallery/map/map.gallery.component.css
View File

@ -24,4 +24,6 @@
background-color: transparent;
opacity: 0.8;
cursor: pointer;
position: absolute;
transform: translateY(-100%);
}

5
src/frontend/app/ui/gallery/map/map.gallery.component.html
View File

@ -1,5 +1,5 @@
<app-gallery-map-lightbox [photos]="photos" [gpxFiles]="gpxFiles"></app-gallery-map-lightbox>
<div class="clickable" id="map" #map (click)="click()">
<div class="clickable" id="map" #map>
<div
class="leaflet-map"
leaflet
@ -7,5 +7,6 @@
[leafletLayers]="markerLayer"
(leafletMapReady)="onMapReady($event)">
</div>
<div class="overlay" (click)="click()">
</div>
</div>

4
src/frontend/app/ui/gallery/map/map.gallery.component.ts
View File

@ -129,8 +129,8 @@ export class GalleryMapComponent implements OnChanges, IRenderable {
public getDimension(): Dimension {
return {
top: this.mapElement.nativeElement.offsetTop,
left: this.mapElement.nativeElement.offsetLeft,
top: this.mapElement.nativeElement.parentElement.offsetParent.offsetTop,
left: this.mapElement.nativeElement.parentElement.offsetLeft,
width: this.mapElement.nativeElement.offsetWidth,
height: this.mapElement.nativeElement.offsetHeight,
} as Dimension;