Matthias-Claudius-Schule/borrow-system
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed sidebar displaying bug

Browse Source
This commit is contained in:
Theis Gaedigk
2025-08-20 13:06:22 +02:00
parent ccceb5840c
commit 2b7f6e8e17
2 changed files with 57 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
frontend/src/components/Sidebar.tsx
View File

@@ -22,8 +22,8 @@ const Sidebar: React.FC = () => {
const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe)); const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe));
return ( return (
<aside className="w-full md:w-72 md:h-[calc(100vh-2rem)] md:sticky md:top-4 overflow-y-auto rounded-2xl pt-0 px-3 pb-3 sm:pt-0 sm:px-4 sm:pb-4 bg-gradient-to-b from-white to-slate-50 ring-1 ring-slate-200/70 shadow-md"> <aside className="w-full md:w-72 md:h-full flex flex-col rounded-2xl pt-0 px-3 pb-3 sm:pt-0 sm:px-4 sm:pb-4 bg-gradient-to-b from-white to-slate-50 ring-1 ring-slate-200/70 shadow-md overflow-hidden">
<h2 className="sticky top-0 z-10 -mx-3 sm:-mx-4 px-3 sm:px-4 py-2.5 bg-white/85 backdrop-blur supports-[backdrop-filter]:backdrop-blur border-b border-slate-200/70 text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between gap-2 rounded-t-2xl"> <div className="sticky top-0 z-10 -mx-3 sm:-mx-4 px-3 sm:px-4 py-2.5 bg-white/85 backdrop-blur supports-[backdrop-filter]:backdrop-blur border-b border-slate-200/70 text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between gap-2 rounded-t-2xl">
<span className="flex items-center gap-2 min-w-0 flex-1 truncate"> <span className="flex items-center gap-2 min-w-0 flex-1 truncate">
<MonitorSmartphone className="w-5 h-5 text-slate-700 shrink-0" /> <MonitorSmartphone className="w-5 h-5 text-slate-700 shrink-0" />
<span className="truncate">Geräte</span> <span className="truncate">Geräte</span>
@@ -33,56 +33,61 @@ const Sidebar: React.FC = () => {
{outCount} außerhalb {outCount} außerhalb
</span> </span>
)} )}
</h2> </div>
{/* Mobile: horizontal scroll, Desktop: vertical list */} {/* Scroll area */}
<div className="flex gap-3 overflow-x-auto snap-x snap-mandatory pb-2 -mr-1 pr-2 md:block md:space-y-3 md:pr-1 md:pb-1"> <div className="flex-1 min-h-0 overflow-y-auto">
{sorted.map((item: any) => ( <div className="flex gap-3 overflow-x-auto snap-x snap-mandatory pb-2 -mr-1 pr-2 md:block md:space-y-3 md:pr-1 md:pb-1">
<div {sorted.map((item: any) => (
key={item.item_name} <div
className={`group relative bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200/70 uration-200 hover:shadow-md focus-within:ring-slate-300 ${ key={item.item_name}
item.inSafe className={`group relative bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200/70 uration-200 hover:shadow-md focus-within:ring-slate-300 ${
? "border-l-4 border-emerald-400" item.inSafe
: "border-l-4 border-red-400 ring-red-200/60 bg-red-50/40" ? "border-l-4 border-emerald-400"
} shrink-0 snap-start min-w-[240px] md:min-w-0`} : "border-l-4 border-red-400 ring-red-200/60 bg-red-50/40"
> } shrink-0 snap-start min-w-[240px] md:min-w-0`}
<div className="flex items-start gap-3"> >
<span className="relative mt-0.5 inline-flex" aria-hidden="true"> <div className="flex items-start gap-3">
{!item.inSafe && (
<span className="absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
)}
<span <span
className={`inline-block w-3 h-3 rounded-full ring-2 ring-white ${ className="relative mt-0.5 inline-flex"
item.inSafe ? "bg-emerald-500" : "bg-red-500" aria-hidden="true"
}`} >
title={ {!item.inSafe && (
item.inSafe ? "Im Schließfach" : "Nicht im Schließfach" <span className="absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
} )}
aria-label={ <span
className={`inline-block w-3 h-3 rounded-full ring-2 ring-white ${
item.inSafe ? "bg-emerald-500" : "bg-red-500"
}`}
title={
item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
}
aria-label={
item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
}
/>
</span>
<Object
title={item.item_name}
description={
item.inSafe ? "Im Schließfach" : "Nicht im Schließfach" item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
} }
/> />
</span> </div>
<Object
title={item.item_name}
description={
item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
}
/>
</div> </div>
</div> ))}
))} </div>
</div>
<div className="mt-4 pt-3 border-t border-slate-200/70 text-[10px] sm:text-xs text-slate-500 items-center gap-4 hidden md:flex"> <div className="mt-4 pt-3 border-t border-slate-200/70 text-[10px] sm:text-xs text-slate-500 items-center gap-4 hidden md:flex">
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
<span className="inline-block w-3 h-3 bg-emerald-500 rounded-full ring-2 ring-white shadow-sm"></span> <span className="inline-block w-3 h-3 bg-emerald-500 rounded-full ring-2 ring-white shadow-sm"></span>
Verfügbar Verfügbar
</span> </span>
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
<span className="inline-block w-3 h-3 bg-red-500 rounded-full ring-2 ring-white shadow-sm"></span> <span className="inline-block w-3 h-3 bg-red-500 rounded-full ring-2 ring-white shadow-sm"></span>
Außerhalb des Schließfachs Außerhalb des Schließfachs
</span> </span>
</div>
</div> </div>
</aside> </aside>
); );

14
frontend/src/layout/Layout.tsx
View File

@@ -1,4 +1,4 @@
import React from "react"; import React, { useRef } from "react";
import "../App.css"; import "../App.css";
import Header from "../components/Header"; import Header from "../components/Header";
import Sidebar from "../components/Sidebar"; import Sidebar from "../components/Sidebar";
@@ -10,24 +10,24 @@ type LayoutProps = {
const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => { const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
return ( return (
<div className="min-h-screen flex bg-slate-50 text-slate-800"> <div className="h-screen overflow-hidden flex bg-slate-50 text-slate-800">
{/* Main */} {/* Main */}
<main className="flex-1 flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8"> <main className="flex-1 min-h-0 overflow-hidden flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8">
{/* Sidebar on mobile appears inline on top; on desktop it's a sticky column */} {/* Sidebar on mobile appears inline on top; on desktop it's a sticky column */}
<div className="w-full max-w-5xl md:flex md:gap-6"> <div className="w-full max-w-5xl md:flex md:gap-6 md:items-stretch md:min-h-0 md:h-full">
<div className="block md:hidden mb-3"> <div className="block md:hidden mb-3">
<Sidebar /> <Sidebar />
</div> </div>
<div className="hidden md:block md:shrink-0 md:w-72"> <div className="hidden md:flex md:flex-col md:shrink-0 md:w-72 md:min-h-0 md:h-full">
<Sidebar /> <Sidebar />
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0 md:min-h-0 md:h-full flex flex-col overflow-hidden">
<div className="w-full"> <div className="w-full">
<Header onLogout={onLogout} /> <Header onLogout={onLogout} />
</div> </div>
<div className="w-full bg-white shadow-md md:shadow-lg rounded-2xl p-4 sm:p-6 ring-1 ring-slate-200"> <div className="w-full bg-white shadow-md md:shadow-lg rounded-2xl p-4 sm:p-6 ring-1 ring-slate-200 flex-1 min-h-0 overflow-y-auto">
{children} {children}
</div> </div>
</div> </div>