Analoge Eingänge für Laptop Auflösug angepasst

components/main/analogeEingaenge/AnalogeEingaengeComponent.tsx

@@ -7,64 +7,93 @@ const AnalogeEingaengeComponent = () => {
   const [activeConfig, setActiveConfig] = useState<number | null>(null);
 
   return (
-    <div className="border rounded-lg shadow-md laptop:p-4 p-6 bg-white flex flex-col h-full">
+    <div className="border rounded-lg shadow-md bg-white flex flex-col h-full p-4 lg:p-6 xl:p-8">
-      <h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
+      <h3 className="text-sm lg:text-base xl:text-lg font-semibold mb-2">
+        Analoge Eingänge
+      </h3>
+
       <div className="overflow-auto flex-grow">
-        <table className="table-auto w-full h-full text-sm text-left border-collapse">
+        <table className="table-auto w-full text-xs lg:text-sm xl:text-md text-left border-collapse">
           <thead className="bg-gray-100 text-gray-700">
             <tr>
-              <th className="px-2 py-1 whitespace-nowrap">Eingang</th>
+              <th className="px-2 lg:px-3 py-1 lg:py-2 whitespace-nowrap">
-              <th className="px-2 py-1 whitespace-nowrap">Wert</th>
+                Eingang
-              <th className="px-2 py-1 whitespace-nowrap">Bezeichnung</th>
-              <th className="px-2 py-1 text-center whitespace-nowrap">uW</th>
-              <th className="px-2 py-1 text-center whitespace-nowrap">uG</th>
-              <th className="px-2 py-1 text-center whitespace-nowrap">oW</th>
-              <th className="px-2 py-1 text-center whitespace-nowrap">oG</th>
-              <th className="px-2 py-1 text-center whitespace-nowrap">
-                Aktion
               </th>
+              <th className="px-2 lg:px-3 py-1 lg:py-2 whitespace-nowrap">
+                Wert
+              </th>
+              <th className="px-2 lg:px-3 py-1 lg:py-2 whitespace-nowrap">
+                Bezeichnung
+              </th>
+              <th className="px-2 lg:px-3 py-1 lg:py-2 text-center">uW</th>
+              <th className="px-2 lg:px-3 py-1 lg:py-2 text-center">uG</th>
+              <th className="px-2 lg:px-3 py-1 lg:py-2 text-center">oW</th>
+              <th className="px-2 lg:px-3 py-1 lg:py-2 text-center">oG</th>
+              <th className="px-2 lg:px-3 py-1 lg:py-2 text-center">Aktion</th>
             </tr>
           </thead>
-          <tbody className="text-xs text-gray-600">
+          <tbody className="text-gray-600">
             {analogInputs.map((input) => (
-              <tr key={input.id} className="border-t ">
+              <tr
-                <td className="px-2 py-1">{input.id}</td>
+                key={input.id}
-                <td className="px-2 py-1">{input.value}</td>
+                className="border-t hover:bg-gray-50 transition"
-                <td className="px-2 py-1">{input.name}</td>
+              >
-                <td className="px-2 py-1 text-center">
+                <td className="px-2 lg:px-3 py-1 lg:py-2">{input.id}</td>
+                <td className="px-2 lg:px-3 py-1 lg:py-2">{input.value}</td>
+                <td className="px-2 lg:px-3 py-1 lg:py-2">{input.name}</td>
+                <td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
                   <span
-                    className={input.uW ? "text-green-500" : "text-gray-400"}
+                    className={
+                      input.uW
+                        ? "text-green-500 text-lg lg:text-xl"
+                        : "text-gray-400"
+                    }
                   >
                     ●
                   </span>
                 </td>
-                <td className="px-2 py-1 text-center">
+                <td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
                   <span
-                    className={input.uG ? "text-green-500" : "text-gray-400"}
+                    className={
+                      input.uG
+                        ? "text-green-500 text-lg lg:text-xl"
+                        : "text-gray-400"
+                    }
                   >
                     ●
                   </span>
                 </td>
-                <td className="px-2 py-1 text-center">
+                <td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
                   <span
-                    className={input.oW ? "text-orange-500" : "text-gray-400"}
+                    className={
+                      input.oW
+                        ? "text-orange-500 text-lg lg:text-xl"
+                        : "text-gray-400"
+                    }
                   >
                     ●
                   </span>
                 </td>
-                <td className="px-2 py-1 text-center">
+                <td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
                   <span
-                    className={input.oG ? "text-green-500" : "text-gray-400"}
+                    className={
+                      input.oG
+                        ? "text-green-500 text-lg lg:text-xl"
+                        : "text-gray-400"
+                    }
                   >
                     ●
                   </span>
                 </td>
-                <td className="px-2 py-1 text-center">
+                <td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
                   <button
                     onClick={() => setActiveConfig(input.id)}
-                    className="text-blue-500 hover:text-blue-700"
+                    className="text-littwin-blue hover:text-littwin-dark transition"
                   >
-                    <Icon icon="mdi:cog-outline" />
+                    <Icon
+                      icon="mdi:cog-outline"
+                      className="w-4 lg:w-5 xl:w-6"
+                    />
                   </button>
                 </td>
               </tr>

config/webVersion.ts

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