From b0451c87ef71c3722ce26046a5ec58d20fbe0c93 Mon Sep 17 00:00:00 2001
From: Ismail Ali <ismailali1553@gmail.com>
Date: Tue, 21 Jan 2025 21:30:34 +0100
Subject: [PATCH] =?UTF-8?q?responsiv=20Kabel=C3=BCberwachung=20und=20dashb?=
 =?UTF-8?q?oard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Footer.jsx                         |  2 +-
 components/Header.jsx                         |  4 +-
 components/Navigation.jsx                     |  8 +--
 components/modules/Kue705FO.jsx               |  6 +-
 components/modulesStatus/KabelModulStatus.jsx |  2 +-
 pages/_app.js                                 |  7 ++-
 pages/dashboard.js                            | 60 +++++++++++++------
 pages/kabelueberwachung.js                    |  6 +-
 8 files changed, 62 insertions(+), 33 deletions(-)

diff --git a/components/Footer.jsx b/components/Footer.jsx
index 6ae993d..cbda914 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -52,7 +52,7 @@ function Footer() {
   }, [showSlider]);
 
   return (
-    <footer className="relative bg-gray-300 p-4 overflow-hidden text-black">
+    <footer className="relative bg-gray-300 p-4 xl:p-2 2xl:p-4 overflow-hidden text-black">
       <div className="container mx-auto flex justify-between">
         <div className="flex flex-row space-x-2">
           <Icon
diff --git a/components/Header.jsx b/components/Header.jsx
index 9409653..35f2769 100644
--- a/components/Header.jsx
+++ b/components/Header.jsx
@@ -49,10 +49,10 @@ function Header() {
   }, [isAdminLoggedIn]);
 
   return (
-    <header className="bg-gray-300 flex justify-between items-center w-full h-[14vh] sm:h-[11vh] md:h-[12vh] lg:h-[13vh] xl:h-[14vh] relative text-black">
+    <header className="bg-gray-300 flex justify-between items-center w-full h-[12vh] sm:h-[11vh] md:h-[12vh] lg:h-[13vh] xl:h-[12vh] relative text-black mb-16 sm:mb-1 md:mb-1 lg:mb-1 xl:mb-1 2xl:mb-12">
       <div
         className="absolute transform -translate-y-1/2 
-                left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[8%]
+                left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%]
                 top-[90%] sm:top-[90%] md:top-[90%] lg:top-[90%] xl:top-[90%]"
         style={{
           height: "13vh", // Dynamische Höhe des Containers
diff --git a/components/Navigation.jsx b/components/Navigation.jsx
index f65a3f5..0c4356d 100644
--- a/components/Navigation.jsx
+++ b/components/Navigation.jsx
@@ -13,12 +13,10 @@ function Navigation() {
     }
   }, [pathname]);
 
-  // Funktion, die das ".html" basierend auf der Umgebung hinzufügt
   const formatPath = (path) => {
     return process.env.NODE_ENV === "production" ? `${path}.html` : path;
   };
 
-  // Menüeinträge ohne .html-Endungen für die Entwicklungsumgebung
   const menuItems = [
     { name: "Übersicht", path: "/dashboard" },
     { name: "Kabelüberwachung", path: "/kabelueberwachung" },
@@ -27,13 +25,13 @@ function Navigation() {
 
   return (
     <aside>
-      <nav className="w-64 flex-shrink-0 mt-32 overflow-hidden">
+      <nav className="w-48 sm:w-12 md:w-28 lg:w-32 xl:w-40 2xl:w-64 flex-shrink-0 mt-32 overflow-hidden">
         {menuItems.map((item) => (
           <Link href={formatPath(item.path)} key={item.name}>
             <div
-              className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 ${
+              className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg ${
                 activeLink.startsWith(item.path)
-                  ? "bg-sky-500 text-white rounded-r-full"
+                  ? "bg-sky-500 text-white rounded-r-full xl:mr-4 xl:w-full  "
                   : "text-black hover:bg-gray-200 rounded-r-full"
               }`}
             >
diff --git a/components/modules/Kue705FO.jsx b/components/modules/Kue705FO.jsx
index 4874b3c..1e78abb 100644
--- a/components/modules/Kue705FO.jsx
+++ b/components/modules/Kue705FO.jsx
@@ -432,7 +432,11 @@ function Kue705FO({
   }, [schleifenwiderstand, activeButton]);
   //---------------------------------------------------
   return (
-    <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
+    <div
+      className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 
+             scale-100 sm:scale-95 md:scale-100 lg:scale-105 xl:scale-90 2xl:scale-125 top-3
+             "
+    >
       {kueOnline === 1 ? (
         <>
           <div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
diff --git a/components/modulesStatus/KabelModulStatus.jsx b/components/modulesStatus/KabelModulStatus.jsx
index 9295500..d0b7b27 100644
--- a/components/modulesStatus/KabelModulStatus.jsx
+++ b/components/modulesStatus/KabelModulStatus.jsx
@@ -37,7 +37,7 @@ const KabelModulStatus = ({
   const groundFault = kueGroundFault[slot - 1] === 1;
 
   return (
-    <div className="border border-gray-400 w-10 h-20 flex flex-col">
+    <div className="border border-gray-400 w-10 h-20 flex flex-col scale-100 xl:scale-90">
       <div className="bg-littwin-blue flex-grow flex flex-col items-center justify-center text-white text-[10px]">
         <div className="flex w-full mb-1 items-start justify-start">{slot}</div>
         <div className="text-[10px]">{moduleName}</div>
diff --git a/pages/_app.js b/pages/_app.js
index 1beba6f..d11d9ad 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -42,7 +42,12 @@ function MyApp({ Component, pageProps }) {
         <Header />
         <div className="flex flex-grow w-full">
           <Navigation className="w-1/5" />
-          <main className="flex-1 p-4">
+          <main
+            className="flex flex-col 
+               w-full sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-full 
+               h-auto sm:h-[300px] md:h-[350px] lg:h-[400px] xl:h-[75%]
+               p-1"
+          >
             {sessionExpired && (
               <div className="bg-red-500 text-white p-4 text-center">
                 Ihre Sitzung ist abgelaufen oder die Verbindung ist
diff --git a/pages/dashboard.js b/pages/dashboard.js
index 4b1cfc8..8eda398 100644
--- a/pages/dashboard.js
+++ b/pages/dashboard.js
@@ -61,7 +61,10 @@ function Dashboard() {
       const slots = kueOnline.slice(i * 8, (i + 1) * 8);
 
       baugruppen.push(
-        <div key={i} className="flex bg-white shadow-md rounded-lg mb-4">
+        <div
+          key={i}
+          className="flex bg-white shadow-md rounded-lg mb-4 xl:mb-0 p-2 sm:p-3 md:p-4 lg:p-5 xl:p-0 border border-gray-200 w-full sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-full"
+        >
           <div className="flex gap-1">
             {slots.map((version, index) => {
               const slotNumber = i * 8 + index + 1;
@@ -97,22 +100,27 @@ function Dashboard() {
   };
 
   return (
-    <div className="flex flex-col p-4">
+    <div
+      className="flex flex-col 
+               w-full sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-full 
+               h-80% sm:h-[60%] md:h-[80%] lg:h-[80%] xl:h-[45%]
+               p-4"
+    >
       <div className="flex justify-between items-center w-full lg:w-2/3">
-        <div className="flex justify-between gap-1">
+        <div className="flex justify-between gap-1  ">
           <Icon
             icon="ri:calendar-schedule-line"
-            className="text-littwin-blue text-4xl"
+            className="text-littwin-blue text-4xl xl:text-2xl"
           />
-          <h1 className="text-xl font-bold text-gray-700">
+          <h1 className="text-xl font-bold text-gray-700 xl:text-base">
             Letzten 20 Meldungen
           </h1>
         </div>
       </div>
 
       <div className="flex flex-col lg:flex-row gap-1 overflow-hidden">
-        <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex flex-grow">
-          <table className="min-w-full border border-gray-200 text-left">
+        <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex flex-grow xl:scale-98">
+          <table className="min-w-full border border-gray-200 text-left xl:scale-90">
             <thead className="bg-gray-100 border-b border-gray-300">
               <tr>
                 <th className="py-1 px-4 text-gray-700 text-sm font-medium">
@@ -162,30 +170,44 @@ function Dashboard() {
           </table>
         </div>
 
-        <div className="shadow-md rounded-lg lg:w-1/3 flex flex-col gap-2">
-          <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
-            <h2 className="text-lg font-semibold text-gray-700 mb-2">
+        <div
+          className="shadow-md rounded-lg 
+             w-full sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-1/3 
+             h-auto sm:h-[300px] md:h-[350px] lg:h-[400px] xl:h-[450px] 
+             flex flex-col gap-2"
+        >
+          <div className="bg-gray-50 p-2 sm:p-3 md:p-4 lg:p-5 xl:p-1 rounded-lg shadow-sm border border-gray-200 w-full sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-full">
+            <h2 className="text-lg sm:text-base md:text-lg lg:text-xl xl:text-base font-semibold text-gray-700 mb-1">
               Versionsinformationen
             </h2>
-            <div className="flex flex-row p-2 space-x-2">
-              <Icon icon="bx:code-block" className="text-xl text-blue-400" />
-              <p className="text-sm text-gray-600">
+
+            <div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2">
+              <Icon
+                icon="bx:code-block"
+                className="text-xl sm:text-lg md:text-xl text-blue-400"
+              />
+              <p className="text-sm sm:text-xxs md:text-xs lg:text-sm xl:text-sm text-gray-600">
                 <span className="font-bold"></span> Applikationsversion:{" "}
-                {appVersion}{" "}
+                {appVersion}
               </p>
             </div>
-            <div className="flex flex-row p-2 space-x-2">
-              <Icon icon="mdi:web" className="text-xl text-blue-400" />
-              <p className="text-sm text-gray-600">
-                <span className="font-bold"> </span>Webserverversion: 1.0.5.0
+
+            <div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2">
+              <Icon
+                icon="mdi:web"
+                className="text-xl sm:text-lg md:text-xl text-blue-400"
+              />
+              <p className="text-sm sm:text-xxs md:text-xs lg:text-sm xl:text-sm text-gray-600">
+                <span className="font-bold"></span> Webserverversion: 1.0.5.0
               </p>
             </div>
           </div>
+
           {renderBaugruppentraeger()}
         </div>
       </div>
 
-      <div className="flex-shrink-0 flex justify-between items-center mt-2 bg-white p-4 rounded-lg shadow-md border border-gray-200">
+      <div className="flex-shrink-0 flex justify-between items-center mt-1 bg-white p-1 rounded-lg shadow-md border border-gray-200">
         <div className="flex items-center space-x-4">
           <img src="/images/IP-icon.svg" alt="IP Address" className="w-6 h-6" />
           <div>
diff --git a/pages/kabelueberwachung.js b/pages/kabelueberwachung.js
index 367822d..2897121 100644
--- a/pages/kabelueberwachung.js
+++ b/pages/kabelueberwachung.js
@@ -95,8 +95,8 @@ function Kabelueberwachung() {
   }, [activeRack, racks]);
 
   return (
-    <div className="bg-gray-100 flex-1 p-6 text-black">
-      <h1 className="text-2xl mb-4">Kabelüberwachung</h1>
+    <div className="bg-gray-100 flex-1 p-6 text-black xl:p-4 2xl:p-6">
+      <h1 className="text-2xl xl:text-xl mb-4">Kabelüberwachung</h1>
       <div className="mb-4">
         {[1, 2, 3, 4].map((rack) => (
           <button
@@ -112,7 +112,7 @@ function Kabelueberwachung() {
           </button>
         ))}
       </div>
-      <div className="flex flex-row space-x-4 scale-110 ml-[5%] mt-[5%]">
+      <div className="flex flex-row space-x-8 xl:space-x-0 2xl:space-x-8  ml-[5%] mt-[5%]">
         {racks[`rack${activeRack}`].map((slot, index) => {
           const slotIndex = index + (activeRack - 1) * 8;
           return (