From 154b5e3a051e90fc0bf44be5573c236417014e66 Mon Sep 17 00:00:00 2001
From: Rodrigo Silva Mendoza <xvandish@users.noreply.github.com>
Date: Thu, 28 Oct 2021 07:58:59 -0700
Subject: [PATCH] Image modal fixes (#299)

* expand btn fit within container, constrain tall images to viewport height, attatch click handler to expand btn

* Remove comment

Co-authored-by: Andrew Fischer <afischer@users.noreply.github.com>
---
 layouts/partials/imgModal.ejs        | 13 +++++-
 styles/partials/core/_furniture.scss | 60 ++++++++++++++++++----------
 2 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/layouts/partials/imgModal.ejs b/layouts/partials/imgModal.ejs
index a5722f1c..413d2dec 100644
--- a/layouts/partials/imgModal.ejs
+++ b/layouts/partials/imgModal.ejs
@@ -26,13 +26,17 @@
     let wrapperDiv = document.createElement('div')
     wrapperDiv.className = 'image-wrapper'
 
+    let innerWrapper = document.createElement('div')
+    innerWrapper.className = 'inner-wrapper'
+
     let expandBtn = document.createElement('button')
     expandBtn.setAttribute('aria-label', 'expand this image')
     expandBtn.title = 'expand this image'
     expandBtn.className='expand-image-btn'
     expandBtn.appendChild(expandIconSvg)
 
-    wrapperDiv.appendChild(expandBtn)
+    innerWrapper.appendChild(expandBtn)
+    wrapperDiv.appendChild(innerWrapper)
 
     imgWrapper = wrapperDiv // add to cache
 
@@ -42,9 +46,14 @@
   function wrapImageInOverlay(imgElement) {
     // clone the wrapper so the original isn't mutated and we can reuse it
     const overlayWrapper = createImageOverlayWrapper().cloneNode(true)
+    
+    // make the generic expand button included in the wrapper work for this element
+    overlayWrapper.getElementsByTagName('button')[0].onclick = () => expandImage(imgElement.src)
 
+    // Put the overlay wrapper where the image used to be, then append image wrapper to overlayWrapper's
+    // innerWrapper
     imgElement.parentNode.insertBefore(overlayWrapper, imgElement)
-    overlayWrapper.appendChild(imgElement)
+    overlayWrapper.getElementsByClassName('inner-wrapper')[0].appendChild(imgElement)
   }
 
   window.onload = () => {
diff --git a/styles/partials/core/_furniture.scss b/styles/partials/core/_furniture.scss
index 047507a6..bacfa101 100644
--- a/styles/partials/core/_furniture.scss
+++ b/styles/partials/core/_furniture.scss
@@ -452,29 +452,46 @@
   }
 }
 
-// the image-wrapper class is added for the benefit of the
-// Image Modal, so co-locating it here
-.image-wrapper { 
+
+// the outer wrapper allows us to center the inner-wrapper, which itself
+// fits exactly the image - so in effect, centering the inner wrapper
+.image-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center; 
+
+  // The inner wrapper allows us to fit the button onto the bottom right
+  // corner no matter the image dimenension
+  .inner-wrapper {
     position: relative;
+    width: min-content;
+
+    .expand-image-btn {
+      height: 60px;
+      width: 60px;
+      position: absolute;
+      bottom: 30px;
+      right: 10px;
+      opacity: 0;
+      transition: opacity 0.3s ease 0s;
+      background-color: transparent;
+      pointer-events: none;
+      border: none;
+    }
 
-	.expand-image-btn {
-		height: 60px;
-		width: 60px;
-		position: absolute;
-		bottom: 25px;
-		right: 25px;
-		opacity: 0;
-		transition: opacity 0.3s ease 0s;
-		background-color: transparent;
-		pointer-events: none;
-		border: none;
-	}
-	
-	&:hover {
-		.expand-image-btn {
-			opacity: 1;
-		}
-	}
+    &:hover {
+      .expand-image-btn {
+        opacity: 1;
+      }
+    }
+  }
 }
 
 .image-modal {
@@ -498,6 +515,7 @@
     margin: auto;
     display: block;
     max-width: 100%;
+    max-height: 100%;
     cursor: default;
   }
 }