scripte/MABEA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 24-Spalten-Dashboard-Raster, einklappbare Sidebar
CI / backend-tests (push) Failing after 2m7s
Details
CI / frontend-build (push) Successful in 20s
Details

Browse Source 
Dashboard-Raster von 12 auf 24 Spalten - bei 12 waren Reihen sofort randvoll (3 Kacheln à w:4), kein Spielraum zum Breiter-Ziehen ohne Nachbarkachel zu verkleinern. Layout-localStorage-Key auf v3 gehoben (alte v2-Koordinaten passen nicht mehr zum neuen Raster). Sidebar links jetzt einklappbar (Toggle-Button bleibt sichtbar, Zustand in localStorage) - mehr Platz für breite Dashboard-Raster auf Desktop-Monitoren.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
This commit is contained in:
patrick
2026-09-07 14:42:19 +02:00
co-authored by Claude Sonnet 5
parent e6eda26eb2
commit e5ddfde52f
5 changed files with 145 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/dashboard/DashboardPage.tsx
+1 -1
View File
@@ -205,7 +205,7 @@ export function DashboardPage() {
const sichtbareIds = ALLE_TILE_IDS.filter((id) => bearbeitenModus || !layout.ausgeblendet.includes(id));
const rasterLayout: Layout = useMemo(
() => sichtbareIds.map((id) => ({ i: id, ...layout.raster[id], minW: 2, minH: 2 })),
() => sichtbareIds.map((id) => ({ i: id, ...layout.raster[id], minW: 4, minH: 2 })),
[sichtbareIds, layout.raster]
);
frontend/src/pages/dashboard/layout.ts
+14 -10
View File
@@ -19,7 +19,11 @@ export const ALLE_TILE_IDS: DashboardTileId[] = [
"aktivitaet",
];
export const GRID_SPALTEN = 12;
// 24 statt 12 Spalten - feineres Raster, mehr Kontrolle beim Breiter/Schmaler
// ziehen auf großen Desktop-Monitoren (Nutzer-Feedback: bei 12 Spalten waren
// Reihen sofort randvoll, kein Spielraum zum Vergrößern ohne Nachbarkachel
// anzufassen).
export const GRID_SPALTEN = 24;
export const GRID_ZEILENHOEHE = 56;
export interface RasterPosition {
@@ -32,14 +36,14 @@ export interface RasterPosition {
// Freie Grid-Positionen als Startzustand - grob nach Wichtigkeit sortiert,
// Aufgaben-Kachel volle Breite oben.
export const STANDARD_RASTER: Record<DashboardTileId, RasterPosition> = {
aufgaben: { x: 0, y: 0, w: 12, h: 3 },
einsatzbereitschaft: { x: 0, y: 3, w: 4, h: 5 },
prueftermine: { x: 4, y: 3, w: 4, h: 5 },
ablaufdaten: { x: 8, y: 3, w: 4, h: 5 },
kennzahlen: { x: 0, y: 8, w: 4, h: 5 },
maengel: { x: 4, y: 8, w: 4, h: 5 },
qualifikation: { x: 8, y: 8, w: 4, h: 4 },
aktivitaet: { x: 0, y: 13, w: 8, h: 5 },
aufgaben: { x: 0, y: 0, w: 24, h: 3 },
einsatzbereitschaft: { x: 0, y: 3, w: 8, h: 5 },
prueftermine: { x: 8, y: 3, w: 8, h: 5 },
ablaufdaten: { x: 16, y: 3, w: 8, h: 5 },
kennzahlen: { x: 0, y: 8, w: 8, h: 5 },
maengel: { x: 8, y: 8, w: 8, h: 5 },
qualifikation: { x: 16, y: 8, w: 8, h: 4 },
aktivitaet: { x: 0, y: 13, w: 16, h: 5 },
};
export interface DashboardLayout {
@@ -47,7 +51,7 @@ export interface DashboardLayout {
ausgeblendet: DashboardTileId[];
}
const SPEICHER_KEY = "mabea-dashboard-layout-v2";
const SPEICHER_KEY = "mabea-dashboard-layout-v3";
function istGueltigeId(wert: unknown): wert is DashboardTileId {
return typeof wert === "string" && (ALLE_TILE_IDS as string[]).includes(wert);