Kleverig Forum Thumbnail Enlarger

1// ==UserScript==
2// @name		Kleverig Forum Thumbnail Enlarger
3// @description		Makes forum thread thumbnails bigger for better visibility
4// @version		1.1.2
5// @match		https://*.kleverig.eu/*
6// @icon		https://www.kleverig.eu/favicon.ico
7// ==/UserScript==
8(function() {
9    'use strict';
10    
11    console.log('Kleverig Forum Thumbnail Enlarger: Starting...');
12    
13    // Function to enlarge thumbnails
14    function enlargeThumbnails() {
15        const thumbnails = document.querySelectorAll('img.preview');
16        console.log(`Found ${thumbnails.length} thumbnails to enlarge`);
17        
18        thumbnails.forEach(thumbnail => {
19            thumbnail.style.width = '120px';
20            thumbnail.style.height = '120px';
21            thumbnail.style.objectFit = 'cover';
22        });
23    }
24    
25    // Apply styles immediately
26    enlargeThumbnails();
27    
28    // Also add CSS to ensure thumbnails stay enlarged
29    TM_addStyle(`
30        img.preview {
31            width: 120px !important;
32            height: 120px !important;
33            object-fit: cover !important;
34        }
35        
36        /* Adjust the thread status link container to accommodate larger thumbnails */
37        a.threadstatus {
38            display: inline-block;
39            float: left;
40            width: 120px !important;
41            height: 120px !important;
42        }
43        
44        /* Ensure the threadinfo container has enough space */
45        .threadinfo {
46            min-height: 130px;
47        }
48        
49        /* Shift the inner content to the right so titles aren't cut off */
50        .threadinfo .inner {
51            margin-left: 135px !important;
52        }
53    `);
54    
55    // Watch for dynamically loaded content
56    const observer = new MutationObserver((mutations) => {
57        let shouldEnlarge = false;
58        
59        mutations.forEach(mutation => {
60            mutation.addedNodes.forEach(node => {
61                if (node.nodeType === 1) {
62                    if (node.matches && node.matches('img.preview')) {
63                        shouldEnlarge = true;
64                    } else if (node.querySelector && node.querySelector('img.preview')) {
65                        shouldEnlarge = true;
66                    }
67                }
68            });
69        });
70        
71        if (shouldEnlarge) {
72            console.log('New thumbnails detected, enlarging...');
73            enlargeThumbnails();
74        }
75    });
76    
77    // Start observing the document for changes
78    observer.observe(document.body, {
79        childList: true,
80        subtree: true
81    });
82    
83    console.log('Kleverig Forum Thumbnail Enlarger: Active');
84})();