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 ... Mit Blick auf die nachfolgend noch näher beschriebene Datenverarbeitung haben die Nutzer und Betroffenen ...
</Typography> </Typography>
<ul> <Box component="ul" sx={{ listStyle: 'none', p: 0, m: 0 }}>
<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', mb: 0.5 }}> • 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', mb: 0.5 }}> • 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', mb: 0.5 }}> • 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', mb: 0.5 }}> • Einschränkung der Verarbeitung (Art. 18 DSGVO)</Typography></li>
<li><Typography variant="body2" sx={{ color: 'text.primary' }}>Datenübertragbarkeit (Art. 20 DSGVO)</Typography></li> <li><Typography variant="body2" sx={{ color: 'text.primary', mb: 0.5 }}> • Datenübertragbarkeit (Art. 20 DSGVO)</Typography></li>
</ul> </Box>
<Typography variant="h6" sx={{ color: 'text.primary', mt: 4, mb: 1 }}> <Typography variant="h6" sx={{ color: 'text.primary', mt: 4, mb: 1 }}>
III. Informationen zur Datenverarbeitung III. Informationen zur Datenverarbeitung

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

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