feat: Header- und Navigationskomponenten angepasst
- Header-Layout optimiert, um Temperatur und Icons korrekt anzuzeigen. - Anpassungen in der Navigation Abstand zwischen die Elemente. - Verbesserte Ausrichtung und Abstände für Header-Elemente. - Farbanpassungen und Styling-Optimierungen in der Header. -Auf verschiedene Bildschirm Auflösungen getestet (Full-HD und 2K/QHD)
This commit is contained in:
ISA
@@ -4,9 +4,10 @@ import "tailwindcss/tailwind.css";
|
||||
import "@fontsource/roboto";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
import { loadWindowVariables } from "../../utils/loadWindowVariables";
|
||||
import CPLStatus from "../../components/CPLStatus";
|
||||
import Access1Status from "../../components/Access1Status";
|
||||
import Access2Status from "../../components/Access2Status";
|
||||
import CPLStatus from "../../components/modulesStatus/CPLStatus";
|
||||
import Access1Status from "../../components/modulesStatus/Access1Status";
|
||||
import Access2Status from "../../components/modulesStatus/Access2Status";
|
||||
import Kue705_FO from "../../components/modulesStatus/Kue705_FO";
|
||||
|
||||
function Dashboard() {
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
|
||||
@@ -60,7 +61,7 @@ function Dashboard() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-gray-100 flex flex-col min-h-screen p-8">
|
||||
<div className="bg-gray-100 flex flex-col min-h-screen ">
|
||||
{/* Letzte Meldungen */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h1 className="text-xl font-bold text-gray-700">
|
||||
@@ -73,7 +74,7 @@ function Dashboard() {
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
{/* Meldungen Liste */}
|
||||
<div className="bg-white shadow-md rounded-lg p-4 w-full lg:w-2/3">
|
||||
<div className="bg-white shadow-md rounded-lg w-full lg:w-2/3">
|
||||
<table className="min-w-full border border-gray-200 text-left">
|
||||
<thead className="bg-gray-100 border-b border-gray-300">
|
||||
<tr>
|
||||
@@ -94,18 +95,18 @@ function Dashboard() {
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-sm text-gray-600">
|
||||
<tbody className="text-xs text-gray-600">
|
||||
{last20Messages.length > 0 ? (
|
||||
last20Messages.map((columns, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className="border-b border-gray-200 hover:bg-gray-50"
|
||||
>
|
||||
<td className="py-3 px-4">{columns[0]}</td>
|
||||
<td className="py-3 px-4">{columns[1]}</td>
|
||||
<td className="py-3 px-4">{columns[2]}</td>
|
||||
<td className="py-3 px-4 w-2/3">{columns[3]}</td>
|
||||
<td className="py-3 px-4">{columns[4]}</td>
|
||||
<td className="py-3 px-4 w-1/7">{columns[0]}</td>
|
||||
<td className="py-3 px-4 w-1/7">{columns[1]}</td>
|
||||
<td className="py-3 px-4 w-2/7">{columns[2]}</td>
|
||||
<td className="py-3 px-4 w-2/7">{columns[3]}</td>
|
||||
<td className="py-3 px-4w-1/7">{columns[4]}</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
@@ -136,12 +137,15 @@ function Dashboard() {
|
||||
</div>
|
||||
|
||||
{/* Beispiel für Geräteanzeige */}
|
||||
<div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
|
||||
<div className="flex flex-row item-center justify-between">
|
||||
<div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200 justify-between space-y-1">
|
||||
<div className="flex flex-row item-center justify-between ">
|
||||
<CPLStatus />
|
||||
<Access1Status />
|
||||
<Access2Status />
|
||||
</div>
|
||||
<div className="flex flex-row item-center justify-between">
|
||||
<Kue705_FO />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -24,7 +24,7 @@ function Header() {
|
||||
}, [apiUrl]);
|
||||
|
||||
return (
|
||||
<header className="bg-gray-300 flex justify-between items-center w-full h-28 p-4 relative">
|
||||
<header className="bg-gray-300 flex justify-between items-center w-full h-28 relative">
|
||||
{/* Logo - Vergrößert und verschoben */}
|
||||
<div className="absolute left-32 top-32 transform -translate-y-1/2">
|
||||
<Image
|
||||
@@ -36,46 +36,45 @@ function Header() {
|
||||
priority={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/6 flex-shrink-0 h-28"></div>
|
||||
<div className="w-64 flex-shrink-0 h-full mt-24 "></div>
|
||||
|
||||
{/* CPL Status und Stationsname */}
|
||||
<div className="flex items-start space-x-4 w-full">
|
||||
<div className="flex flex-col text-left">
|
||||
<div className="flex flex-col text-left pl-8">
|
||||
{/* Text immer linksbündig */}
|
||||
<h2 className="text-sm font-semibold">Stationsname</h2>
|
||||
<p className="font-bold text-lg">{stationsname}</p>
|
||||
<h2 className="text-base ">Stationsname</h2>
|
||||
<p className="text-base text-gray-600">{stationsname}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4 w-full"></div>
|
||||
{/* Temperatur und Icons */}
|
||||
<div className="flex items-center space-x-32 w-2/6">
|
||||
<div className="p-4 w-full lg:w-full flex flex-row gap-3 justify-between">
|
||||
{/* Temperatur und Luftfeuchtigkeit */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center space-x-4 min-w-0 flex-shrink">
|
||||
<div className="flex items-center min-w-0">
|
||||
<i className="bi bi-thermometer-half"></i>
|
||||
<p className="text-lg ml-1">20.5 °C</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center min-w-0">
|
||||
<i className="bi bi-droplet"></i>
|
||||
<p className="text-lg ml-1">60%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toggle Switch light and dark mode */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-4 min-w-0 flex-shrink">
|
||||
<i className="bi bi-moon"></i>
|
||||
{/* Toggle Switch */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<i className="bi bi-toggle-off"></i>
|
||||
<i className="bi bi-brightness-high"></i>
|
||||
</div>
|
||||
{/* Leer div für flexiblen Abstand */}
|
||||
</div>
|
||||
|
||||
{/* User Icon */}
|
||||
<div>
|
||||
<i className="bi bi-person-circle text-3xl text-black"></i>
|
||||
<div className="min-w-0">
|
||||
<i className="bi bi-person-circle text-3xl text-black mr-7"></i>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -23,12 +23,12 @@ function Navigation() {
|
||||
];
|
||||
|
||||
return (
|
||||
<aside className="w-1/6 flex-shrink-0 h-full mt-24">
|
||||
<nav className="space-y-6 p-4">
|
||||
<aside>
|
||||
<nav className="w-64 flex-shrink-0 h-full mt-24">
|
||||
{menuItems.map((item) => (
|
||||
<Link href={item.path} key={item.name}>
|
||||
<div
|
||||
className={`block px-4 py-2 font-bold whitespace-nowrap transition duration-300 ${
|
||||
className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 ${
|
||||
activeLink === item.path
|
||||
? "bg-sky-500 text-white rounded-r-full"
|
||||
: "text-black hover:bg-gray-200 rounded-r-full"
|
||||
|
||||
20
components/modulesStatus/Kue705_FO.jsx
Normal file
20
components/modulesStatus/Kue705_FO.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
// components/Kue705_FO.jsx
|
||||
import React from "react";
|
||||
|
||||
const Kue705_FO = () => {
|
||||
return (
|
||||
<div className="border border-gray-400 w-16 h-32 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 flex-col justify-start">1</div>
|
||||
<div>KÜ705</div>
|
||||
<div>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-blue-500 w-full h-1/6"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Kue705_FO;
|
||||
Reference in New Issue
Block a user