Implements meteoChartsPage, fixed responsiveness overall

This commit is contained in:
litoral05
2026-06-01 12:07:56 +01:00
parent 540e4ed560
commit 6e44522782
21 changed files with 2276 additions and 881 deletions
+21 -12
View File
@@ -34,6 +34,7 @@ export function AppShell({ activePage, onNavigate, children }: AppShellProps) {
});
const isDark = theme === "dark";
const isDashboard = activePage === "dashboard";
useEffect(() => {
localStorage.setItem(THEME_STORAGE_KEY, theme);
@@ -47,14 +48,14 @@ export function AppShell({ activePage, onNavigate, children }: AppShellProps) {
<div
className={
isDark
? "fixed inset-0 overflow-hidden bg-[#0b1220] text-slate-100"
: "fixed inset-0 overflow-hidden bg-slate-100 text-slate-950"
? "fixed inset-0 overflow-hidden bg-[#07101B] text-slate-100"
: "fixed inset-0 overflow-hidden bg-white text-slate-950"
}
>
<style>{`
.app-scrollbar {
scrollbar-width: thin;
scrollbar-color: ${isDark ? "#334155 #0b1220" : "#94a3b8 #f1f5f9"};
scrollbar-color: ${isDark ? "#334155 #07101B" : "#94a3b8 #f8fafc"};
}
.app-scrollbar::-webkit-scrollbar {
@@ -63,14 +64,14 @@ export function AppShell({ activePage, onNavigate, children }: AppShellProps) {
}
.app-scrollbar::-webkit-scrollbar-track {
background: ${isDark ? "#0b1220" : "#f1f5f9"};
background: ${isDark ? "#07101B" : "#f8fafc"};
border-left: 1px solid ${isDark ? "rgba(255,255,255,0.06)" : "#e2e8f0"};
}
.app-scrollbar::-webkit-scrollbar-thumb {
background: ${isDark ? "#334155" : "#94a3b8"};
border-radius: 999px;
border: 2px solid ${isDark ? "#0b1220" : "#f1f5f9"};
border: 2px solid ${isDark ? "#07101B" : "#f8fafc"};
}
.app-scrollbar::-webkit-scrollbar-thumb:hover {
@@ -115,17 +116,25 @@ export function AppShell({ activePage, onNavigate, children }: AppShellProps) {
<main
className={
isDark
? `app-scrollbar min-h-0 flex-1 border-t border-white/10 bg-[#0b1220] ${activePage === "dashboard"
? "overflow-hidden p-0"
: "overflow-y-auto p-4"
? `app-scrollbar min-h-0 flex-1 border-t border-white/10 ${isDashboard
? "overflow-y-auto bg-[#07101B] p-0"
: "overflow-y-auto bg-[#0b1220] p-4"
}`
: `app-scrollbar min-h-0 flex-1 border-t border-slate-200 bg-slate-100 ${activePage === "dashboard"
? "overflow-hidden p-0"
: "overflow-y-auto p-4"
: `app-scrollbar min-h-0 flex-1 border-t border-slate-200 ${isDashboard
? "overflow-y-auto bg-white p-0"
: "overflow-y-auto bg-slate-100 p-4"
}`
}
>
<div className="h-full w-full">
<div
className={
isDashboard
? isDark
? "h-full w-full bg-[#07101B]"
: "h-full w-full bg-white"
: "h-full w-full"
}
>
{children({
theme,
snapshots: telemetry.snapshots,