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

responsiv Kabelüberwachung und dashboard

Browse Source
This commit is contained in:
Ismail Ali
2025-01-21 21:30:34 +01:00
parent 5462b90da3
commit b0451c87ef
8 changed files with 62 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Footer.jsx
View File

@@ -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

4
components/Header.jsx
View File

@@ -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

8
components/Navigation.jsx
View File

@@ -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"
}`}
>

6
components/modules/Kue705FO.jsx
View File

@@ -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">

2
components/modulesStatus/KabelModulStatus.jsx
View File

@@ -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>