From 6f1cb4195a6616d99a0e9c12ded262e658b34c43 Mon Sep 17 00:00:00 2001 From: arifal Date: Wed, 20 Aug 2025 02:37:42 +0700 Subject: [PATCH] fix handle big svg --- .../js/dashboards/potentials/inside_system.js | 127 +++++++++++++++++- .../dashboards/potentials/_inside_system.scss | 43 ++++++ 2 files changed, 169 insertions(+), 1 deletion(-) diff --git a/resources/js/dashboards/potentials/inside_system.js b/resources/js/dashboards/potentials/inside_system.js index 572742b..e52098b 100644 --- a/resources/js/dashboards/potentials/inside_system.js +++ b/resources/js/dashboards/potentials/inside_system.js @@ -292,11 +292,136 @@ function resizeDashboard() { svg.style.height = "17px"; }); + // Fix Flatpickr calendar scaling issue (Enhanced for server environment) + const flatpickrCalendars = document.querySelectorAll(".flatpickr-calendar"); + flatpickrCalendars.forEach((calendar) => { + // Force reset all transformation properties + calendar.style.transform = "none"; + calendar.style.scale = "1"; + calendar.style.position = "fixed"; + calendar.style.zIndex = "10000"; + calendar.style.fontSize = "14px"; + calendar.style.lineHeight = "normal"; + + // Apply to all child elements + const allElements = calendar.querySelectorAll("*"); + allElements.forEach((element) => { + element.style.transform = "none"; + element.style.scale = "1"; + }); + + // Fix SVG inside Flatpickr with more specific targeting + const flatpickrSvgs = calendar.querySelectorAll( + "svg, .flatpickr-prev-month svg, .flatpickr-next-month svg" + ); + flatpickrSvgs.forEach((svg) => { + svg.style.transform = "none"; + svg.style.scale = "1"; + svg.style.width = "17px"; + svg.style.height = "17px"; + svg.style.maxWidth = "17px"; + svg.style.maxHeight = "17px"; + svg.style.minWidth = "17px"; + svg.style.minHeight = "17px"; + }); + }); + // Ensure horizontal scrolling is allowed if necessary if (document.body) { document.body.style.overflowX = "auto"; } } +// Debounced function for better server performance +function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + +// Additional function to force fix Flatpickr on server +function forceFlatpickrFix() { + const calendars = document.querySelectorAll(".flatpickr-calendar"); + calendars.forEach((calendar) => { + calendar.style.setProperty("transform", "none", "important"); + calendar.style.setProperty("scale", "1", "important"); + calendar.style.setProperty("position", "fixed", "important"); + calendar.style.setProperty("z-index", "10000", "important"); + + const svgs = calendar.querySelectorAll("svg"); + svgs.forEach((svg) => { + svg.style.setProperty("width", "17px", "important"); + svg.style.setProperty("height", "17px", "important"); + svg.style.setProperty("transform", "none", "important"); + svg.style.setProperty("scale", "1", "important"); + }); + }); +} + window.addEventListener("load", resizeDashboard); -window.addEventListener("resize", resizeDashboard); +window.addEventListener("resize", debounce(resizeDashboard, 100)); + +// Force fix on various events for server environment +window.addEventListener("load", forceFlatpickrFix); +document.addEventListener("click", debounce(forceFlatpickrFix, 50)); +window.addEventListener("scroll", debounce(forceFlatpickrFix, 100)); + +// Fix Flatpickr when it's opened dynamically +document.addEventListener("DOMContentLoaded", function () { + // Add mutation observer to handle dynamically created Flatpickr calendars + const observer = new MutationObserver(function (mutations) { + mutations.forEach(function (mutation) { + if (mutation.type === "childList") { + mutation.addedNodes.forEach(function (node) { + if ( + node.nodeType === 1 && + node.classList && + node.classList.contains("flatpickr-calendar") + ) { + // Fix newly created Flatpickr calendar (Enhanced for server) + node.style.transform = "none"; + node.style.scale = "1"; + node.style.position = "fixed"; + node.style.zIndex = "10000"; + node.style.fontSize = "14px"; + node.style.lineHeight = "normal"; + + // Apply to all child elements immediately + const allElements = node.querySelectorAll("*"); + allElements.forEach((element) => { + element.style.transform = "none"; + element.style.scale = "1"; + }); + + // Fix SVG inside the new calendar with enhanced targeting + const svgs = node.querySelectorAll( + "svg, .flatpickr-prev-month svg, .flatpickr-next-month svg" + ); + svgs.forEach((svg) => { + svg.style.transform = "none"; + svg.style.scale = "1"; + svg.style.width = "17px"; + svg.style.height = "17px"; + svg.style.maxWidth = "17px"; + svg.style.maxHeight = "17px"; + svg.style.minWidth = "17px"; + svg.style.minHeight = "17px"; + }); + } + }); + } + }); + }); + + // Observe document body for new Flatpickr calendars + observer.observe(document.body, { + childList: true, + subtree: true, + }); +}); diff --git a/resources/scss/dashboards/potentials/_inside_system.scss b/resources/scss/dashboards/potentials/_inside_system.scss index f792343..e65063f 100644 --- a/resources/scss/dashboards/potentials/_inside_system.scss +++ b/resources/scss/dashboards/potentials/_inside_system.scss @@ -57,6 +57,49 @@ transform: none !important; } +// Fix for Flatpickr calendar scaling issue (Enhanced for server environment) +.flatpickr-calendar, +.flatpickr-calendar.animate, +.flatpickr-calendar.open { + transform: none !important; + position: fixed !important; + z-index: 10000 !important; + font-size: 14px !important; + line-height: normal !important; + scale: 1 !important; +} + +.flatpickr-calendar * { + transform: none !important; + scale: 1 !important; +} + +.flatpickr-calendar svg, +.flatpickr-prev-month svg, +.flatpickr-next-month svg, +.flatpickr-calendar .flatpickr-prev-month svg, +.flatpickr-calendar .flatpickr-next-month svg { + width: 17px !important; + height: 17px !important; + max-width: 17px !important; + max-height: 17px !important; + min-width: 17px !important; + min-height: 17px !important; + transform: none !important; + scale: 1 !important; +} + +// Override any parent transformations specifically for server +body .flatpickr-calendar { + transform: none !important; + scale: 1 !important; +} + +html .flatpickr-calendar { + transform: none !important; + scale: 1 !important; +} + .lack-of-potential-wrapper::before { content: ""; position: absolute;