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]); }, [showSlider]);
return ( 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="container mx-auto flex justify-between">
<div className="flex flex-row space-x-2"> <div className="flex flex-row space-x-2">
<Icon <Icon

2
components/Header.jsx
View File

@@ -49,7 +49,7 @@ function Header() {
}, [isAdminLoggedIn]); }, [isAdminLoggedIn]);
return ( 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 <div
className="absolute transform -translate-y-1/2 className="absolute transform -translate-y-1/2
left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%] left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%]

21
pages/dashboard.js
View File

@@ -63,7 +63,7 @@ function Dashboard() {
baugruppen.push( baugruppen.push(
<div <div
key={i} 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"> <div className="flex gap-1">
{slots.map((version, index) => { {slots.map((version, index) => {
@@ -100,7 +100,7 @@ function Dashboard() {
}; };
return ( 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 items-center w-full lg:w-2/3">
<div className="flex justify-between gap-1 "> <div className="flex justify-between gap-1 ">
<Icon <Icon
@@ -113,9 +113,9 @@ function Dashboard() {
</div> </div>
</div> </div>
<div className="flex flex-col lg:flex-row gap-1 overflow-hidden "> <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 flex-grow "> <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 className="min-w-full border border-gray-200 text-left table-fixed ">
<thead className="bg-gray-100 border-b border-gray-300"> <thead className="bg-gray-100 border-b border-gray-300">
<tr> <tr>
<th className="py-1 px-4 text-gray-700 text-sm font-medium"> <th className="py-1 px-4 text-gray-700 text-sm font-medium">
@@ -135,12 +135,13 @@ function Dashboard() {
</th> </th>
</tr> </tr>
</thead> </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.length > 0 ? (
last20Messages.map((columns, index) => ( last20Messages.map((columns, index) => (
<tr <tr
key={index} key={index}
className="border-b border-gray-200 hover:bg-gray-50" className="border-b border-gray-200 hover:bg-gray-50 "
> >
<td className="px-4 w-1/7">{columns[0]}</td> <td className="px-4 w-1/7">{columns[0]}</td>
<td className="px-4 w-1/7">{columns[1]}</td> <td className="px-4 w-1/7">{columns[1]}</td>
@@ -176,7 +177,7 @@ function Dashboard() {
Versionsinformationen Versionsinformationen
</h2> </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
icon="bx:code-block" icon="bx:code-block"
className="text-xl 2xl:text-xl xl:text-base text-blue-400" className="text-xl 2xl:text-xl xl:text-base text-blue-400"
@@ -187,7 +188,7 @@ function Dashboard() {
</p> </p>
</div> </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
icon="mdi:web" icon="mdi:web"
className="text-xl lg:text-base text-blue-400" className="text-xl lg:text-base text-blue-400"
@@ -202,7 +203,7 @@ function Dashboard() {
</div> </div>
</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"> <div className="flex items-center space-x-4">
<img src="/images/IP-icon.svg" alt="IP Address" className="w-6 " /> <img src="/images/IP-icon.svg" alt="IP Address" className="w-6 " />
<div> <div>

4
tailwind.config.js
View File

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