From df4d45e3769b9edfb53f40d1a0a908d85b58ef83 Mon Sep 17 00:00:00 2001
From: Stepan Usatiuk <stepanusatiuk@gmail.com>
Date: Sun, 18 Oct 2020 23:17:04 +0300
Subject: [PATCH] properly fit photo on screen

---
 frontend/src/Photos/Overview.scss | 56 ++++++++++++++++++++++---------
 frontend/src/Photos/Photo.scss    | 19 -----------
 frontend/src/Photos/Photo.tsx     |  2 +-
 package.json                      |  2 +-
 4 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/frontend/src/Photos/Overview.scss b/frontend/src/Photos/Overview.scss
index a4af609..ff302e1 100644
--- a/frontend/src/Photos/Overview.scss
+++ b/frontend/src/Photos/Overview.scss
@@ -1,31 +1,55 @@
 @import "~@blueprintjs/core/lib/scss/variables";
 
+:root {
+    --photoOverlayDrawerWidth: 5rem;
+}
+
 #photoOverlayContainer {
     width: 100%;
     height: 100%;
-    display: flex;
     align-items: center;
     justify-content: center;
     transition: 0.3s;
 
     #photo {
+        width: calc(100vw - var(--photoOverlayDrawerWidth));
         height: 100%;
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
 
-        img {
-            box-shadow: $pt-elevation-shadow-4;
+        #photoView {
+            height: 100%;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            #photoImg {
+                object-fit: contain;
+                max-height: 100%;
+                max-width: 100%;
+                width: auto;
+                height: auto;
+                box-shadow: $pt-elevation-shadow-4;
+                transition: all 0.3s;
+
+                &.notLoaded {
+                    opacity: 0;
+                }
+
+                &.loaded {
+                    opacity: 1;
+                }
+            }
+
         }
-
-        transition: all 0.3s;
     }
 
+
     #photoOverlayDrawer {
-        height: 100%;
-        align-self: flex-end;
-        justify-self: flex-end;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: var(--photoOverlayDrawerWidth);
+        height: 100vh;
         margin-left: auto;
         display: flex;
         flex-direction: row;
@@ -42,7 +66,7 @@
 .bp3-overlay-appear {
     opacity: 0;
 
-    #photo {
+    #photoImg {
         transform: scale(0.95, 0.95);
     }
 
@@ -55,7 +79,7 @@
 .bp3-overlay-appear-active {
     opacity: 1;
 
-    #photo {
+    #photoImg {
         transform: scale(1, 1);
     }
 
@@ -68,7 +92,7 @@
 .bp3-overlay-exit {
     opacity: 1;
 
-    #photo {
+    #photoImg {
         transform: scale(1, 1);
     }
 
@@ -80,7 +104,7 @@
 .bp3-overlay-exit-active {
     opacity: 0;
 
-    #photo {
+    #photoImg {
         transform: scale(0.95, 0.95);
     }
 
diff --git a/frontend/src/Photos/Photo.scss b/frontend/src/Photos/Photo.scss
index b8baa61..6fd3f1a 100644
--- a/frontend/src/Photos/Photo.scss
+++ b/frontend/src/Photos/Photo.scss
@@ -1,25 +1,6 @@
 @import "~@blueprintjs/core/lib/scss/variables";
 
-#photoView {
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
 
-    #photo {
-        max-height: 100%;
-        max-width: 100%;
-
-        &.notLoaded {
-            opacity: 0;
-        }
-
-        &.loaded {
-            opacity: 1;
-        }
-    }
-
-}
 
 .bp3-dark {
     #photoView {}
diff --git a/frontend/src/Photos/Photo.tsx b/frontend/src/Photos/Photo.tsx
index 60139a7..7d94070 100644
--- a/frontend/src/Photos/Photo.tsx
+++ b/frontend/src/Photos/Photo.tsx
@@ -36,7 +36,7 @@ export const PhotoComponent: React.FunctionComponent<IPhotoComponentProps> = (
             {fileExists ? (
                 <div id="photoView">
                     <img
-                        id="photo"
+                        id="photoImg"
                         loading="lazy"
                         className={loaded ? "loaded" : "notLoaded"}
                         onLoad={() => setLoaded(true)}
diff --git a/package.json b/package.json
index 504940c..c38ca60 100644
--- a/package.json
+++ b/package.json
@@ -89,4 +89,4 @@
       "pre-commit": "npm run lint-all && npm run prettier-check"
     }
   }
-}
\ No newline at end of file
+}