Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

improved images alignment

Browse source
This commit is contained in:
partisan 2024-12-03 14:37:25 +01:00
parent a17deb4af1
commit 3a2db4a03c
2 changed files with 17 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
static/css/style.css
View file

@ -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;
}
} */
}

24
static/js/imagetitletrim.js
View file

@ -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
}
});
});