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

Modal style verbessern

Browse Source
This commit is contained in:
ISA
2024-10-16 14:44:00 +02:00
parent b55fe0fa2b
commit cdd527d14b
2 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
components/modales/KueModal.jsx
View File

@@ -20,51 +20,57 @@ function KueModal({ showModal, onClose }) {
width: "90%",
maxWidth: "800px",
padding: "0",
borderRadius: "8px",
border: "none",
},
}}
>
{/* Modal Header */}
<div className="flex items-center justify-between bg-blue-500 text-white p-4 rounded-t">
<h2 className="text-lg font-bold">KUE Einstellung</h2>
<div className="flex items-center justify-between bg-littwin-blue text-white p-2 rounded-t-lg">
<h2 className="text-sm font-bold">KUE Einstellung</h2>
<button onClick={onClose} className="text-white text-lg font-bold">
&times;
</button>
</div>
{/* Modal Body */}
<div className="p-6">
<div className="p-2">
<table className="w-full text-left border-collapse">
<thead className="bg-gray-100">
<tr>
<th className="p-2 border">KÜ</th>
<th className="p-2 border">Bezeichnung</th>
<th className="p-2 border">Isolationsgrenzwert</th>
<th className="p-2 border">Schleifengrenzwert</th>
<th className="p-2 border">Filterzeit</th>
<th className="p-2 border">TDR Aktiv</th>
<th className="p-2 border">KVZ Aktiv</th>
<th className="p-2 border">Datenlogger</th>
<th className="p-2 border text-sm text-center">KÜ</th>
<th className="p-2 border text-sm text-center">Bezeichnung</th>
<th className="p-2 border text-sm text-center">
Isolationsgrenzwert
</th>
<th className="p-2 border text-sm text-center">
Schleifengrenzwert
</th>
<th className="p-2 border text-sm text-center">Filterzeit</th>
<th className="p-2 border text-sm text-center">TDR Aktiv</th>
<th className="p-2 border text-sm text-center">KVZ Aktiv</th>
<th className="p-2 border text-sm">Datenlogger</th>
</tr>
</thead>
<tbody>
<tr>
<td className="p-2 border">1</td>
<td className="p-2 border text-center">1</td>
<td className="p-2 border">
<input
type="text"
className="w-full border rounded p-1"
className="w-12 border rounded p-1 text-sm"
defaultValue="Test1"
/>
</td>
<td className="p-2 border">
<td className="p-2 border text-center text-sm">
<input
type="number"
className="w-16 border rounded p-1"
className="w-16 border rounded p-1 text-sm"
defaultValue="10.0"
/>{" "}
MOhm
</td>
<td className="p-2 border">
<td className="p-2 border text-center text-sm">
<input
type="number"
className="w-16 border rounded p-1"
@@ -72,13 +78,16 @@ function KueModal({ showModal, onClose }) {
/>{" "}
kOhm
</td>
<td className="p-2 border">
<input
type="number"
className="w-16 border rounded p-1"
defaultValue="420"
/>{" "}
sek.
<td className="p-2 border text-center text-sm">
{/* Flexbox für Filterzeit */}
<div className="flex items-center justify-center">
<input
type="number"
className="w-12 border rounded p-1 text-sm"
defaultValue="420"
/>
<span className="ml-1">sek.</span>
</div>
</td>
<td className="p-2 border text-center">
<input type="checkbox" defaultChecked />
@@ -87,9 +96,18 @@ function KueModal({ showModal, onClose }) {
<input type="checkbox" defaultChecked />
</td>
<td className="p-2 border">
<select className="border rounded p-1">
<select className="border rounded p-1 w-full">
<option value="aus">aus</option>
<option value="ein">ein</option>
<option value="ein">1 (1 min)</option>
<option value="zwei">2 (2 min)</option>
<option value="drei">3 (3 min)</option>
<option value="vier">4 (4 min)</option>
<option value="fuenf">5 (5 min)</option>
<option value="sechs">6 (6 min)</option>
<option value="sieben">7 (7 min)</option>
<option value="acht">8 (8 min)</option>
<option value="neun">9 (9 min)</option>
<option value="zehn">10 (10 min)</option>
</select>
</td>
</tr>
@@ -98,7 +116,7 @@ function KueModal({ showModal, onClose }) {
</div>
{/* Modal Footer */}
<div className="flex justify-end bg-gray-100 p-4 rounded-b">
<div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
<button
onClick={onClose}
className="bg-blue-500 text-white p-2 rounded flex items-center"