Merge pull request #6 from koloml/media-boxes-positions

Fixed Maintenance popups getting out of screen on the start and on the end of the grid rows

src/content/listing.js

@@ -1,10 +1,13 @@
 import {createMaintenancePopup} from "$lib/components/MaintenancePopup.js";
 import {createMediaBoxTools} from "$lib/components/MediaBoxTools.js";
-import {initializeMediaBox} from "$lib/components/MediaBoxWrapper.js";
+import {calculateMediaBoxesPositions, initializeMediaBox} from "$lib/components/MediaBoxWrapper.js";
 import {createMaintenanceStatusIcon} from "$lib/components/MaintenanceStatusIcon.js";
 import {createImageShowFullscreenButton} from "$lib/components/ImageShowFullscreenButton.js";
 
-document.querySelectorAll('.media-box').forEach(mediaBoxElement => {
+/** @type {NodeListOf<HTMLElement>} */
+const mediaBoxes = document.querySelectorAll('.media-box');
+
+mediaBoxes.forEach(mediaBoxElement => {
   initializeMediaBox(mediaBoxElement, [
     createMediaBoxTools(
       createMaintenancePopup(),
@@ -18,3 +21,5 @@ document.querySelectorAll('.media-box').forEach(mediaBoxElement => {
     window.dispatchEvent(new CustomEvent('resize'));
   })
 });
+
+calculateMediaBoxesPositions(mediaBoxes);

src/lib/components/MediaBoxWrapper.js

@@ -78,6 +78,29 @@ export function initializeMediaBox(mediaBoxContainer, childComponentElements) {
   }
 }
 
+/**
+ * @param {NodeListOf<HTMLElement>} mediaBoxesList
+ */
+export function calculateMediaBoxesPositions(mediaBoxesList) {
+  window.addEventListener('resize', () => {
+    /** @type {HTMLElement|null} */
+    let lastMediaBox = null,
+      /** @type {number|null} */
+      lastMediaBoxPosition = null;
+
+    for (let mediaBoxElement of mediaBoxesList) {
+      const yPosition = mediaBoxElement.getBoundingClientRect().y;
+      const isOnTheSameLine = yPosition === lastMediaBoxPosition;
+
+      mediaBoxElement.classList.toggle('media-box--first', !isOnTheSameLine);
+      lastMediaBox?.classList.toggle('media-box--last', !isOnTheSameLine);
+
+      lastMediaBox = mediaBoxElement;
+      lastMediaBoxPosition = yPosition;
+    }
+  })
+}
+
 /**
  * @typedef {Object} ImageURIs
  * @property {string} full

src/styles/content/listing.scss

@@ -95,6 +95,51 @@
     display: none;
   }
 
+  &.media-box--first:not(.media-box--last) {
+    .media-box-tools:before {
+      left: -1px;
+    }
+
+    .media-box-tools:after {
+      right: -75%;
+    }
+
+    .maintenance-popup {
+      left: -1px;
+      right: -75%;
+    }
+  }
+
+  &.media-box--last:not(.media-box--first) {
+    .media-box-tools:before {
+      left: -75%;
+    }
+
+    .media-box-tools:after {
+      right: -1px;
+    }
+
+    .maintenance-popup {
+      left: -75%;
+      right: -1px;
+    }
+  }
+
+  &.media-box--last.media-box--first {
+    .media-box-tools:before {
+      left: -1px;
+    }
+
+    .media-box-tools:after {
+      right: -1px;
+    }
+
+    .maintenance-popup {
+      left: -1px;
+      right: -1px;
+    }
+  }
+
   &:hover {
     .media-box-tools.has-active-profile {
       &:before, &:after {