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

basic design finished

Browse source
This commit is contained in:
luisa.bellitto 2025-06-18 16:56:27 +02:00 • committed by Rudi Regentonne
parent 036b47e0fd
commit 32490bed89
7 changed files with 458 additions and 320 deletions
Download patch file Download diff file Expand all files Collapse all files

104
code/frontend/src/Bio.tsx
View file

@ -1,84 +1,30 @@
import * as React from 'react'; import * as React from "react";
import Box from '@mui/material/Box'; import Box from "@mui/material/Box";
import TextField from '@mui/material/TextField'; import TextField from "@mui/material/TextField";
import StyledEngineProvider from "@mui/styled-engine/StyledEngineProvider";
import { useFormControl } from '@mui/material/FormControl';
export default function MultilineTextFields() { export default function MultilineTextFields() {
return ( return (
<Box <StyledEngineProvider injectFirst>
component="form" <Box
sx={{ '& .MuiTextField-root': { m: 1, width: '25ch' } }} component="form"
noValidate sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
autoComplete="off" noValidate
> autoComplete="off"
<div> >
<TextField <div>
id="outlined-multiline-flexible" <TextField
label="Multiline" className="bio-input"
multiline id="outlined-multiline-flexible"
maxRows={4} label="Multiline"
/> multiline
<TextField maxRows={4}
id="outlined-textarea" onChange={(event) => {}}
label="Multiline Placeholder" />
placeholder="Placeholder" </div>
multiline </Box>
/> </StyledEngineProvider>
<TextField
id="outlined-multiline-static"
label="Multiline"
multiline
rows={4}
defaultValue="Default Value"
/>
</div>
<div>
<TextField
id="filled-multiline-flexible"
label="Multiline"
multiline
maxRows={4}
variant="filled"
/>
<TextField
id="filled-textarea"
label="Multiline Placeholder"
placeholder="Placeholder"
multiline
variant="filled"
/>
<TextField
id="filled-multiline-static"
label="Multiline"
multiline
rows={4}
defaultValue="Default Value"
variant="filled"
/>
</div>
<div>
<TextField
id="standard-multiline-flexible"
label="Multiline"
multiline
maxRows={4}
variant="standard"
/>
<TextField
id="standard-textarea"
label="Multiline Placeholder"
placeholder="Placeholder"
multiline
variant="standard"
/>
<TextField
id="standard-multiline-static"
label="Multiline"
multiline
rows={4}
defaultValue="Default Value"
variant="standard"
/>
</div>
</Box>
); );
} }

109
code/frontend/src/Profile.tsx
View file

@ -1,32 +1,105 @@
import "./profile.css"; import "./profile.css";
import "./bio.css";
import "./loginAndSignUpPage.css"; import "./loginAndSignUpPage.css";
import { useState } from "react"; import { useState } from "react";
import Avatar from "@mui/material/Avatar"; import Avatar from "@mui/material/Avatar";
import QuiltedImageList from "./QuiltedImageList"; import QuiltedImageList from "./QuiltedImageList";
import { deepOrange } from "@mui/material/colors"; import { deepOrange } from "@mui/material/colors";
import Hashtags from "./Hashtags"; import Hashtags from "./Hashtags";
import TextField from "@mui/material/TextField";
import useMediaQuery from "@mui/material/useMediaQuery";
import {
Box,
IconButton,
StyledEngineProvider,
createTheme,
ThemeProvider,
Divider,
Button,
} from "@mui/material";
import EditIcon from "@mui/icons-material/EditSquare";
function Profile() { function Profile() {
const toggleEditMode = (event: React.MouseEvent<HTMLElement>) => {
event.preventDefault();
isEditable(!editMode);
};
const [editMode, isEditable] = useState(false);
const [text, setText] = useState("");
const theme = createTheme({
breakpoints: {
values: {
xs: 0,
sm: 768,
md: 650,
lg: 768,
xl: 1200,
},
},
});
const matchDownMd = useMediaQuery(theme.breakpoints.down("sm"));
return ( return (
<div className="profile-display"> <StyledEngineProvider injectFirst>
<div className="user-info"> <ThemeProvider theme={theme}>
<div className="user"> <div className="profile-display">
<Avatar <div className="user-info">
alt="Username" <div className="user">
src="./assets/images/OwlSignUp.png" <Avatar
sx={{ width: 56, height: 56, bgcolor: deepOrange[500] }} alt="Username"
> src="./assets/images/OwlSignUp.png"
U className="profile-avatar"
</Avatar> >
<span className="profile-username body-m">Username</span> U
{/* Bio */} </Avatar>
<span className="profile-username body-m">Username</span>
</div>
<div>
<Box
component="form"
sx={{
"& .MuiTextField-root": {
m: 1,
width: "30ch",
maxWidth: "100%",
},
}}
noValidate
autoComplete="off"
>
<TextField
className="bio-input"
id="outlined-multiline-flexible"
label="✎ Bio"
multiline
maxRows={4}
disabled={editMode}
onDoubleClick={toggleEditMode}
/>
</Box>
{!editMode && <Button variant="contained" className="button" onClick={toggleEditMode}>Ok</Button>}
</div>
<Divider variant="middle" className="divider"/>
<div className="numeral-data">
<div className="data">
<span aria-label="current-post-number">50</span>
<span className="data-label">Posts</span>
</div>
<div className="data">
<span aria-label="current-follower-number">100</span>
<span className="data-label">Followers</span>
</div>
<div className="data">
<span aria-label="current-following-number">50</span>
<span className="data-label">Following</span>
</div>
</div>
</div>
<QuiltedImageList />
</div> </div>
<span className="post-number">50 Posts</span> </ThemeProvider>
</div> </StyledEngineProvider>
<QuiltedImageList />
<div className="image-list">
</div>
</div>
); );
} }

379
code/frontend/src/QuiltedImageList.tsx
View file

@ -2,25 +2,34 @@ import * as React from "react";
import ImageList from "@mui/material/ImageList"; import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem"; import ImageListItem from "@mui/material/ImageListItem";
import useMediaQuery from "@mui/material/useMediaQuery"; import useMediaQuery from "@mui/material/useMediaQuery";
import { createTheme, ThemeProvider } from "@mui/material/styles"; import {
createTheme,
StyledEngineProvider,
ThemeProvider,
} from "@mui/material/styles";
import './quiltedImageList.css';
export default function StandardImageList() { export default function StandardImageList() {
const matchDownMd = useMediaQuery(theme.breakpoints.down("sm")); const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
const isLargeScreen = useMediaQuery(theme.breakpoints.down("xl"));
return ( return (
<ThemeProvider theme={theme}> <StyledEngineProvider injectFirst>
<ImageList variant="quilted" cols={matchDownMd ? 3 : 4 } rowHeight={180}> <ThemeProvider theme={theme}>
{itemData.map((item) => ( <ImageList className="image-list" variant="quilted" cols={isSmallScreen ? 3 : isLargeScreen ? 4 : 5} rowHeight={180}>
<ImageListItem key={item.img}> {itemData.map((item) => (
<img <ImageListItem key={item.img}>
srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`} <img
src={`${item.img}?w=164&h=164&fit=crop&auto=format`} srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
alt={item.title} src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
loading="lazy" alt={item.title}
/> loading="lazy"
</ImageListItem> />
))} </ImageListItem>
</ImageList> ))}
</ThemeProvider> </ImageList>
</ThemeProvider>
</StyledEngineProvider>
); );
} }
@ -28,7 +37,7 @@ const theme = createTheme({
breakpoints: { breakpoints: {
values: { values: {
xs: 0, xs: 0,
sm: 768, sm: 1000,
md: 650, md: 650,
lg: 768, lg: 768,
xl: 1200, xl: 1200,
@ -45,339 +54,339 @@ const itemData = [
{ img: "/assets/images/SummerOwlSignup.jpg", title: "Summer Owl" }, { img: "/assets/images/SummerOwlSignup.jpg", title: "Summer Owl" },
{ {
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e', img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: 'Breakfast', title: "Breakfast",
}, },
{ {
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d', img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: 'Burger', title: "Burger",
}, },
{ {
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45', img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: 'Camera', title: "Camera",
}, },
{ {
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c', img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: 'Coffee', title: "Coffee",
}, },
{ {
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8', img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: 'Hats', title: "Hats",
}, },
{ {
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62', img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: 'Honey', title: "Honey",
}, },
{ {
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6', img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: 'Basketball', title: "Basketball",
}, },
{ {
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f', img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: 'Fern', title: "Fern",
}, },
{ {
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25', img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: 'Mushrooms', title: "Mushrooms",
}, },
{ {
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af', img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: 'Tomato basil', title: "Tomato basil",
}, },
{ {
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1', img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: 'Sea star', title: "Sea star",
}, },
{ {
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6', img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: 'Bike', title: "Bike",
}, },
{ {
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e', img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: 'Breakfast', title: "Breakfast",
}, },
{ {
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d', img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: 'Burger', title: "Burger",
}, },
{ {
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45', img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: 'Camera', title: "Camera",
}, },
{ {
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c', img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: 'Coffee', title: "Coffee",
}, },
{ {
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8', img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: 'Hats', title: "Hats",
}, },
{ {
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62', img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: 'Honey', title: "Honey",
}, },
{ {
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6', img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: 'Basketball', title: "Basketball",
}, },
{ {
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f', img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: 'Fern', title: "Fern",
}, },
{ {
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25', img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: 'Mushrooms', title: "Mushrooms",
}, },
{ {
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af', img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: 'Tomato basil', title: "Tomato basil",
}, },
{ {
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1', img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: 'Sea star', title: "Sea star",
}, },
{ {
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6', img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: 'Bike', title: "Bike",
}, },
{ {
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e', img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: 'Breakfast', title: "Breakfast",
}, },
{ {
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d', img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: 'Burger', title: "Burger",
}, },
{ {
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45', img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: 'Camera', title: "Camera",
}, },
{ {
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c', img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: 'Coffee', title: "Coffee",
}, },
{ {
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8', img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: 'Hats', title: "Hats",
}, },
{ {
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62', img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: 'Honey', title: "Honey",
}, },
{ {
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6', img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: 'Basketball', title: "Basketball",
}, },
{ {
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f', img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: 'Fern', title: "Fern",
}, },
{ {
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25', img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: 'Mushrooms', title: "Mushrooms",
}, },
{ {
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af', img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: 'Tomato basil', title: "Tomato basil",
}, },
{ {
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1', img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: 'Sea star', title: "Sea star",
}, },
{ {
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6', img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: 'Bike', title: "Bike",
}, },
{ {
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e', img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: 'Breakfast', title: "Breakfast",
}, },
{ {
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d', img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: 'Burger', title: "Burger",
}, },
{ {
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45', img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: 'Camera', title: "Camera",
}, },
{ {
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c', img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: 'Coffee', title: "Coffee",
}, },
{ {
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8', img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: 'Hats', title: "Hats",
}, },
{ {
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62', img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: 'Honey', title: "Honey",
}, },
{ {
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6', img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: 'Basketball', title: "Basketball",
}, },
{ {
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f', img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: 'Fern', title: "Fern",
}, },
{ {
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25', img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: 'Mushrooms', title: "Mushrooms",
}, },
{ {
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af', img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: 'Tomato basil', title: "Tomato basil",
}, },
{ {
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1', img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: 'Sea star', title: "Sea star",
}, },
{ {
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6', img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: 'Bike', title: "Bike",
}, },
{ {
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e', img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: 'Breakfast', title: "Breakfast",
}, },
{ {
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d', img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: 'Burger', title: "Burger",
}, },
{ {
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45', img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: 'Camera', title: "Camera",
}, },
{ {
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c', img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: 'Coffee', title: "Coffee",
}, },
{ {
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8', img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: 'Hats', title: "Hats",
}, },
{ {
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62', img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: 'Honey', title: "Honey",
}, },
{ {
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6', img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: 'Basketball', title: "Basketball",
}, },
{ {
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f', img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: 'Fern', title: "Fern",
}, },
{ {
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25', img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: 'Mushrooms', title: "Mushrooms",
}, },
{ {
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af', img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: 'Tomato basil', title: "Tomato basil",
}, },
{ {
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1', img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: 'Sea star', title: "Sea star",
}, },
{ {
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6', img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: 'Bike', title: "Bike",
}, },
{ {
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e', img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: 'Breakfast', title: "Breakfast",
}, },
{ {
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d', img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: 'Burger', title: "Burger",
}, },
{ {
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45', img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: 'Camera', title: "Camera",
}, },
{ {
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c', img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: 'Coffee', title: "Coffee",
}, },
{ {
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8', img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: 'Hats', title: "Hats",
}, },
{ {
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62', img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: 'Honey', title: "Honey",
}, },
{ {
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6', img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: 'Basketball', title: "Basketball",
}, },
{ {
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f', img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: 'Fern', title: "Fern",
}, },
{ {
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25', img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: 'Mushrooms', title: "Mushrooms",
}, },
{ {
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af', img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: 'Tomato basil', title: "Tomato basil",
}, },
{ {
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1', img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: 'Sea star', title: "Sea star",
}, },
{ {
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6', img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: 'Bike', title: "Bike",
}, },
{ {
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e', img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
title: 'Breakfast', title: "Breakfast",
}, },
{ {
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d', img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
title: 'Burger', title: "Burger",
}, },
{ {
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45', img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
title: 'Camera', title: "Camera",
}, },
{ {
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c', img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
title: 'Coffee', title: "Coffee",
}, },
{ {
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8', img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
title: 'Hats', title: "Hats",
}, },
{ {
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62', img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
title: 'Honey', title: "Honey",
}, },
{ {
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6', img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
title: 'Basketball', title: "Basketball",
}, },
{ {
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f', img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
title: 'Fern', title: "Fern",
}, },
{ {
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25', img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
title: 'Mushrooms', title: "Mushrooms",
}, },
{ {
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af', img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
title: 'Tomato basil', title: "Tomato basil",
}, },
{ {
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1', img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
title: 'Sea star', title: "Sea star",
}, },
{ {
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6', img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
title: 'Bike', title: "Bike",
}, },
]; ];

44
code/frontend/src/bio.css Normal file
View file

@ -0,0 +1,44 @@
.bio-input {
margin: 0.5rem;
}
/* Root class for the input field */
.bio-input .MuiOutlinedInput-root {
color: var(--Rotkehlchen-gray-default);
}
/* 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-default);
}
.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;
}
}

6
code/frontend/src/components/header.css
View file

@ -1,3 +1,9 @@
:root {
--Rotkehlchen-gray: #e7ecf2;
--Rotkehlchen-brown1: #a28d7a;
--Rotkehlchen-orange-default: #e79a0e;
}
.base-header { .base-header {
width: 100vw; width: 100vw;
display: flex; display: flex;

110
code/frontend/src/profile.css
View file

@ -18,63 +18,129 @@
); );
align-items: center; align-items: center;
background-attachment: fixed; background-attachment: fixed;
padding-top: var(--Header-hight);
z-index: -1; z-index: -1;
} }
.user-info {
display: flex;
flex-direction: column;
border-radius: 1rem;
background-color: hsla(244, 70%, 13%, 0.71);
backdrop-filter: blur(8px);
margin-top: 1rem;
}
.user { .user {
display: flex; display: flex;
width: fit-content; width: fit-content;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
padding: 2rem; margin: 2rem;
border-radius: 1rem;
} }
.post-number { .numeral-data {
font-size: 20px; display: flex;
font-weight: 500; flex-direction: row;
color: var(--Rotkehlchen-brown-dark); font-size: 18px;
font-weight: 500;
color: var(--Rotkehlchen-gray-default);
border-radius: 1rem;
}
.data {
display: flex;
flex-direction: column;
margin: 1rem;
}
.profile-avatar {
width: 40px;
height: 40px;
background-color: aqua;
} }
.profile-username { .profile-username {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
color: var(--Rotkehlchen-brown-dark); color: var(--Rotkehlchen-orange-default);
} }
.image-list { .edit-profile {
width: fit-content; color: var(--Rotkehlchen-orange-default);
margin-left: 0.5rem; font-size: 25px;
margin-right: 0.5rem; }
.bio {
display: flex;
align-content: start;
padding: 2px;
border: 1px solid var(--Rotkehlchen-brown-light);
color: aliceblue;
}
.divider {
border-color: var(--Rotkehlchen-brown-light);
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.user-info { .profile-display {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: 2rem;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: baseline;
}
.user-info {
display: flex;
flex-direction: column;
margin-left: 2rem;
border-radius: 1rem;
background-color: hsla(244, 70%, 13%, 0.71);
align-self: top;
}
.button {
margin-bottom: 0.5rem;
} }
.user { .user {
width: 553px; width: fit-content;
padding-left: 1rem;
padding-right: 3rem;
} }
.post-number { .numeral-data {
font-size: 20px; display: flex;
flex-direction: column;
margin-top: 2rem;
font-size: 26px;
font-weight: 750;
}
.data-label {
font-weight: 500; font-weight: 500;
} }
.data {
display: flex;
flex-direction: column;
margin: 1rem;
}
.profile-username { .profile-username {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
} }
.image-list { .profile-avatar {
width: fit-content; width: 5rem;
/* TODO: Fix size of shown list (crop images on bottom of screen */ height: 5rem;
max-height: 600px; background-color: aqua;
margin-left: 1rem; }
margin-right: 1rem;
.edit-profile {
font-size: 35px;
} }
} }

26
code/frontend/src/quiltedImageList.css
View file

@ -1,22 +1,16 @@
.imageList {
.quilted-image-list { height: 100vh;
display: flex; width: fit-content;
flex-wrap: wrap; margin-left: 1rem;
justify-content: center; margin-right: 1rem;
align-items: center;
gap: 10px;
width: fit-content;
margin: auto;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.quilted-image-list { .image-list {
display: flex; height: 90vh;
gap: 10px; position: relative;
width: fit-content; width: fit-content;
justify-content: center; margin-left: 1rem;
align-self: center; margin-right: 10ch;
} }
} }