aljaz/satshkd-vercel
1
0
Fork 0
mirror of https://github.com/aljazceru/satshkd-vercel.git synced 2025-12-17 05:04:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12 from aljazceru/claude/fix-chart-mobile-background-01C25p2dv61C1U7Mz9t89joR

Browse Source 
Fix chart background image scaling for mobile devices
This commit is contained in:
Aljaz
2025-11-22 06:32:28 +01:00
committed by GitHub
parent 017bd9dd8f b3f7204291
commit 73f4277d62
1 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
views/sats.hbs
View File

@@ -270,7 +270,24 @@
patternImage.src = '/static/assets/100eur.jpg'; patternImage.src = '/static/assets/100eur.jpg';
patternImage.onload = function() { patternImage.onload = function() {
const pattern = ctx.createPattern(patternImage, 'repeat'); // Scale the pattern image based on viewport size for better mobile display
const scaleFactor = window.innerWidth < 768
? Math.max(0.3, window.innerWidth / 1500) // Mobile: scale down proportionally
: window.innerWidth < 1200
? 0.7 // Tablet: moderate scaling
: 1.0; // Desktop: full size
// Create a temporary canvas to scale the image
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
tempCanvas.width = patternImage.width * scaleFactor;
tempCanvas.height = patternImage.height * scaleFactor;
// Draw scaled image to temporary canvas
tempCtx.drawImage(patternImage, 0, 0, tempCanvas.width, tempCanvas.height);
// Create pattern from scaled image
const pattern = ctx.createPattern(tempCanvas, 'repeat');
// Initialize Chart.js // Initialize Chart.js
const chart = new Chart(ctx, { const chart = new Chart(ctx, {