mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-09 10:48:48 +00:00
start of lazy loading
This commit is contained in:
luisa.bellitto
Rudi Regentonne
parent
32490bed89
commit
b27d45c965
12 changed files with 68 additions and 93 deletions
30
code/frontend/src/components/Bio.tsx
Normal file
30
code/frontend/src/components/Bio.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import * as React from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import StyledEngineProvider from "@mui/styled-engine/StyledEngineProvider";
|
||||
import { useFormControl } from '@mui/material/FormControl';
|
||||
|
||||
|
||||
export default function MultilineTextFields() {
|
||||
return (
|
||||
<StyledEngineProvider injectFirst>
|
||||
<Box
|
||||
component="form"
|
||||
sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
|
||||
noValidate
|
||||
autoComplete="off"
|
||||
>
|
||||
<div>
|
||||
<TextField
|
||||
className="bio-input"
|
||||
id="outlined-multiline-flexible"
|
||||
label="Multiline"
|
||||
multiline
|
||||
maxRows={4}
|
||||
onChange={(event) => {}}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
</StyledEngineProvider>
|
||||
);
|
||||
}
|
||||
392
code/frontend/src/components/QuiltedImageList.tsx
Normal file
392
code/frontend/src/components/QuiltedImageList.tsx
Normal file
|
|
@ -0,0 +1,392 @@
|
|||
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 "./quiltedImageList.css";
|
||||
|
||||
export default function StandardImageList() {
|
||||
const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
const isLargeScreen = useMediaQuery(theme.breakpoints.down("xl"));
|
||||
|
||||
return (
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider theme={theme}>
|
||||
<div 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}
|
||||
loading="lazy"
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</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" },
|
||||
{ img: "../../assets/images/evening.jpg", title: "Evening" },
|
||||
{ img: "../../assets/images/PortraitForestAndStreet.jpg", title: "Forest" },
|
||||
{ img: "../../assets/images/IceBirdLogin.jpg", title: "Ice Bird" },
|
||||
{ img: "../../assets/images/SummerOwlSignup.jpg", title: "Summer Owl" },
|
||||
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
|
||||
title: "Breakfast",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
|
||||
title: "Camera",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
|
||||
title: "Hats",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
|
||||
title: "Basketball",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
|
||||
title: "Mushrooms",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
|
||||
title: "Sea star",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
|
||||
title: "Breakfast",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
|
||||
title: "Camera",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
|
||||
title: "Hats",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
|
||||
title: "Basketball",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
|
||||
title: "Mushrooms",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
|
||||
title: "Sea star",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
|
||||
title: "Breakfast",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
|
||||
title: "Camera",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
|
||||
title: "Hats",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
|
||||
title: "Basketball",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
|
||||
title: "Mushrooms",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
|
||||
title: "Sea star",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
|
||||
title: "Breakfast",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
|
||||
title: "Camera",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
|
||||
title: "Hats",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
|
||||
title: "Basketball",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
|
||||
title: "Mushrooms",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
|
||||
title: "Sea star",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
|
||||
title: "Breakfast",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
|
||||
title: "Camera",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
|
||||
title: "Hats",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
|
||||
title: "Basketball",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
|
||||
title: "Mushrooms",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
|
||||
title: "Sea star",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
|
||||
title: "Breakfast",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
|
||||
title: "Camera",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
|
||||
title: "Hats",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
|
||||
title: "Basketball",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
|
||||
title: "Mushrooms",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
|
||||
title: "Sea star",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
|
||||
title: "Breakfast",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
|
||||
title: "Camera",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
|
||||
title: "Hats",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
|
||||
title: "Basketball",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
|
||||
title: "Mushrooms",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
|
||||
title: "Sea star",
|
||||
},
|
||||
{
|
||||
img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
];
|
||||
44
code/frontend/src/components/bio.css
Normal file
44
code/frontend/src/components/bio.css
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
.bio-input {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
/* Root class for the input field */
|
||||
.bio-input .MuiOutlinedInput-root {
|
||||
color: var(--Rotkehlchen-gray);
|
||||
}
|
||||
/* Class for the border around the input field */
|
||||
.bio-input .MuiOutlinedInput-notchedOutline {
|
||||
border-color: var(--Rotkehlchen-brown-light);
|
||||
}
|
||||
/* Class for the label of the input field */
|
||||
.bio-input .MuiInputLabel-outlined {
|
||||
color: var(--Rotkehlchen-brown-light);
|
||||
}
|
||||
/* Class for the border in focused state */
|
||||
.bio-input .Mui-focused .MuiOutlinedInput-notchedOutline {
|
||||
border-color: var(--Rotkehlchen-yellow-default);
|
||||
}
|
||||
/* Disabled input field text and border color */
|
||||
.bio-input .css-w4nesw-MuiInputBase-input-MuiOutlinedInput-input.Mui-disabled {
|
||||
-webkit-text-fill-color: var(--Rotkehlchen-gray);
|
||||
}
|
||||
.bio-input
|
||||
.MuiInputBase-root.MuiOutlinedInput-root.Mui-disabled
|
||||
.MuiOutlinedInput-notchedOutline {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.bio-input {
|
||||
width: 100%;
|
||||
margin: 1rem;
|
||||
}
|
||||
.bio-input .MuiInputLabel-outlined {
|
||||
font-size: 18px;
|
||||
}
|
||||
.bio-input .MuiOutlinedInput-input {
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.header-title {
|
||||
display: flex;
|
||||
|
|
|
|||
17
code/frontend/src/components/quiltedImageList.css
Normal file
17
code/frontend/src/components/quiltedImageList.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.imageList {
|
||||
height: 100vh;
|
||||
width: fit-content;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.image-list {
|
||||
height: 90vh;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
margin-left: 1rem;
|
||||
margin-right: 10ch;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue