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

69
static/css/style.css
View file

@ -252,22 +252,22 @@ html {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
/* container */
.images { .images {
margin: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-right: 35.4%; justify-content: center;
max-width: 100%;
position: relative;
} }
.image { .image {
flex-grow: 1; flex: 1 1 auto;
padding: .5rem .5rem 2rem .5rem; padding: .5rem .5rem 2rem .5rem;
margin: .25rem; margin: .25rem;
border: 1px solid #00000000; border: 1px solid #00000000;
border-radius: 12px; border-radius: 12px;
height: 10rem; height: 10rem;
max-width: 20rem;
min-width: 3rem;
} }
.image_selected { .image_selected {
@ -1895,62 +1895,3 @@ body, h1, p, a, input, button {
color: var(--link) !important; 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() { function trimTitles() {
const images = document.querySelectorAll('.images .image'); const images = document.querySelectorAll('.images .image');
images.forEach((element) => { images.forEach((element) => {
// Skip if the image has already been processed
if (element.classList.contains('checked')) return;
const imgElement = element.querySelector('img.clickable'); const imgElement = element.querySelector('img.clickable');
const titleElement = element.querySelector('.img_title.clickable'); const titleElement = element.querySelector('.img_title.clickable');
const detailsElement = element.querySelector('.details'); const detailsElement = element.querySelector('.details');
// Only process if the image is fully loaded
if (imgElement.complete && imgElement.naturalWidth) { if (imgElement.complete && imgElement.naturalWidth) {
const imageWidth = imgElement.clientWidth; const imageWidth = imgElement.clientWidth;
// Set the width of the details div and title to match the image width // Set the width of the details div and title to match the image width
detailsElement.style.width = imageWidth + 'px'; detailsElement.style.width = imageWidth + 'px';
titleElement.style.maxWidth = imageWidth + 'px'; titleElement.style.maxWidth = imageWidth + 'px';
}
// // Add load event listener in case images load dynamically // Mark this image as processed and add it to the "checked" blacklist
// imgElement.addEventListener('load', function() { element.classList.add('checked');
// const imageWidth = imgElement.clientWidth; }
// detailsElement.style.width = imageWidth + 'px';
// titleElement.style.maxWidth = imageWidth + 'px';
// });
}); });
} }
// Call trimTitles periodically to account for dynamic loading, not happy about this one // Run trimTitles periodically every 500ms
setInterval(() => { setInterval(trimTitles, 500);
trimTitles();
}, 10);
// Observe for dynamically added images // Observe for dynamically added images
function observeNewImages() { function observeNewImages() {
observer = new MutationObserver(function(mutations) { observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) { mutations.forEach(function(mutation) {
mutation.addedNodes.forEach(function(node) { mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1 && node.classList.contains('image')) { if (node.nodeType === 1 && node.classList.contains('image') && !node.classList.contains('checked')) {
trimTitles(); trimTitles(); // Call trimTitles for newly added image
} }
}); });
}); });