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

feat: Header- und Navigationskomponenten angepasst

Browse Source 
- 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
2024-09-27 10:59:33 +02:00
parent 99a6212e04
commit 372a785af6
7 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/dashboard/page.jsx
View File

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