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 <[email protected]>
nytimes · Oct 28, 2021 · 154b5e3 · 154b5e3
1 parent 414426f
commit 154b5e3
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 23 deletions.
diff --git 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
@@ -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;
   }
 }