xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects Activity

Fixing lightbox icon positions #587

Browse Source
This commit is contained in:
Patrik J. Braun 2023-08-25 22:33:43 +02:00
parent 5d69d225df
commit 9e3185154d
3 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
View File

@ -13,14 +13,19 @@
}
.navigation-arrow ng-icon {
margin-left: -0.3em;
margin-right: -0.3em;
transform: translateY(-50%);
top: 50%;
position: relative;
left: 50%;
position: absolute;
line-height: 0;
}
.navigation-arrow-left ng-icon {
transform: translate(-55%,-50%);
}
.navigation-arrow-right ng-icon {
transform: translate(-45%,-50%);
}
#controllers-container {
z-index: 1100;
color: white;
@ -84,6 +89,13 @@
z-index: 4;
top: 0;
}
.controls-top ng-icon {
vertical-align: middle;
}
.controls-top ng-icon ::ng-deep svg {
vertical-align: top;
}
.controls-caption {
opacity: 0.7;
@ -291,8 +303,8 @@ input[type="range"].zoom-progress::-moz-range-track {
}
canvas {
right: 12px;
position: relative;
top: -50%;
transform: translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

10
src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
View File

@ -8,14 +8,14 @@
<div class="controls-background rounded-start-bottom pe-1 pt-1">
<div class="highlight control-button" (click)="toggleInfoPanel.emit()"
title="info key: i" i18n-title>
<ng-icon class="align-top" size="1.2em" name="ionInformationOutline"></ng-icon>
<ng-icon name="ionInformationOutline"></ng-icon>
</div>
<div *ngIf="fullScreenService.isFullScreenEnabled()"
class="highlight control-button"
(click)="toggleFullScreen.emit()"
title="toggle fullscreen, key: f" i18n-title>
<ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
<ng-icon size="0.85em"
name="ionContractOutline"></ng-icon>
</div>
@ -23,7 +23,7 @@
class="highlight control-button"
(click)="toggleFullScreen.emit(true)"
title="toggle fullscreen, key: f" i18n-title>
<ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
<ng-icon size="0.85em"
name="ionExpandOutline"></ng-icon>
</div>
@ -165,12 +165,12 @@
</div>
<div [class.dim-controls]="controllersDimmed" class="navigation-arrow highlight rounded-end"
<div [class.dim-controls]="controllersDimmed" class="navigation-arrow navigation-arrow-left highlight rounded-end"
*ngIf="navigation.hasPrev && zoom == 1" title="key: left arrow" id="leftArrow" i18n-title
(click)="previousPhoto.emit()">
<ng-icon name="ionChevronBackOutline"></ng-icon>
</div>
<div [class.dim-controls]="controllersDimmed" class="navigation-arrow highlight rounded-start"
<div [class.dim-controls]="controllersDimmed" class="navigation-arrow navigation-arrow-right highlight rounded-start"
*ngIf="navigation.hasNext && zoom == 1" title="key: right arrow" id="rightArrow" i18n-title
(click)="nextMediaManuallyTriggered()">
<ng-icon name="ionChevronForwardOutline"></ng-icon>

2
src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts
View File

@ -282,7 +282,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
) {
return;
}
this.nextPhoto.emit();
// this.nextPhoto.emit();
};
private drawSliderProgress(t: number) {