dashboard ohne Scrollbalken

This commit is contained in:
ISA
2024-09-29 17:35:15 +02:00
parent 9e3de09c75
commit 4880b6473e
8 changed files with 77 additions and 73 deletions

View File

@@ -3,7 +3,7 @@ import React from "react";
function Footer() {
return (
<footer className="bg-gray-300 p-4 flex-shrink-0">
<footer className="bg-gray-300 p-4 overflow-hidden">
<div className="container mx-auto flex justify-between">
<div>
<p className="text-sm">Littwin Systemtechnik GmbH & Co. KG</p>

View File

@@ -24,7 +24,7 @@ function Navigation() {
return (
<aside>
<nav className="w-64 flex-shrink-0 h-full mt-24">
<nav className="w-64 flex-shrink-0 mt-24 overflow-hidden">
{menuItems.map((item) => (
<Link href={item.path} key={item.name}>
<div

View File

@@ -3,13 +3,11 @@ import React from "react";
const Access1Status = () => {
return (
<div className="border border-gray-400 w-32 h-16 flex items-center justify-center relative">
<div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-blue-500">
{/* Grüner Streifen auf der linken Seite */}
<div className="absolute left-0 top-0 h-full w-1/6 bg-green-500"></div>
<div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
{/* Blauer Hauptbereich */}
<div className="bg-blue-500 flex-1 flex items-center justify-center text-white text-xl h-16">
Access 1
</div>
<div className="flex flex-row text-white text-xs ">Access 1</div>
</div>
);
};

View File

@@ -3,13 +3,11 @@ import React from "react";
const Access2Status = () => {
return (
<div className="border border-gray-400 w-32 h-16 flex items-center justify-center relative">
<div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-blue-500">
{/* Grüner Streifen auf der linken Seite */}
<div className="absolute left-0 top-0 h-full w-1/6 bg-green-500"></div>
<div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
{/* Blauer Hauptbereich */}
<div className="bg-blue-500 flex-1 flex items-center justify-center text-white text-xl h-16">
Access 2
</div>
<div className="flex flex-row text-white text-xs ">Access 2</div>
</div>
);
};

View File

@@ -3,13 +3,11 @@ import React from "react";
const CPLStatus = () => {
return (
<div className="border border-gray-400 w-32 h-16 flex items-center justify-center relative">
<div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-blue-500">
{/* Grüner Streifen auf der linken Seite */}
<div className="absolute left-0 top-0 h-full w-1/6 bg-green-500"></div>
<div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
{/* Blauer Hauptbereich */}
<div className="bg-blue-500 flex-1 flex items-center justify-center text-white text-xl h-16">
CPL
</div>
<div className="text-white text-xs ">CPL</div>
</div>
);
};

View File

@@ -3,17 +3,17 @@ import React from "react";
const Kue705_FO = ({ slot }) => {
return (
<div className="border border-gray-400 w-12 h-24 flex flex-col">
<div className="border border-gray-400 w-10 h-20 flex flex-col">
{/* Erstes Kind, nimmt den restlichen Platz ein */}
<div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-xs">
<div className="flex w-full p-1 mb-4 items-start justify-start">
{slot}
</div>
<div>KÜ705</div>
<div>FO</div>
<div className="text-xs">KÜ705</div>
<div className="text-xs">FO</div>
</div>
{/* Die unteren Abschnitte behalten ihre festen Höhen */}
<div className="bg-green-500 w-full h-1/6"></div>
<div className="bg-green-500 w-full h-3/6"></div>
<div className="bg-blue-500 w-full h-1/6"></div>
</div>
);