Merge branch 'master' into monika_animation

1 files changed, 49 insertions, 36 deletions

diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index ba4ef8879..7bbf4a368 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -1,4 +1,32 @@
-.imageBox-cont, .imageBox-cont-interactive {
+.imageBox,
+.imageBox-dragging {
+    pointer-events: all;
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    transform-origin: top left;
+
+    .imageBox-fader {
+        pointer-events: inherit;
+    }
+}
+
+.imageBox-dragging {
+    .imageBox-fader {
+        pointer-events: none;
+    }
+}
+
+#upload-icon {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 20px;
+    height: 20px;
+}
+
+.imageBox-cont {
     padding: 0vw;
     position: absolute;
     text-align: center;
@@ -6,21 +34,13 @@
     height: 100%;
     max-width: 100%;
     max-height: 100%;
-    pointer-events: none;
-    background:transparent;
-}
-
-.imageBox-container {
-    pointer-events: all;
-    border-radius: inherit;
-    width:100%;
-    height:100%;
-    position: absolute;
-    transform-origin: top left;
-}
+    pointer-events: inherit;
+    background: transparent;
 
-.imageBox-cont-interactive {
-    pointer-events: all;
+    img {
+        height: auto;
+        width: 100%;
+    }
 }
 
 .imageBox-dot {
@@ -33,16 +53,6 @@
     background: gray;
 }
 
-.imageBox-cont img {
-    height: auto;
-    width: 100%;
-}
-
-.imageBox-cont-interactive img {
-    height: auto;
-    width: 100%;
-}
-
 #google-photos {
     transition: all 0.5s ease 0s;
     width: 30px;
@@ -55,9 +65,10 @@
     padding: 3px;
     background: white;
     cursor: pointer;
-    opacity:0.15;
+    opacity: 0.15;
 }
-#google-photos:hover{
+
+#google-photos:hover {
     opacity: 1;
 }
 
@@ -100,18 +111,18 @@
     }
 }
 
-#cf {
+.imageBox-fader {
     position: relative;
     width: 100%;
     margin: 0 auto;
     display: flex;
-    align-items: center;
     height: 100%;
     overflow: hidden;
 
     .imageBox-fadeBlocker {
         width: 100%;
         height: 100%;
+        position: absolute;
         background: black;
         display: flex;
         flex-direction: row;
@@ -126,7 +137,7 @@
     }
 }
 
-#cf img {
+.imageBox-fader img {
     position: absolute;
     left: 0;
 }
@@ -138,10 +149,12 @@
     transition: opacity 1s ease-in-out;
 }
 
-.imageBox-fadeBlocker:hover {
-    -webkit-transition: opacity 1s ease-in-out;
-    -moz-transition: opacity 1s ease-in-out;
-    -o-transition: opacity 1s ease-in-out;
-    transition: opacity 1s ease-in-out;
-    opacity: 0;
+.imageBox:hover {
+    .imageBox-fadeBlocker {
+        -webkit-transition: opacity 1s ease-in-out;
+        -moz-transition: opacity 1s ease-in-out;
+        -o-transition: opacity 1s ease-in-out;
+        transition: opacity 1s ease-in-out;
+        opacity: 0;
+    }
 }
\ No newline at end of file