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

fix: digitale Ein- und Ausgänge vollständig responsive – Tailwind Breakpoints für Icons und Textgrößen

Browse Source 
- Anpassungen an laptop, xl, 2xl eingeführt
- Konsistente Darstellung bei Meldungseingängen und Schaltausgängen
- Offline-fähige lokale Icon-Imports für alle Symbole
This commit is contained in:
ISA
2025-04-29 14:19:18 +02:00
parent 60634140ca
commit a898882103
3 changed files with 33 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

20
components/main/einausgaenge/DigitalOutputs.tsx
View File

@@ -1,4 +1,5 @@
"use client"; // /components/main/einausgaenge/DigitalOutputs.tsx "use client";
// /components/main/einausgaenge/DigitalOutputs.tsx
import React from "react"; import React from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { RootState } from "../../../redux/store"; import { RootState } from "../../../redux/store";
@@ -14,11 +15,14 @@ export default function DigitalOutputs({ openOutputModal }) {
return ( return (
<div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full h-fit max-h-[400px] overflow-auto"> <div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full h-fit max-h-[400px] overflow-auto">
<h2 className="text-sm font-bold mb-3 flex items-center"> <h2 className="text-sm laptop:text-xs font-bold mb-3 flex items-center">
<Icon icon={outputIcon} className="text-littwin-blue mr-2 text-xl" /> <Icon
icon={outputIcon}
className="text-littwin-blue mr-2 text-xl laptop:text-lg xl:text-xl 2xl:text-2xl"
/>
Digitale Ausgänge Digitale Ausgänge
</h2> </h2>
<table className="w-full text-xs border-collapse bg-white rounded-lg"> <table className="w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse bg-white rounded-lg">
<thead className="bg-gray-100 border-b"> <thead className="bg-gray-100 border-b">
<tr> <tr>
<th className="px-1 py-1 text-left">Ausgang</th> <th className="px-1 py-1 text-left">Ausgang</th>
@@ -33,15 +37,15 @@ export default function DigitalOutputs({ openOutputModal }) {
<td className="flex items-center px-1 py-1"> <td className="flex items-center px-1 py-1">
<Icon <Icon
icon={outputIcon} icon={outputIcon}
className="text-gray-600 mr-1 text-base" className="text-gray-600 mr-1 text-base laptop:text-sm xl:text-base 2xl:text-lg"
/> />
{output.id} {output.id}
</td> </td>
<td className="px-1 py-1">{output.label}</td> <td className="px-1 py-1">{output.label}</td>
<td className="px-1 py-1"> <td className="px-1 py-1">
<Icon <Icon
icon="ion:switch" icon={switchIcon}
className={`text-base ${ className={`text-base laptop:text-sm xl:text-base 2xl:text-lg ${
output.status output.status
? "text-littwin-blue" ? "text-littwin-blue"
: "text-gray-500 scale-x-[-1]" : "text-gray-500 scale-x-[-1]"
@@ -51,7 +55,7 @@ export default function DigitalOutputs({ openOutputModal }) {
<td className="px-1 py-1"> <td className="px-1 py-1">
<Icon <Icon
icon={settingsIcon} icon={settingsIcon}
className="text-gray-400 text-base cursor-pointer" className="text-gray-400 text-base laptop:text-sm xl:text-base 2xl:text-lg cursor-pointer"
onClick={() => openOutputModal(output)} onClick={() => openOutputModal(output)}
/> />
</td> </td>

2
config/webVersion.ts
View File

@@ -6,5 +6,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/ */
const webVersion = "1.6.312"; const webVersion = "1.6.313";
export default webVersion; export default webVersion;