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

feat: Add draggable chart resizer and fix flexible layout to prevent empty space

Browse Source
This commit is contained in:
DiTus
2026-03-22 20:08:15 +01:00
parent 5b6b134c16
commit df657ec621
1 changed files with 58 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
index.html
View File

@ -80,7 +80,7 @@
<div class="flex flex-1 pt-16 overflow-hidden">
<!-- Main Content -->
<main class="flex-1 overflow-y-auto pb-20 md:pb-0 no-scrollbar">
<main class="flex-1 flex flex-col overflow-y-auto pb-20 md:pb-0 no-scrollbar">
<!-- Price Statistics -->
<section id="priceHeader" class="grid grid-cols-2 md:grid-cols-4 gap-2 px-4 py-4 border-b border-[#1e293b] bg-[#0d1421]">
<div>
@ -102,7 +102,7 @@
</section>
<!-- Chart Container -->
<section class="relative w-full bg-[#0d1421] h-[60vh] md:h-[70vh]" data-purpose="chart-container" id="chartWrapper">
<section class="relative w-full bg-[#0d1421] flex-1 min-h-[50vh]" data-purpose="chart-container" id="chartWrapper">
<div id="chart" class="w-full h-full"></div>
<!-- Horizontal Drawing Toolbar (Top) -->
@ -323,8 +323,13 @@
</div>
</section>
<!-- 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 class="w-10 h-0.5 bg-gray-500 rounded opacity-0 group-hover:opacity-100 transition-opacity"></div>
</div>
<!-- Technical Analysis Section -->
<section class="px-4 py-6 bg-[#0d1421] min-h-[300px]" id="taPanel">
<section class="px-4 py-4 bg-[#0d1421] shrink-0" id="taPanel">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-bold flex items-center gap-2">
<span class="material-symbols-outlined text-[#b6c4ff]">analytics</span>
@ -497,6 +502,56 @@
}
}
};
// Chart Resizer Logic
document.addEventListener('DOMContentLoaded', () => {
const resizer = document.getElementById('mainChartResizer');
const chartWrapper = document.getElementById('chartWrapper');
let isResizing = false;
let lastDownY = 0;
if (resizer && chartWrapper) {
resizer.addEventListener('mousedown', (e) => {
isResizing = true;
lastDownY = e.clientY;
document.body.style.cursor = 'row-resize';
chartWrapper.style.pointerEvents = 'none'; // Prevent iframe/canvas capturing mouse
});
document.addEventListener('mousemove', (e) => {
if (!isResizing) return;
const deltaY = e.clientY - lastDownY;
lastDownY = e.clientY;
const newHeight = chartWrapper.offsetHeight + deltaY;
// Min 200px, Max windowHeight - 150px
if (newHeight > 200 && newHeight < window.innerHeight - 150) {
chartWrapper.style.flex = 'none';
chartWrapper.style.height = newHeight + 'px';
// Force chart layout recalculation if applicable
if (window.dashboard && window.dashboard.chart) {
const container = document.getElementById('chart');
window.dashboard.chart.applyOptions({
width: container.clientWidth,
height: container.clientHeight
});
}
}
});
document.addEventListener('mouseup', () => {
if (isResizing) {
isResizing = false;
document.body.style.cursor = '';
chartWrapper.style.pointerEvents = 'auto';
}
});
}
});
</script>
<script src="./config.js"></script>