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

style: update chart type icons and header layout for better mobile/desktop experience

Browse Source
This commit is contained in:
DiTus
2026-03-23 10:49:08 +01:00
parent bde7945a1b
commit c3ca5670e3
2 changed files with 44 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@ -57,62 +57,42 @@
<body class="flex flex-col h-screen overflow-hidden bg-[#0d1421] text-white font-['Inter']">
<!-- Top Navigation Bar -->
<header class="bg-[#0f131e] fixed top-0 w-full z-[60] h-16 px-6 flex items-center justify-between border-b border-[#1b1f2b]">
<div class="flex items-center gap-3">
<!-- Mobile Menu Button -->
<button id="mobileMenuBtn" class="md:hidden w-10 h-10 flex items-center justify-center text-[#8fa2b3] hover:text-white hover:bg-[#2d3a4f] rounded-md transition-colors z-50">
<span class="material-symbols-outlined text-lg">menu</span>
</button>
<header class="bg-[#0f131e] fixed top-0 w-full z-[60] h-16 px-4 flex items-center justify-between border-b border-[#1b1f2b]">
<div class="flex items-center shrink-0">
<!-- Search/Symbol Button -->
<div class="hidden md:flex items-center space-x-3 bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
<div class="flex items-center space-x-2 bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
<span class="material-symbols-outlined text-sm text-[#8fa2b3]">search</span>
<span class="font-bold text-sm text-[#dfe2f2]">BTC/USD</span>
<span class="material-symbols-outlined text-sm text-[#8fa2b3]">chevron_right</span>
</div>
<!-- Mobile Search -->
<div class="md:hidden flex items-center bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
<span class="material-symbols-outlined text-sm text-[#8fa2b3]">search</span>
<span class="font-bold text-sm text-[#dfe2f2] ml-2">BTC/USD</span>
<span class="material-symbols-outlined text-sm text-[#8fa2b3] ml-2">chevron_right</span>
<!-- Desktop Status (Moved inside the left-aligned group) -->
<div class="hidden lg:flex items-center gap-2 ml-6 shrink-0 border-l border-[#2d3a4f] pl-6">
<div class="w-2 h-2 rounded-full bg-green-500" id="statusDot"></div>
<span class="text-xs text-[#8fa2b3]" id="statusText">Live</span>
</div>
</div>
<div class="hidden md:flex items-center gap-2 mr-4">
<div class="w-2 h-2 rounded-full bg-green-500" id="statusDot"></div>
<span class="text-xs text-[#8fa2b3]" id="statusText">Live</span>
</div>
<!-- Scrollable Controls Container (Right-aligned on desktop via parent justify-between) -->
<div class="flex-1 md:flex-none flex items-center gap-2 ml-4 overflow-x-auto no-scrollbar touch-pan-x justify-end" style="-webkit-overflow-scrolling: touch;">
<!-- Chart Type Buttons -->
<div class="flex space-x-1 shrink-0">
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="candlestick" title="Candlestick">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 5v3M7 16v3M17 3v2M17 11v4"/><rect x="5" y="8" width="4" height="8" rx="0.5"/><rect x="15" y="5" width="4" height="6" rx="0.5"/></svg>
</button>
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="line" title="Line">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/></svg>
</button>
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="bar" title="Bar">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 5v14M7 10H5M7 15h2M17 5v14M17 7h-2M17 12h2"/></svg>
</button>
</div>
<!-- Mobile Chart Type Selector -->
<div class="md:hidden flex items-center gap-2">
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="candlestick" title="Candlestick">
<span class="material-symbols-outlined text-sm">show_chart</span>
</button>
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="line" title="Line">
<span class="material-symbols-outlined text-sm">insert_chart</span>
</button>
</div>
<!-- Separator -->
<div class="w-px h-8 bg-[#2d3a4f] mx-1 shrink-0"></div>
<div class="flex items-center gap-2 overflow-x-auto no-scrollbar">
<!-- Chart Type Buttons -->
<div class="flex space-x-1">
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="candlestick" title="Candlestick">
<span class="material-symbols-outlined text-sm">show_chart</span>
</button>
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="line" title="Line">
<span class="material-symbols-outlined text-sm">insert_chart</span>
</button>
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="bar" title="Bar">
<span class="material-symbols-outlined text-sm">scatter_plot</span>
</button>
</div>
<!-- Timeframe Separator -->
<div class="w-px h-8 bg-[#2d3a4f] mx-0.5"></div>
<!-- Timeframes -->
<div class="flex space-x-1 items-center overflow-x-auto no-scrollbar" id="timeframeContainer">
<!-- Timeframes Container -->
<div class="flex space-x-1 items-center shrink-0" id="timeframeContainer">
<!-- Timeframes injected by JS -->
</div>
</div>

29
js/ui/chart.js
View File

@ -303,9 +303,21 @@ export class TradingDashboard {
if (!container) return;
const chartTypes = [
{ type: 'candlestick', icon: 'show_chart', name: 'Candlestick' },
{ type: 'line', icon: 'insert_chart', name: 'Line' },
{ type: 'bar', icon: 'scatter_plot', name: 'Bar' }
{
type: 'candlestick',
icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 5v3M7 16v3M17 3v2M17 11v4"/><rect x="5" y="8" width="4" height="8" rx="0.5"/><rect x="15" y="5" width="4" height="6" rx="0.5"/></svg>`,
name: 'Candlestick'
},
{
type: 'line',
icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/></svg>`,
name: 'Line'
},
{
type: 'bar',
icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 5v14M7 10H5M7 15h2M17 5v14M17 7h-2M17 12h2"/></svg>`,
name: 'Bar'
}
];
container.innerHTML = '';
@ -313,11 +325,10 @@ export class TradingDashboard {
const btn = document.createElement('button');
btn.className = 'chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors';
btn.dataset.chartType = chartType.type;
btn.innerHTML = `<span class="material-symbols-outlined text-sm">${chartType.icon}</span>`;
btn.innerHTML = chartType.icon;
btn.title = chartType.name;
if (chartType.type === this.currentChartType) {
btn.style.backgroundColor = '#2d3a4f';
btn.classList.add('text-blue-400');
btn.classList.add('active');
}
btn.addEventListener('click', () => this.switchChartType(chartType.type));
container.appendChild(btn);
@ -1361,11 +1372,9 @@ export class TradingDashboard {
updateChartTypeButtons() {
const buttons = document.querySelectorAll('.chart-type-btn');
buttons.forEach(btn => {
btn.classList.remove('text-blue-400');
btn.style.backgroundColor = '';
btn.classList.remove('active');
if (btn.dataset.chartType === this.currentChartType) {
btn.style.backgroundColor = '#2d3a4f';
btn.classList.add('text-blue-400');
btn.classList.add('active');
}
});
}