diff --git a/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css b/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css index 98256b7d..60fb0283 100644 --- a/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css +++ b/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css @@ -1,33 +1,3 @@ -.lightbox { - position: fixed; /* Stay in place */ - z-index: 1100; /* Sit on top */ - left: 0; - top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: hidden; - cursor: pointer; -} - -app-gallery-lightbox-photo { - overflow: hidden; -} - -.blackCanvas { - position: fixed; /* Stay in place */ - z-index: 1099; /* Sit on top */ - left: 0; - top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - background-color: black; - transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - -webkit-transition: all 0.3s ease-in-out; - -moz-transition: all 0.3s ease-in-out; -} - .navigation-arrow { width: 30px; min-width: 60px; @@ -186,19 +156,6 @@ app-gallery-lightbox-photo { animation: blink 3s ease-in-out infinite; } -app-info-panel { - z-index: 1100; /* Sit on top */ - position: fixed; - height: 100vh; - max-width: 100vw; - right: 0; - top: 0; - transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - -moz-transition: all 0.3s ease-in-out; - -webkit-transition: all 0.3s ease-in-out; -} .controls-zoom { bottom: 0; @@ -216,8 +173,6 @@ app-info-panel { } - - input[type="range"].zoom-progress { height: 11px; margin-top: 3px; @@ -235,8 +190,6 @@ input[type="range"].zoom-progress::-moz-range-track { } - - .controls-zoom .oi { cursor: pointer; } diff --git a/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html b/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html index 2c369aef..cb47458a 100644 --- a/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html +++ b/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html @@ -1,4 +1,4 @@ -
+
{{Title}}
; private timerSub: Subscription; private prevDrag = {x: 0, y: 0}; diff --git a/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.css index 98256b7d..e4e257a7 100644 --- a/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.css +++ b/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.css @@ -28,164 +28,6 @@ app-gallery-lightbox-photo { -moz-transition: all 0.3s ease-in-out; } -.navigation-arrow { - width: 30px; - min-width: 60px; - height: 100px; - position: absolute; - top: calc(50% - 50px); - display: inline-block; - padding: 15px; - cursor: pointer; - font-size: xx-large; - left: 0; -} - -.navigation-arrow span { - top: 20px; -} - -#controllers-container { - z-index: 1100; - width: 100%; - height: 100%; - left: 0; - top: 0; - opacity: 1.0; - position: fixed; - color: white; - transition: width 0.3s ease-in-out, opacity 1s; - -webkit-transition: width 0.3s ease-in-out, opacity 1s; - -o-transition: width 0.3s ease-in-out, opacity 1s; - -ms-transition: width 0.3s ease-in-out, opacity 1s; - -moz-transition: width 0.3s ease-in-out, opacity 1s; -} - -#controllers-container.dim-controls { - opacity: 0.1; -} - -#controllers-container.dim-controls-video { - opacity: 0; -} - -#swipeable-container { - height: 100%; -} - -#rightArrow { - right: 0; - left: auto; - text-align: right; -} - -.controls { - height: initial; - text-align: right; - width: 100%; - padding: 5px; - font-size: large; -} - -.controls .control-button { - margin-left: 0.2em; - margin-right: 0.2em; - display: inline-block; - padding: 0 0.5rem; - font-size: 1.5rem; - color: white; - cursor: pointer; -} - -.controls .button-disabled { - color: #888; -} - -.controls-top { - top: 0; -} - -.controls-caption { - opacity: 0.5; - top: 0; - position: absolute; - height: initial; - text-align: left; - width: 75%; - padding: 5px 13px; - font-size: 1.5rem; -} - -.controls-playback { - padding-right: 15px; - bottom: 0; - position: absolute; -} - -.controls-video { - padding-right: 15px; - bottom: 0; - position: absolute; -} - -.controls-video .oi, -.controls-video input { - color: white; - cursor: pointer; - -} - -.controls-big-play span { - font-size: 20vh; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.controls-video input[type=range] { - padding: 0; - margin-top: 6px; -} - -.controls-video .oi { - text-align: center; - max-width: 45px; - margin-left: 10px; -} - -.highlight { - opacity: 0.5; - transition: opacity .2s ease-out; - -moz-transition: opacity .2s ease-out; - -webkit-transition: opacity .2s ease-out; - -o-transition: opacity .2s ease-out; - -ms-transition: opacity .2s ease-out; -} - -.highlight:hover { - opacity: 1.0; -} - -@-webkit-keyframes blink { - 0% { - opacity: 0.5; - } - 25% { - opacity: 1.0; - } - 75% { - opacity: 1.0; - } - 100% { - opacity: 0.5; - } -} - -.button-active { - animation: blink 3s ease-in-out infinite; -} - app-info-panel { z-index: 1100; /* Sit on top */ position: fixed; @@ -199,44 +41,3 @@ app-info-panel { -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } - -.controls-zoom { - bottom: 0; - position: absolute; - margin-bottom: 10px; - margin-right: 0; - margin-left: 0; -} - -.zoom-progress-wrapper { - margin-top: 3px; - height: 11px; - border: 1px solid white; - padding: 0; -} - - - - -input[type="range"].zoom-progress { - height: 11px; - margin-top: 3px; - border: 1px solid white; - background: transparent; - padding: 0; -} - -input[type="range"].zoom-progress::-webkit-slider-runnable-track { - background: transparent; -} - -input[type="range"].zoom-progress::-moz-range-track { - background: transparent; -} - - - - -.controls-zoom .oi { - cursor: pointer; -} diff --git a/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts index adf2c700..2d065dff 100644 --- a/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts +++ b/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts @@ -40,11 +40,11 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit { public infoPanelVisible = false; public infoPanelWidth = 0; public animating = false; - startPhotoDimension: Dimension = {top: 0, left: 0, width: 0, height: 0}; - iPvisibilityTimer: number = null; - visibilityTimer: number = null; - delayedMediaShow: string = null; public photoFrameDim = {width: 1, height: 1, aspect: 1}; + private startPhotoDimension: Dimension = {top: 0, left: 0, width: 0, height: 0}; + private iPvisibilityTimer: number = null; + private visibilityTimer: number = null; + private delayedMediaShow: string = null; private activePhotoId: number = null; private gridPhotoQL: QueryList; private subscription: { diff --git a/package-lock.json b/package-lock.json index 479ef0cf..4105704a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "pigallery2", - "version": "1.5.8", + "version": "1.5.9", "lockfileVersion": 1, "requires": true, "dependencies": {