mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-06 15:18:48 +00:00
first profile page test
This commit is contained in:
luisa.bellitto
Rudi Regentonne
parent
57e588de60
commit
329da060f0
9 changed files with 20420 additions and 1460 deletions
18038
code/frontend/package-lock.json
generated
Normal file
18038
code/frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -3,6 +3,10 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@mui/icons-material": "^7.1.1",
|
||||
"@mui/material": "^7.1.1",
|
||||
"@testing-library/dom": "^10.4.0",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.1.0",
|
||||
|
|
|
|||
32
code/frontend/src/Profile.tsx
Normal file
32
code/frontend/src/Profile.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import "./profile.css";
|
||||
import "./loginAndSignUpPage.css";
|
||||
import { useState } from "react";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import QuiltedImageList from "./QuiltedImageList";
|
||||
import { deepOrange } from "@mui/material/colors";
|
||||
|
||||
function Profile() {
|
||||
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 */}
|
||||
</div>
|
||||
<span className="post-number">50 Posts</span>
|
||||
</div>
|
||||
<QuiltedImageList />
|
||||
<div className="image-list">
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Profile;
|
||||
383
code/frontend/src/QuiltedImageList.tsx
Normal file
383
code/frontend/src/QuiltedImageList.tsx
Normal file
|
|
@ -0,0 +1,383 @@
|
|||
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";
|
||||
|
||||
export default function StandardImageList() {
|
||||
const matchDownMd = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
const theme = createTheme({
|
||||
breakpoints: {
|
||||
values: {
|
||||
xs: 0,
|
||||
sm: 768,
|
||||
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',
|
||||
},
|
||||
];
|
||||
|
|
@ -1,23 +1,53 @@
|
|||
.background {
|
||||
:root {
|
||||
--Rotkehlchen-gray: #e7ecf2;
|
||||
--Rotkehlchen-brown-light: #a28d7a;
|
||||
--Rotkehlchen-orange-default: #e79a0e;
|
||||
--Rotkehlchen-gray-default: #e7ecf2;
|
||||
--Rotkehlchen-brown-middle: #7f6d6d;
|
||||
--Rotkehlchen-yellow-default: #fed640;
|
||||
--Rotkehlchen-yellow-hover: #eac22a;
|
||||
--Rotkehlchen-brown-dark: #4c4141;
|
||||
}
|
||||
|
||||
.login-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh; /* Full viewport height */
|
||||
width: 100vw; /* Full viewport width */
|
||||
background: var(--gradient-blue-backround-mobile);
|
||||
position: absolute;
|
||||
background: var(
|
||||
--gradient-blue-backround-mobile,
|
||||
linear-gradient(
|
||||
270deg,
|
||||
rgba(20, 15, 86, 0.27) 0%,
|
||||
rgba(20, 15, 86, 0.58) 24%,
|
||||
rgba(20, 15, 86, 0.74) 43%,
|
||||
rgba(17, 13, 71, 0.82) 56%,
|
||||
rgba(13, 10, 56, 0.9) 68%
|
||||
),
|
||||
url("../public/assets/images/BirdsSky.jpg") lightgray 50% / cover no-repeat
|
||||
);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-attachment: fixed;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.login-text {
|
||||
display: flex;
|
||||
padding: 40px;
|
||||
padding: 8px 40px 40px 40px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
color: var(--Rotkehlchen-gray);
|
||||
color: var(--Rotkehlchen-gray-default);
|
||||
text-align: center;
|
||||
|
||||
/* Body-L */
|
||||
font-family: Inter;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 40px; /* 166.667% */
|
||||
}
|
||||
|
||||
.login-icon {
|
||||
|
|
@ -79,38 +109,53 @@
|
|||
border: none;
|
||||
color: var(--Rotkehlchen-brown-middle);
|
||||
outline: 0 !important;
|
||||
|
||||
/* M3/body/large */
|
||||
font-family: var(--Static-Body-Large-Font, Roboto);
|
||||
font-size: var(--Static-Body-Large-Size, 16px);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */
|
||||
letter-spacing: var(--Static-Body-Large-Tracking, 0.5px);
|
||||
}
|
||||
.login-here {
|
||||
color: var(--Rotkehlchen-orange-default);
|
||||
color: var(--Rotkehlchen-orange-default, #e79a0e);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
/* Body-M */
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 17px;
|
||||
letter-spacing: 0.8px;
|
||||
}
|
||||
|
||||
.login-signup {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
/* Body-M */
|
||||
font-family: Inter;
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 17px; /* 106.25% */
|
||||
letter-spacing: 0.8px;
|
||||
}
|
||||
|
||||
.login-part {
|
||||
display: flex;
|
||||
padding: 8px 40px 40px 40px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.input-fields {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Desktop view*/
|
||||
@media only screen and (min-width: 768px) {
|
||||
.login-display {
|
||||
|
|
@ -129,7 +174,6 @@
|
|||
height: 60vh;
|
||||
min-height: 400px;
|
||||
min-width: 500px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.login-image {
|
||||
|
|
@ -142,8 +186,8 @@
|
|||
align-items: center;
|
||||
|
||||
border-radius: 8px;
|
||||
border: 5px solid var(--Rotkehlchen-gray);
|
||||
background-image: url("../../public/assets/images/IceBirdLogin.jpg");
|
||||
border: 5px solid var(--Rotkehlchen-gray-default);
|
||||
background-image: url("../public/assets/images/IceBirdLogin.jpg");
|
||||
background-size: cover;
|
||||
background-position: 75%;
|
||||
}
|
||||
|
|
@ -158,8 +202,8 @@
|
|||
align-items: center;
|
||||
|
||||
border-radius: 8px;
|
||||
border: 5px solid var(--Rotkehlchen-gray);
|
||||
background-image: url("../../public/assets/images/SummerOwlSignup.jpg");
|
||||
border: 5px solid var(--Rotkehlchen-gray-default);
|
||||
background-image: url("../public/assets/images/SummerOwlSignup.jpg");
|
||||
background-size: cover;
|
||||
/*background-position: 75%;*/
|
||||
}
|
||||
|
|
@ -170,19 +214,8 @@
|
|||
padding: 3%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.input-fields {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
.error-messages {
|
||||
color: red;
|
||||
}
|
||||
|
|
|
|||
80
code/frontend/src/profile.css
Normal file
80
code/frontend/src/profile.css
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
.profile-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh; /* Full viewport height */
|
||||
width: 100vw; /* Full viewport width */
|
||||
position: absolute;
|
||||
background: var(
|
||||
--gradient-blue-backround-mobile,
|
||||
linear-gradient(
|
||||
270deg,
|
||||
rgba(20, 15, 86, 0.27) 0%,
|
||||
rgba(20, 15, 86, 0.58) 24%,
|
||||
rgba(20, 15, 86, 0.74) 43%,
|
||||
rgba(17, 13, 71, 0.82) 56%,
|
||||
rgba(13, 10, 56, 0.9) 68%
|
||||
),
|
||||
url("../public/assets/images/BirdsSky.jpg") lightgray 50% / cover no-repeat
|
||||
);
|
||||
align-items: center;
|
||||
background-attachment: fixed;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.post-number {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--Rotkehlchen-brown-dark);
|
||||
}
|
||||
|
||||
.profile-username {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--Rotkehlchen-brown-dark);
|
||||
}
|
||||
|
||||
.image-list {
|
||||
width: fit-content;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 2rem;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user {
|
||||
width: 553px;
|
||||
}
|
||||
|
||||
.post-number {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
22
code/frontend/src/quiltedImageList.css
Normal file
22
code/frontend/src/quiltedImageList.css
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
|
||||
.quilted-image-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.quilted-image-list {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
width: fit-content;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
70
code/frontend/src/test.tsx
Normal file
70
code/frontend/src/test.tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import * as React from "react";
|
||||
import './header.css';
|
||||
import Box from "@mui/material/Box";
|
||||
import Drawer from "@mui/material/Drawer";
|
||||
import Button from "@mui/material/Button";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import List from "@mui/material/List";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import ListItem from "@mui/material/ListItem";
|
||||
import ListItemButton from "@mui/material/ListItemButton";
|
||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import InboxIcon from "@mui/icons-material/MoveToInbox";
|
||||
import MailIcon from "@mui/icons-material/Mail";
|
||||
|
||||
export default function TemporaryDrawer() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const toggleDrawer = (newOpen: boolean) => () => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
|
||||
const DrawerList = (
|
||||
<Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
|
||||
<List>
|
||||
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
|
||||
<ListItem key={text} disablePadding>
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={text} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
<Divider />
|
||||
<List>
|
||||
{["All mail", "Trash", "Spam"].map((text, index) => (
|
||||
<ListItem key={text} disablePadding>
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={text} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<header className="base-header">
|
||||
<div className="base-header-icon">
|
||||
<img src="/assets/icons/feather_black.svg" alt="featherIcon" />
|
||||
</div>
|
||||
<p className="base-header-title">Feather Feed</p>
|
||||
|
||||
<IconButton aria-label="menu" onClick={toggleDrawer(true)}>
|
||||
<MailIcon/>
|
||||
</IconButton>
|
||||
</header>
|
||||
<Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
|
||||
{DrawerList}
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue