mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-07 19:18:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix bugs and now final version of UI

Browse source
This commit is contained in:
luisa.bellitto 2025-06-20 19:20:16 +02:00 • committed by Rudi Regentonne
parent c129fcb3e4
commit ea15d01238
6 changed files with 151 additions and 178 deletions
Download patch file Download diff file Expand all files Collapse all files

60
code/frontend/src/components/QuiltedImageList.tsx
View file

@ -1,56 +1,32 @@
import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
import useMediaQuery from "@mui/material/useMediaQuery";
import {
createTheme,
StyledEngineProvider,
ThemeProvider,
} from "@mui/material/styles";
import { StyledEngineProvider } from "@mui/material/styles";
import "./quiltedImageList.css";
import { Box, Grid } from "@mui/material";
export default function StandardImageList() {
const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
const isLargeScreen = useMediaQuery(theme.breakpoints.down("xl"));
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<Box className="box">
<Grid container spacing={1} className="image-list">
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
className="list-item"
srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
alt={item.title}
onClick={() => console.log(item.title)} /* change to onClick => Feed*/
loading="lazy"
/>
</ImageListItem>
))}
</Grid>
</Box>
</ThemeProvider>
<Box className="box">
<Grid container spacing={1} className="image-list">
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
alt={item.title}
onClick={() =>
console.log(item.title)
} /* change to onClick => Feed*/
loading="lazy"
/>
</ImageListItem>
))}
</Grid>
</Box>
</StyledEngineProvider>
);
}
const theme = createTheme({
breakpoints: {
values: {
xs: 0,
sm: 1000,
md: 650,
lg: 768,
xl: 1200,
},
},
});
const itemData = [
{ img: "/assets/images/BirdLogin.jpg", title: "Bird" },
{ img: "../../assets/images/BirdsSky.jpg", title: "Bird Sky" },