p1otek/winterfail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve chart resizer for mobile with touch support, save chart height, disable sidebar scrollbar

Browse Source
This commit is contained in:
DiTus
2026-03-22 20:31:59 +01:00
parent df657ec621
commit a3bf8624fb
1 changed files with 33 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -324,8 +324,8 @@
</section> </section>
<!-- Draggable Divider --> <!-- Draggable Divider -->
<div id="mainChartResizer" class="h-1.5 bg-[#1e293b] hover:bg-blue-500 cursor-row-resize shrink-0 transition-colors z-20 flex items-center justify-center group relative"> <div id="mainChartResizer" class="h-4 bg-[#1e293b] hover:bg-blue-500 cursor-row-resize shrink-0 transition-colors z-20 flex items-center justify-center group relative">
<div class="w-10 h-0.5 bg-gray-500 rounded opacity-0 group-hover:opacity-100 transition-opacity"></div> <div class="w-10 h-0.5 bg-gray-500 rounded opacity-50 transition-all"></div>
</div> </div>
<!-- Technical Analysis Section --> <!-- Technical Analysis Section -->
@ -428,7 +428,7 @@
<span class="material-symbols-outlined text-sm">menu</span> <span class="material-symbols-outlined text-sm">menu</span>
</button> </button>
<div class="flex-1 overflow-y-auto p-0 sidebar-content bg-[#0d1421]"> <div class="flex-1 overflow-y-auto p-0 sidebar-content bg-[#0d1421] no-scrollbar">
<div class="sidebar-tab-panel active h-full" id="tab-indicators"> <div class="sidebar-tab-panel active h-full" id="tab-indicators">
<div id="indicatorPanel" class="p-2"> <div id="indicatorPanel" class="p-2">
<!-- Indicators content injected here --> <!-- Indicators content injected here -->
@ -510,29 +510,33 @@
let isResizing = false; let isResizing = false;
let lastDownY = 0; let lastDownY = 0;
let savedHeight = localStorage.getItem('chart_height');
if (resizer && chartWrapper) { if (resizer && chartWrapper) {
resizer.addEventListener('mousedown', (e) => { if (savedHeight) {
isResizing = true; chartWrapper.style.flex = 'none';
lastDownY = e.clientY; chartWrapper.style.height = savedHeight + 'px';
document.body.style.cursor = 'row-resize'; }
chartWrapper.style.pointerEvents = 'none'; // Prevent iframe/canvas capturing mouse
});
document.addEventListener('mousemove', (e) => { const startResize = (y) => {
isResizing = true;
lastDownY = y;
document.body.style.cursor = 'row-resize';
chartWrapper.style.pointerEvents = 'none';
};
const doResize = (y) => {
if (!isResizing) return; if (!isResizing) return;
const deltaY = e.clientY - lastDownY; const deltaY = y - lastDownY;
lastDownY = e.clientY; lastDownY = y;
const newHeight = chartWrapper.offsetHeight + deltaY; const newHeight = chartWrapper.offsetHeight + deltaY;
// Min 200px, Max windowHeight - 150px
if (newHeight > 200 && newHeight < window.innerHeight - 150) { if (newHeight > 200 && newHeight < window.innerHeight - 150) {
chartWrapper.style.flex = 'none'; chartWrapper.style.flex = 'none';
chartWrapper.style.height = newHeight + 'px'; chartWrapper.style.height = newHeight + 'px';
// Force chart layout recalculation if applicable
if (window.dashboard && window.dashboard.chart) { if (window.dashboard && window.dashboard.chart) {
const container = document.getElementById('chart'); const container = document.getElementById('chart');
window.dashboard.chart.applyOptions({ window.dashboard.chart.applyOptions({
@ -541,15 +545,27 @@
}); });
} }
} }
}); };
document.addEventListener('mouseup', () => { const endResize = () => {
if (isResizing) { if (isResizing) {
isResizing = false; isResizing = false;
document.body.style.cursor = ''; document.body.style.cursor = '';
chartWrapper.style.pointerEvents = 'auto'; chartWrapper.style.pointerEvents = 'auto';
const currentHeight = chartWrapper.style.height;
localStorage.setItem('chart_height', currentHeight ? parseFloat(currentHeight) : 75);
} }
}); };
resizer.addEventListener('mousedown', (e) => startResize(e.clientY));
resizer.addEventListener('touchstart', (e) => startResize(e.touches[0].clientY), {passive: false});
document.addEventListener('mousemove', (e) => doResize(e.clientY));
document.addEventListener('touchmove', (e) => doResize(e.touches[0].clientY), {passive: false});
document.addEventListener('mouseup', endResize);
document.addEventListener('touchend', endResize);
document.addEventListener('touchcancel', endResize);
} }
}); });
</script> </script>