xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
Code Actions Projects Activity

improving unrendered photo position

Browse Source
This commit is contained in:
Patrik J. Braun 2018-05-15 21:30:41 -04:00
parent a30fee8c45
commit a2c39653e5
6 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css
View File

@ -7,9 +7,11 @@
} }
.static span { .static span {
top: calc(50% - 61px); top: 50%;
left: calc(50% - 25px); transform: translate(-50%, -50%);
margin-top: 36px; -webkit-transform: translate(-50%, -50%);
left: 50%;
display: table;
} }
.sk-cube-grid { .sk-cube-grid {

2
frontend/app/gallery/grid/photo/photo.grid.gallery.component.css
View File

@ -7,6 +7,7 @@ img {
-ms-animation: fadein 2s; /* Internet Explorer */ -ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */ -o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s; animation: fadein 2s;
vertical-align: unset;
} }
@keyframes fadein { @keyframes fadein {
@ -61,6 +62,7 @@ img {
-moz-transition: margin .3s ease-out, background-color .3s ease-out; -moz-transition: margin .3s ease-out, background-color .3s ease-out;
-webkit-transition: margin .3s ease-out, background-color .3s ease-out; -webkit-transition: margin .3s ease-out, background-color .3s ease-out;
-o-transition: margin .3s ease-out, background-color .3s ease-out; -o-transition: margin .3s ease-out, background-color .3s ease-out;
-ms-transition: margin .3s ease-out, background-color .3s ease-out;
} }
.photo-container { .photo-container {

4
frontend/app/gallery/lightbox/lightbox.gallery.component.css
View File

@ -23,6 +23,7 @@ app-gallery-lightbox-photo {
background-color: black; background-color: black;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
-o-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; -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;
} }
@ -53,6 +54,7 @@ app-gallery-lightbox-photo {
transition: width 0.3s ease-in-out, opacity 1s; transition: width 0.3s ease-in-out, opacity 1s;
-webkit-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; -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; -moz-transition: width 0.3s ease-in-out, opacity 1s;
} }
@ -104,6 +106,7 @@ app-gallery-lightbox-photo {
-moz-transition: opacity .2s ease-out; -moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out; -webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out; -o-transition: opacity .2s ease-out;
-ms-transition: opacity .2s ease-out;
} }
.highlight:hover { .highlight:hover {
@ -138,6 +141,7 @@ app-info-panel {
top: 0; top: 0;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
-o-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; -moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;
} }

3
frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.css
View File

@ -12,6 +12,7 @@
cursor: pointer; cursor: pointer;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
-o-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; -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;
} }
@ -31,6 +32,7 @@
background-color: black; background-color: black;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
-o-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; -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;
} }
@ -64,6 +66,7 @@
-moz-transition: opacity .2s ease-out; -moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out; -webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out; -o-transition: opacity .2s ease-out;
-ms-transition: opacity .2s ease-out;
} }
.highlight:hover { .highlight:hover {

1
frontend/app/style.css
View File

@ -30,5 +30,6 @@
-webkit-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }

1
frontend/index.html
View File

@ -22,6 +22,7 @@
<div style="position: absolute; <div style="position: absolute;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
left: 50%; left: 50%;
text-align: center"> text-align: center">
<img src="assets/icon.png" style="max-width: 256px"/> <img src="assets/icon.png" style="max-width: 256px"/>