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

Header Large style 1280 x 720

Browse Source
This commit is contained in:
ISA
2025-01-21 08:24:24 +01:00
parent 53c9870034
commit 5462b90da3
1 changed files with 28 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/Header.jsx
View File

@@ -49,36 +49,50 @@ function Header() {
}, [isAdminLoggedIn]);
return (
<header className="bg-gray-300 flex justify-between items-center w-full h-28 relative text-black">
<div className="absolute left-32 top-32 transform -translate-y-1/2">
<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">
<div
className="absolute transform -translate-y-1/2
left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[8%]
top-[90%] sm:top-[90%] md:top-[90%] lg:top-[90%] xl:top-[90%]"
style={{
height: "13vh", // Dynamische Höhe des Containers
width: "auto",
aspectRatio: "1", // Beibehaltung des Seitenverhältnisses
}}
>
<Image
src="/images/Logo.png"
alt="Logo"
width={80}
height={80}
style={{ width: "auto", height: "auto" }}
fill
sizes="(max-width: 640px) 7vh, (max-width: 1024px) 8vh, (max-width: 1280px) 9vh, 10vh"
className="object-contain"
priority={false}
/>
</div>
<div className="w-64 flex-shrink-0 h-full mt-24 "></div>
<div className="flex items-start space-x-4 w-full">
<div className="flex flex-col text-left pl-8">
<h2 className="text-base">Stationsname</h2>
<p className="text-base text-gray-600">{deviceName}</p>
</div>
{/* Stationsname & Device Name */}
<div
className="absolute transform -translate-y-1/2
left-[23%] sm:left-[20%] md:left-[21%] lg:left-[22%] xl:left-[23%]
top-[50%] flex flex-col justify-center space-y-1"
>
<h2 className="text-lg sm:text-sm md:text-base lg:text-lg xl:text-xl font-bold">
Stationsname
</h2>
<p className="text-gray-600 text-base sm:text-sm md:text-base lg:text-lg xl:text-xl">
{deviceName}
</p>
</div>
<div className="p-4 w-full lg:w-full flex flex-row gap-4 justify-between">
<div className="flex items-center justify-end w-full">
<button
onClick={handleSettingsClick}
className="text-3xl text-black mr-7"
className="text-3xl text-black mr-0"
>
<i className="bi bi-gear"></i>
</button>
</div>
<div className="flex items-center justify-end w-full space-x-2">
<div className="flex items-center justify-end w-1/4 space-x-1">
<button
onClick={handleLogout}
className="bg-littwin-blue text-white px-4 py-2 rounded"