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

Tabelle in Laptop ohne Scrollbalkenmit gap-0 in dashboard in Würzel-Element

Browse Source
This commit is contained in:
ISA
2025-01-23 14:15:54 +01:00
parent 2246470122
commit 6742fe0a4a
4 changed files with 15 additions and 14 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 xl:p-2 2xl:p-4 overflow-hidden text-black laptop:h-[7vh] ">
<footer className="relative bg-gray-300 p-4 xl:p-2 2xl:p-4 overflow-hidden text-black laptop:h-[5vh] ">
<div className="container mx-auto flex justify-between">
<div className="flex flex-row space-x-2">
<Icon

2
components/Header.jsx
View File

@@ -49,7 +49,7 @@ function Header() {
}, [isAdminLoggedIn]);
return (
<header className="bg-gray-300 flex justify-between items-center w-full h-[13vh] relative text-black ">
<header className="bg-gray-300 flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-black ">
<div
className="absolute transform -translate-y-1/2
left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%]

19
pages/dashboard.js
View File

@@ -63,7 +63,7 @@ function Dashboard() {
baugruppen.push(
<div
key={i}
className="flex bg-white shadow-md rounded-lg mb-4 xl:mb-0 lg:mb-0 border border-gray-200 w-full"
className="flex bg-white shadow-md rounded-lg mb-4 xl:mb-0 lg:mb-0 border border-gray-200 w-full laptop:scale-y-75 xl:scale-y-90"
>
<div className="flex gap-1">
{slots.map((version, index) => {
@@ -100,7 +100,7 @@ function Dashboard() {
};
return (
<div className="flex flex-col gap-4 p-4 h-[calc(100vh-13vh-8vh)]">
<div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
<div className="flex justify-between items-center w-full lg:w-2/3">
<div className="flex justify-between gap-1 ">
<Icon
@@ -113,9 +113,9 @@ function Dashboard() {
</div>
</div>
<div className="flex flex-col lg:flex-row gap-1 overflow-hidden ">
<div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex flex-grow ">
<table className="min-w-full border border-gray-200 text-left ">
<div className="flex flex-col lg:flex-row gap-0 overflow-hidden ">
<div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex ">
<table className="min-w-full border border-gray-200 text-left table-fixed ">
<thead className="bg-gray-100 border-b border-gray-300">
<tr>
<th className="py-1 px-4 text-gray-700 text-sm font-medium">
@@ -135,7 +135,8 @@ function Dashboard() {
</th>
</tr>
</thead>
<tbody className="text-xs text-gray-600 flex-shrink-0">
<tbody className="text-xs text-gray-600 laptop:text-xs flex-shrink-0 ">
{last20Messages.length > 0 ? (
last20Messages.map((columns, index) => (
<tr
@@ -176,7 +177,7 @@ function Dashboard() {
Versionsinformationen
</h2>
<div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2">
<div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2 laptop:p-0 xl:p-0">
<Icon
icon="bx:code-block"
className="text-xl 2xl:text-xl xl:text-base text-blue-400"
@@ -187,7 +188,7 @@ function Dashboard() {
</p>
</div>
<div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2">
<div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2 laptop:p-0 xl:p-0">
<Icon
icon="mdi:web"
className="text-xl lg:text-base text-blue-400"
@@ -202,7 +203,7 @@ function Dashboard() {
</div>
</div>
<div className="flex-shrink-0 flex justify-between items-center mt-1 bg-white p-2 rounded-lg shadow-md border border-gray-200 ">
<div className="flex-shrink-0 flex justify-between items-center mt-1 bg-white p-2 rounded-lg shadow-md border border-gray-200 laptop:m-0 laptop:scale-y-75">
<div className="flex items-center space-x-4">
<img src="/images/IP-icon.svg" alt="IP Address" className="w-6 " />
<div>

4
tailwind.config.js
View File

@@ -15,12 +15,12 @@ module.exports = {
md: "768px",
lg: "1024px",
xl: "1280px",
laptop: "1348px",
laptop: "1350px",
"2xl": "1600px",
"3xl": "1920px",
},
height: {
laptop: "635px", // Benutzerdefinierte Höhe für Laptop
laptop: "688px", // Benutzerdefinierte Höhe für Laptop
},
},
},