Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Optimierungen für Laptop-Ansicht der DigitalInputs-Komponente

Browse Source 
- Elemente bei Breakpoint 'laptop' (1350px) kleiner dargestellt
- Textgrößen, Icongrößen und Abstände angepasst
- Bessere Übersichtlichkeit bei Laptop-Auflösungen
This commit is contained in:
ISA
2025-04-28 08:16:57 +02:00
parent 7dcb2eb819
commit 45528c09a3
2 changed files with 39 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/main/einausgaenge/DigitalInputs.tsx
View File

@@ -20,58 +20,77 @@ export default function DigitalInputs({ openInputModal, inputRange }: Props) {
return (
<div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full">
<h2 className="text-sm font-bold mb-3 flex items-center">
<Icon icon="mdi:input" className="text-littwin-blue mr-2 text-xl" />
<h2 className="text-sm font-bold mb-3 flex items-center laptop:text-xs">
<Icon
icon="mdi:input"
className="text-littwin-blue mr-2 text-xl laptop:text-lg"
/>
Meldungseingänge {inputRange.start + 1} – {inputRange.end}
</h2>
<table className="w-full text-xs border-collapse">
<table className="w-full text-xs border-collapse laptop:text-[10px]">
<thead className="bg-gray-100 border-b">
<tr>
<th className="px-1 py-1 text-left">Eingang</th>
<th className="px-1 py-1 text-left">Zustand</th>
<th className="px-1 py-1 text-left">Bezeichnung</th>
<th className="px-1 py-1 text-left">Aktion</th>
<th className="px-1 py-1 text-left laptop:px-0.5 laptop:py-0.5">
Eingang
</th>
<th className="px-1 py-1 text-left laptop:px-0.5 laptop:py-0.5">
Zustand
</th>
<th className="px-1 py-1 text-left laptop:px-0.5 laptop:py-0.5">
Bezeichnung
</th>
<th className="px-1 py-1 text-left laptop:px-0.5 laptop:py-0.5">
Aktion
</th>
</tr>
</thead>
<tbody>
{inputs.map((input) => (
<tr key={input.id} className="border-b">
<td className="flex items-center px-1 py-1">
<td className="flex items-center px-1 py-1 laptop:px-0.5 laptop:py-0.5">
<Icon
icon="mdi:login"
className="text-gray-600 mr-1 text-base"
className="text-gray-600 mr-1 text-base laptop:text-sm"
/>
{input.id}
</td>
<td className="px-1 py-1">
<td className="px-1 py-1 laptop:px-0.5 laptop:py-0.5">
{input.eingangOffline ? (
<div className="relative group inline-block">
<span className="text-red-500 text-2xl font-bold">✖</span>
<div className="absolute bottom-full translate-x-4 translate-y-4 w-max bg-gray-400 text-xs text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10">
<span className="text-red-500 text-2xl laptop:text-xl font-bold">
✖
</span>
<div className="absolute bottom-full translate-x-4 translate-y-4 w-max bg-gray-400 text-xs laptop:text-[10px] text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10">
Eingang inaktiv
</div>
</div>
) : input.status ? (
<div className="relative group inline-block">
<span className="text-red-500 text-2xl">●</span>
<div className="absolute bottom-full translate-x-4 translate-y-4 w-max bg-gray-400 text-xs text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10">
<span className="text-red-500 text-2xl laptop:text-xl">
●
</span>
<div className="absolute bottom-full translate-x-4 translate-y-4 w-max bg-gray-400 text-xs laptop:text-[10px] text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10">
Eingang Aus
</div>
</div>
) : (
<div className="relative group inline-block">
<span className="text-green-500 text-2xl">●</span>
<div className="absolute bottom-full translate-x-4 translate-y-4 w-max bg-gray-400 text-xs text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10">
<span className="text-green-500 text-2xl laptop:text-xl">
●
</span>
<div className="absolute bottom-full translate-x-4 translate-y-4 w-max bg-gray-400 text-xs laptop:text-[10px] text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10">
Eingang Ein
</div>
</div>
)}
</td>
<td className="px-1 py-1">{input.label}</td>
<td className="px-1 py-1">
<td className="px-1 py-1 laptop:px-0.5 laptop:py-0.5">
{input.label}
</td>
<td className="px-1 py-1 laptop:px-0.5 laptop:py-0.5">
<CogIcon
className="2xl:w-8 2xl:h-8 xl:w-6 xl:h-6 laptop:w-4 laptop:h-4 cursor-pointer"
className="2xl:w-8 2xl:h-8 xl:w-6 xl:h-6 laptop:w-4 laptop:h-4 cursor-pointer"
onClick={() => openInputModal(input)}
/>
</td>