mirror of
https://github.com/bpatrik/pigallery2.git
synced 2024-12-29 02:12:25 +02:00
refactoring lightbox
This commit is contained in:
Patrik J. Braun
parent
845361736f
commit
2162beb51e
@ -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;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="controllers-container" #root>
|
||||
<div id="controllers-container" #root>
|
||||
<div class="controls-caption" *ngIf="Title">{{Title}}</div>
|
||||
<div class="controls controls-top">
|
||||
<a class="highlight control-button"
|
||||
|
||||
@ -40,10 +40,8 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit {
|
||||
public controllersDimmed = false;
|
||||
public controllersAlwaysOn = false;
|
||||
public controllersVisible = true;
|
||||
visibilityTimer: number = null;
|
||||
// delayedMediaShow: string = null;
|
||||
public drag = {x: 0, y: 0};
|
||||
|
||||
private visibilityTimer: number = null;
|
||||
private timer: Observable<number>;
|
||||
private timerSub: Subscription;
|
||||
private prevDrag = {x: 0, y: 0};
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -40,11 +40,11 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
|
||||
public infoPanelVisible = false;
|
||||
public infoPanelWidth = 0;
|
||||
public animating = false;
|
||||
startPhotoDimension: Dimension = <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 = <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<GalleryPhotoComponent>;
|
||||
private subscription: {
|
||||
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "pigallery2",
|
||||
"version": "1.5.8",
|
||||
"version": "1.5.9",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user