From a2c39653e59fa7676bfc739de9c459aea7c441ca Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Tue, 15 May 2018 21:30:41 -0400
Subject: [PATCH] improving unrendered photo position

---
 .../loading/loading.photo.grid.gallery.component.css      | 8 +++++---
 .../gallery/grid/photo/photo.grid.gallery.component.css   | 2 ++
 .../app/gallery/lightbox/lightbox.gallery.component.css   | 4 ++++
 .../map/lightbox/lightbox.map.gallery.component.css       | 3 +++
 frontend/app/style.css                                    | 1 +
 frontend/index.html                                       | 1 +
 6 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css b/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css
index 93234a78..69ac1d28 100644
--- a/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css
+++ b/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css
@@ -7,9 +7,11 @@
 }
 
 .static span {
-  top: calc(50% - 61px);
-  left: calc(50% - 25px);
-  margin-top: 36px;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  left: 50%;
+  display: table;
 }
 
 .sk-cube-grid {
diff --git a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.css b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.css
index b322444f..77b811ac 100644
--- a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.css
+++ b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.css
@@ -7,6 +7,7 @@ img {
   -ms-animation: fadein 2s; /* Internet Explorer */
   -o-animation: fadein 2s; /* Opera < 12.1 */
   animation: fadein 2s;
+  vertical-align: unset;
 }
 
 @keyframes fadein {
@@ -61,6 +62,7 @@ img {
   -moz-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;
+  -ms-transition: margin .3s ease-out, background-color .3s ease-out;
 }
 
 .photo-container {
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
index 158e8377..d605154b 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
@@ -23,6 +23,7 @@ app-gallery-lightbox-photo {
   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;
 }
@@ -53,6 +54,7 @@ app-gallery-lightbox-photo {
   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;
 }
 
@@ -104,6 +106,7 @@ app-gallery-lightbox-photo {
   -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 {
@@ -138,6 +141,7 @@ app-info-panel {
   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;
 }
diff --git a/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.css b/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.css
index 75d010f2..3968beb9 100644
--- a/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.css
+++ b/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.css
@@ -12,6 +12,7 @@
   cursor: pointer;
   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;
 }
@@ -31,6 +32,7 @@
   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;
 }
@@ -64,6 +66,7 @@
   -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 {
diff --git a/frontend/app/style.css b/frontend/app/style.css
index 045b3f8a..2e314e74 100644
--- a/frontend/app/style.css
+++ b/frontend/app/style.css
@@ -30,5 +30,6 @@
   -webkit-transition: all 0.5s ease-in-out;
   -moz-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;
 }
diff --git a/frontend/index.html b/frontend/index.html
index e13c015a..decf2195 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -22,6 +22,7 @@
     <div style="position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
     left: 50%;
     text-align: center">
       <img src="assets/icon.png" style="max-width: 256px"/>