From 3a2db4a03ccec15d6d99389b471f88029878a269 Mon Sep 17 00:00:00 2001
From: partisan <none@noone.no>
Date: Tue, 3 Dec 2024 14:37:25 +0100
Subject: [PATCH] improved images alignment

---
 static/css/style.css        | 71 ++++---------------------------------
 static/js/imagetitletrim.js | 24 ++++++-------
 2 files changed, 17 insertions(+), 78 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 834a0ae..c173fb9 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -252,22 +252,22 @@ html {
     font-family: Arial, Helvetica, sans-serif;
 }
 
+/* container */
 .images {
-    margin: 0;
     display: flex;
     flex-wrap: wrap;
-    margin-right: 35.4%;
-    max-width: 100%;
-    position: relative;
+    justify-content: center;
 }
 
 .image {
-    flex-grow: 1;
+    flex: 1 1 auto;
     padding: .5rem .5rem 2rem .5rem;
     margin: .25rem;
     border: 1px solid #00000000;
     border-radius: 12px;
     height: 10rem;
+    max-width: 20rem;
+    min-width: 3rem;
 }
 
 .image_selected {
@@ -1894,63 +1894,4 @@ body, h1, p, a, input, button {
     .leaflet-control-attribution a {
         color: var(--link) !important;
     }
-}
-
-/* 
-:root {
-    --background-color: #ffffff;
-    --text-color: #000000;
-    --highlight: #007bff;
-    --border-color: #dddddd;
-    --search-bg: #f1f3f4;
-    --search-bg-input: #ffffff;
-    --search-bg-input-border: #dfe1e5;
-    --button: #f8f9fa;
-    --link: #1a0dab;
-    --fg: #202124;
-    --html-bg: #ffffff;
-    --snip-border: #dfe1e5;
-    --snip-background: #ffffff;
-    --image-view: #ffffff;
-    --image-view-titlebar: #f1f3f4;
-    --search-button: #5f6368;
-    --image-select: #e8f0fe;
-    --view-image-color: #f8f9fa;
-    --footer-bg: #f2f2f2;
-    --footer-font: #70757a;
-    --border: #e0e0e0;
-    --link-visited: #660099;
-    --publish-info: #70757a;
-    --green: #3c802c;
-    --box-shadow: #00000020; 
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background-color: #202124;
-        --text-color: #e8eaed;
-        --highlight: #8ab4f8;
-        --border-color: #5f6368;
-        --search-bg: #303134;
-        --search-bg-input: #202124;
-        --search-bg-input-border: #5f6368;
-        --button: #3c4043;
-        --link: #8ab4f8;
-        --fg: #e8eaed;
-        --html-bg: #202124;
-        --snip-border: #5f6368;
-        --snip-background: #303134;
-        --image-view: #202124;
-        --image-view-titlebar: #303134;
-        --search-button: #e8eaed;
-        --image-select: #5f6368;
-        --view-image-color: #202124;
-        --footer-bg: #303134;
-        --footer-font: #e8eaed;
-        --border: #5f6368;
-        --link-visited: #c79fff;
-        --publish-info: #e8eaed;
-        --green: #8ab4f8;
-        --box-shadow: #ffffff20; 
-    }
-} */
+}
\ No newline at end of file
diff --git a/static/js/imagetitletrim.js b/static/js/imagetitletrim.js
index 7579f1f..587467b 100644
--- a/static/js/imagetitletrim.js
+++ b/static/js/imagetitletrim.js
@@ -9,39 +9,37 @@ document.addEventListener('DOMContentLoaded', function() {
     function trimTitles() {
         const images = document.querySelectorAll('.images .image');
         images.forEach((element) => {
+            // Skip if the image has already been processed
+            if (element.classList.contains('checked')) return;
+
             const imgElement = element.querySelector('img.clickable');
             const titleElement = element.querySelector('.img_title.clickable');
             const detailsElement = element.querySelector('.details');
 
+            // Only process if the image is fully loaded
             if (imgElement.complete && imgElement.naturalWidth) {
                 const imageWidth = imgElement.clientWidth;
 
                 // Set the width of the details div and title to match the image width
                 detailsElement.style.width = imageWidth + 'px';
                 titleElement.style.maxWidth = imageWidth + 'px';
-            }
 
-            // // Add load event listener in case images load dynamically
-            // imgElement.addEventListener('load', function() {
-            //     const imageWidth = imgElement.clientWidth;
-            //     detailsElement.style.width = imageWidth + 'px';
-            //     titleElement.style.maxWidth = imageWidth + 'px';
-            // });
+                // Mark this image as processed and add it to the "checked" blacklist
+                element.classList.add('checked');
+            }
         });
     }
 
-    // Call trimTitles periodically to account for dynamic loading, not happy about this one
-    setInterval(() => {
-        trimTitles();
-    }, 10);
+    // Run trimTitles periodically every 500ms
+    setInterval(trimTitles, 500);
 
     // Observe for dynamically added images
     function observeNewImages() {
         observer = new MutationObserver(function(mutations) {
             mutations.forEach(function(mutation) {
                 mutation.addedNodes.forEach(function(node) {
-                    if (node.nodeType === 1 && node.classList.contains('image')) {
-                        trimTitles();
+                    if (node.nodeType === 1 && node.classList.contains('image') && !node.classList.contains('checked')) {
+                        trimTitles(); // Call trimTitles for newly added image
                     }
                 });
             });