mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-06 15:18:48 +00:00
basic design finished
This commit is contained in:
luisa.bellitto
Rudi Regentonne
parent
4f586b833b
commit
55efde580c
7 changed files with 458 additions and 320 deletions
|
|
@ -1,84 +1,30 @@
|
|||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import TextField from '@mui/material/TextField';
|
||||
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 (
|
||||
<Box
|
||||
component="form"
|
||||
sx={{ '& .MuiTextField-root': { m: 1, width: '25ch' } }}
|
||||
noValidate
|
||||
autoComplete="off"
|
||||
>
|
||||
<div>
|
||||
<TextField
|
||||
id="outlined-multiline-flexible"
|
||||
label="Multiline"
|
||||
multiline
|
||||
maxRows={4}
|
||||
/>
|
||||
<TextField
|
||||
id="outlined-textarea"
|
||||
label="Multiline Placeholder"
|
||||
placeholder="Placeholder"
|
||||
multiline
|
||||
/>
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,105 @@
|
|||
import "./profile.css";
|
||||
import "./bio.css";
|
||||
import "./loginAndSignUpPage.css";
|
||||
import { useState } from "react";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import QuiltedImageList from "./QuiltedImageList";
|
||||
import { deepOrange } from "@mui/material/colors";
|
||||
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() {
|
||||
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 (
|
||||
<div className="profile-display">
|
||||
<div className="user-info">
|
||||
<div className="user">
|
||||
<Avatar
|
||||
alt="Username"
|
||||
src="./assets/images/OwlSignUp.png"
|
||||
sx={{ width: 56, height: 56, bgcolor: deepOrange[500] }}
|
||||
>
|
||||
U
|
||||
</Avatar>
|
||||
<span className="profile-username body-m">Username</span>
|
||||
{/* Bio */}
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider theme={theme}>
|
||||
<div className="profile-display">
|
||||
<div className="user-info">
|
||||
<div className="user">
|
||||
<Avatar
|
||||
alt="Username"
|
||||
src="./assets/images/OwlSignUp.png"
|
||||
className="profile-avatar"
|
||||
>
|
||||
U
|
||||
</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>
|
||||
<span className="post-number">50 Posts</span>
|
||||
</div>
|
||||
<QuiltedImageList />
|
||||
<div className="image-list">
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,25 +2,34 @@ 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, ThemeProvider } from "@mui/material/styles";
|
||||
import {
|
||||
createTheme,
|
||||
StyledEngineProvider,
|
||||
ThemeProvider,
|
||||
} from "@mui/material/styles";
|
||||
import './quiltedImageList.css';
|
||||
|
||||
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 (
|
||||
<ThemeProvider theme={theme}>
|
||||
<ImageList variant="quilted" cols={matchDownMd ? 3 : 4 } rowHeight={180}>
|
||||
{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>
|
||||
))}
|
||||
</ImageList>
|
||||
</ThemeProvider>
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider theme={theme}>
|
||||
<ImageList className="image-list" variant="quilted" cols={isSmallScreen ? 3 : isLargeScreen ? 4 : 5} rowHeight={180}>
|
||||
{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>
|
||||
))}
|
||||
</ImageList>
|
||||
</ThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +37,7 @@ const theme = createTheme({
|
|||
breakpoints: {
|
||||
values: {
|
||||
xs: 0,
|
||||
sm: 768,
|
||||
sm: 1000,
|
||||
md: 650,
|
||||
lg: 768,
|
||||
xl: 1200,
|
||||
|
|
@ -45,339 +54,339 @@ const itemData = [
|
|||
{ img: "/assets/images/SummerOwlSignup.jpg", title: "Summer Owl" },
|
||||
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
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-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
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-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
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-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
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-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
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-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
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-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
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-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
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-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
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-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
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-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
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-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
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-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
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-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
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-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
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-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
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-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
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-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
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-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
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-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
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-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
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-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
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-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
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-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
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-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
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-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
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-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
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-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
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-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
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-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
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-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
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-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
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-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
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-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
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-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
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-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
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-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
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-1551782450-a2132b4ba21d",
|
||||
title: "Burger",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
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-1444418776041-9c7e33cc5a9c",
|
||||
title: "Coffee",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
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-1558642452-9d2a7deb7f62",
|
||||
title: "Honey",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
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-1518756131217-31eb79b20e8f",
|
||||
title: "Fern",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
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-1567306301408-9b74779a11af",
|
||||
title: "Tomato basil",
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
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-1589118949245-7d38baf380d6",
|
||||
title: "Bike",
|
||||
},
|
||||
];
|
||||
|
|
|
|||
44
code/frontend/src/bio.css
Normal file
44
code/frontend/src/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-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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,3 +1,9 @@
|
|||
:root {
|
||||
--Rotkehlchen-gray: #e7ecf2;
|
||||
--Rotkehlchen-brown1: #a28d7a;
|
||||
--Rotkehlchen-orange-default: #e79a0e;
|
||||
}
|
||||
|
||||
.base-header {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -18,63 +18,129 @@
|
|||
);
|
||||
align-items: center;
|
||||
background-attachment: fixed;
|
||||
padding-top: var(--Header-hight);
|
||||
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 {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 2rem;
|
||||
margin: 2rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.post-number {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--Rotkehlchen-brown-dark);
|
||||
.numeral-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--Rotkehlchen-brown-dark);
|
||||
color: var(--Rotkehlchen-orange-default);
|
||||
}
|
||||
|
||||
.image-list {
|
||||
width: fit-content;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
.edit-profile {
|
||||
color: var(--Rotkehlchen-orange-default);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.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) {
|
||||
.user-info {
|
||||
.profile-display {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 2rem;
|
||||
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 {
|
||||
width: 553px;
|
||||
width: fit-content;
|
||||
padding-left: 1rem;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.post-number {
|
||||
font-size: 20px;
|
||||
.numeral-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 2rem;
|
||||
font-size: 26px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.data-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.profile-username {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.image-list {
|
||||
width: fit-content;
|
||||
/* TODO: Fix size of shown list (crop images on bottom of screen */
|
||||
max-height: 600px;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
.profile-avatar {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background-color: aqua;
|
||||
}
|
||||
|
||||
.edit-profile {
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,16 @@
|
|||
|
||||
.quilted-image-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
.imageList {
|
||||
height: 100vh;
|
||||
width: fit-content;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.quilted-image-list {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
.image-list {
|
||||
height: 90vh;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
margin-left: 1rem;
|
||||
margin-right: 10ch;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue