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

Fix chart background image scaling for mobile devices

Browse Source 
The background pattern image was not scaling appropriately on mobile screens,
causing only a portion of the banknote to be visible in the pattern tiles.

Changes:
- Added responsive scaling logic for background pattern image
- Mobile devices (<768px) now use proportional scaling based on viewport width
- Tablet devices (768-1200px) use 70% scaling
- Desktop devices maintain full-size image
- Uses temporary canvas to create scaled pattern for optimal display

This ensures the entire banknote is visible in pattern tiles across all device sizes.
This commit is contained in:
Claude
2025-11-22 05:14:52 +00:00
parent 017bd9dd8f
commit b3f7204291
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.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
const chart = new Chart(ctx, {