Uni/dps-webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Contact page und home page verbessert

Browse Source
This commit is contained in:
mathusan
2025-06-17 22:44:05 +02:00
parent cc67209f7e
commit 3c1ef297e9
3 changed files with 79 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
01-frontend/src/helper/homepage/ItemCard.css Normal file
View File

@@ -0,0 +1,25 @@
/* FilterItem.css */
/* Container um jedes Filter-Widget */
.filter-item {
margin-bottom: 1.5rem;
}
/* Überschrift (FormLabel) */
.filter-item__label {
font-weight: bold;
margin-bottom: 0.5rem;
/* nutze die CSS-Variable, die GlobalStyles füllen */
color: var(--text-color);
}
/* Das Material-UI FormControl-Element */
.filter-item__group {
display: flex;
flex-direction: column;
}
/* Jeder Radio-Button mit Label */
.filter-item__option {
color: var(--text-color);
}

14
01-frontend/src/pages/Contact.tsx
View File

@@ -57,13 +57,13 @@ export default function Impressum() {
Mit Blick auf die nachfolgend noch näher beschriebene Datenverarbeitung haben die Nutzer und Betroffenen ...
</Typography>
<ul>
<li><Typography variant="body2" sx={{ color: 'text.primary' }}>Auskunft über die verarbeiteten Daten (Art. 15 DSGVO)</Typography></li>
<li><Typography variant="body2" sx={{ color: 'text.primary' }}>Berichtigung unrichtiger Daten (Art. 16 DSGVO)</Typography></li>
<li><Typography variant="body2" sx={{ color: 'text.primary' }}>Löschung der Daten (Art. 17 DSGVO)</Typography></li>
<li><Typography variant="body2" sx={{ color: 'text.primary' }}>Einschränkung der Verarbeitung (Art. 18 DSGVO)</Typography></li>
<li><Typography variant="body2" sx={{ color: 'text.primary' }}>Datenübertragbarkeit (Art. 20 DSGVO)</Typography></li>
</ul>
<Box component="ul" sx={{ listStyle: 'none', p: 0, m: 0 }}>
<li><Typography variant="body2" sx={{ color: 'text.primary', mb: 0.5 }}> • Auskunft über die verarbeiteten Daten (Art. 15 DSGVO)</Typography></li>
<li><Typography variant="body2" sx={{ color: 'text.primary', mb: 0.5 }}> • Berichtigung unrichtiger Daten (Art. 16 DSGVO)</Typography></li>
<li><Typography variant="body2" sx={{ color: 'text.primary', mb: 0.5 }}> • Löschung der Daten (Art. 17 DSGVO)</Typography></li>
<li><Typography variant="body2" sx={{ color: 'text.primary', mb: 0.5 }}> • Einschränkung der Verarbeitung (Art. 18 DSGVO)</Typography></li>
<li><Typography variant="body2" sx={{ color: 'text.primary', mb: 0.5 }}> • Datenübertragbarkeit (Art. 20 DSGVO)</Typography></li>
</Box>
<Typography variant="h6" sx={{ color: 'text.primary', mt: 4, mb: 1 }}>
III. Informationen zur Datenverarbeitung

64
01-frontend/src/pages/Home.tsx
View File

@@ -90,17 +90,17 @@ export default function Home() {
}, [items, priceRange, selectedCategory, selectedRating, searchQuery]);
// Lese die Suchanfrage aus der URL
useEffect(() => {
const params = new URLSearchParams(location.search);
const query = params.get("search");
setSearchQuery(query);
}, [location.search]);
// Lese die Suchanfrage aus der URL
useEffect(() => {
const params = new URLSearchParams(location.search);
const query = params.get("search");
setSearchQuery(query);
}, [location.search]);
// Items, die aktuell angezeigt werden
const visibleItems: ItemWithImage[] = filteredItems;
// Container Ref
const containerRef = useRef<HTMLDivElement>(null);
@@ -167,17 +167,45 @@ export default function Home() {
onChange={handleRatingChange}
/>
</div>
<div className="page-background page-background-center" ref={containerRef}>
<Box className="cardgrid">
{visibleItems.length === 0 ? (
<Alert variant="filled" severity="warning" className="no-results">{t('noItemsFound')}</Alert>
) : (
visibleItems.map((item) => (
<ItemCard key={item.id} item={item} />
))
)}
</Box>
return (
<div
className="home-page-background"
style={{ backgroundColor: theme.palette.homepage }}
>
<div className="sidebar sidebar-filter">
{/* … Sidebar mit Filtern … */}
</div>
{/* hier kommt Dein angepasster Hauptbereich */}
<main
className="page-background page-background-center"
ref={containerRef}
>
<Box className="cardgrid">
{filteredItems.length === 0 ? (
<Alert
variant="filled"
severity="error"
sx={{
bgcolor: theme.palette.error.main,
color: theme.palette.getContrastText(
theme.palette.error.main
),
width: "100%",
justifyContent: "center",
}}
>
{t("noItemsFound")}
</Alert>
) : (
filteredItems.map(item => (
<ItemCard key={item.id} item={item} />
))
)}
</Box>
</main>
</div>
);
</div>
);
}