From c86cc8ac63cb362b1acfcc4a15313ca54696b6a6 Mon Sep 17 00:00:00 2001 From: FlorianSpeicher Date: Wed, 21 May 2025 22:12:23 +0200 Subject: [PATCH] Fixed css of navbar and variable itemcard postion --- 01-frontend/src/App.css | 4 +++ 01-frontend/src/App.tsx | 1 + 01-frontend/src/helper/NavBar.css | 5 +++- 01-frontend/src/helper/NavBar.tsx | 2 +- 01-frontend/src/pages/Home.tsx | 50 +++++++++++++++---------------- 01-frontend/src/pages/pages.css | 22 +++++++------- 6 files changed, 46 insertions(+), 38 deletions(-) diff --git a/01-frontend/src/App.css b/01-frontend/src/App.css index ecb8c8b..ccd20e4 100644 --- a/01-frontend/src/App.css +++ b/01-frontend/src/App.css @@ -36,4 +36,8 @@ .read-the-docs { color: #888; +} + +.navbar-offset { + height: 3rem; } \ No newline at end of file diff --git a/01-frontend/src/App.tsx b/01-frontend/src/App.tsx index 2b5e2bf..fcbce92 100644 --- a/01-frontend/src/App.tsx +++ b/01-frontend/src/App.tsx @@ -14,6 +14,7 @@ export default function App() { +
} /> } /> diff --git a/01-frontend/src/helper/NavBar.css b/01-frontend/src/helper/NavBar.css index 209b63a..dc16864 100644 --- a/01-frontend/src/helper/NavBar.css +++ b/01-frontend/src/helper/NavBar.css @@ -2,6 +2,9 @@ .navbar { background-color: #1976d2; /* Material-UI Primary Color */ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); + position: absolute; + top: 0; + height: 3rem; } /* Logo styles */ @@ -61,7 +64,7 @@ /* Button styles */ .navbar-button { - my: 2; + margin: 2; color: white; display: block; } \ No newline at end of file diff --git a/01-frontend/src/helper/NavBar.tsx b/01-frontend/src/helper/NavBar.tsx index 85ef7e6..7c54686 100644 --- a/01-frontend/src/helper/NavBar.tsx +++ b/01-frontend/src/helper/NavBar.tsx @@ -170,7 +170,7 @@ export default function NavBar() { textDecoration: 'none', }} > - LOGO + DPS {pages.map((page) => ( diff --git a/01-frontend/src/pages/Home.tsx b/01-frontend/src/pages/Home.tsx index 600c231..62d343e 100644 --- a/01-frontend/src/pages/Home.tsx +++ b/01-frontend/src/pages/Home.tsx @@ -1,7 +1,7 @@ import { Box, Pagination } from "@mui/material"; -import { useState, useEffect } from "react"; -import ItemCard from "../helper/ItemCard"; +import { useEffect, useState } from "react"; import Item from "../components/Item"; +import ItemCard from "../helper/ItemCard"; import "./pages.css"; // Import der CSS-Datei export default function Home() { @@ -131,44 +131,42 @@ export default function Home() { const [currentPage, setCurrentPage] = useState(1); // Zustand für die aktuelle Seite const [itemsPerPage, setItemsPerPage] = useState(9); // Dynamische Anzahl der Items pro Seite + const [visibleItems, setVisibleItems] = useState([]); // Zustand für die sichtbaren Items - // Berechnung der angezeigten Items basierend auf der aktuellen Seite - const indexOfLastItem = currentPage * itemsPerPage; - const indexOfFirstItem = indexOfLastItem - itemsPerPage; - const currentItems = items.slice(indexOfFirstItem, indexOfLastItem); // Handler für die Pagination const handlePageChange = (event: React.ChangeEvent, page: number) => { setCurrentPage(page); }; + // Aktualisiere die Anzahl der Karten bei Größenänderung + useEffect(() => { + const updateItems = () => { + const newItemsPerPage = calculateItemsPerPage(); + setItemsPerPage(newItemsPerPage); + const startIndex = (currentPage - 1) * newItemsPerPage; + setVisibleItems(items.slice(startIndex, startIndex + newItemsPerPage)); + }; + + updateItems(); // Initialer Aufruf + window.addEventListener("resize", updateItems); // Event-Listener hinzufügen + return () => window.removeEventListener("resize", updateItems); // Event-Listener entfernen + }, [currentPage]); + // Dynamische Berechnung der Anzahl der Items pro Seite basierend auf der Fensterbreite const calculateItemsPerPage = () => { - const width = window.innerWidth; - const columns = Math.floor(width / 300); // Jede Spalte ist ca. 300px breit - const rows = Math.floor(window.innerHeight / 400); // Jede Zeile ist ca. 400px hoch - return columns * rows; + const cardHeight = 250; // Höhe einer Karte (inkl. Margin/Padding) + const paginationHeight = 50; // Höhe der Pagination + const availableHeight = window.innerHeight - paginationHeight - 60; // Verfügbare Höhe (inkl. Padding) + const itemsPerRow = Math.floor(window.innerWidth / 220); // Karten pro Zeile (220px Breite inkl. Margin) + const rows = Math.floor(availableHeight / cardHeight); // Maximale Anzahl an vollständigen Reihen + return itemsPerRow * rows; }; - useEffect(() => { - const updateItemsPerPage = () => { - setItemsPerPage(calculateItemsPerPage()); - }; - - // Initiale Berechnung und Event-Listener hinzufügen - updateItemsPerPage(); - window.addEventListener("resize", updateItemsPerPage); - - // Event-Listener entfernen, wenn die Komponente unmountet wird - return () => { - window.removeEventListener("resize", updateItemsPerPage); - }; - }, []); - return (
- {currentItems.map((item) => ( + {visibleItems.map((item) => ( ))} diff --git a/01-frontend/src/pages/pages.css b/01-frontend/src/pages/pages.css index 30882f9..a0b528d 100644 --- a/01-frontend/src/pages/pages.css +++ b/01-frontend/src/pages/pages.css @@ -43,14 +43,15 @@ } .cardgrid { - display: grid; - gap: 2%; - width: 90%; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Dynamische Spalten */ - padding: 16px; - margin-top: auto; - max-height: calc(100vh - 200px); /* Dynamische Höhe, abhängig von anderen Inhalten */ - margin: 0 auto; + display: grid; + gap: 2%; + width: 90%; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Dynamische Spalten */ + padding: 16px; + margin: 0 auto; + max-height: calc(100vh - 300px); /* Dynamische Höhe, abhängig von der Pagination */ + box-sizing: border-box; /* Stellt sicher, dass Padding in die Breite einbezogen wird */ + } .page-background { @@ -60,7 +61,7 @@ display: flex; flex-direction: column; align-items: center; - justify-content: center; + justify-content: space-between; overflow: hidden; padding: 20px 0; /* Abstand oben und unten */ box-sizing: border-box; /* Stellt sicher, dass Padding in die Höhe einbezogen wird */ @@ -69,5 +70,6 @@ .pagination { display: flex; justify-content: center; - margin-top: 5%; + /*margin-top: 5%;*/ + flex-shrink: 0; } \ No newline at end of file