From f1711d10e8d40f5ebc63da271e2cb658a7b17525 Mon Sep 17 00:00:00 2001 From: "luisa.bellitto" Date: Fri, 20 Jun 2025 11:22:32 +0200 Subject: [PATCH] make profile page editable --- code/frontend/src/App.css | 5 + .../src/components/ChagneAvatarDialog.tsx | 88 +++++++++++++ .../src/components/QuiltedImageList.tsx | 30 +++-- code/frontend/src/components/footer.css | 20 +-- .../src/components/quiltedImageList.css | 49 +++++--- code/frontend/src/pages/Profile.tsx | 31 +++-- code/frontend/src/pages/profile.css | 119 ++++++++++-------- code/frontend/src/styles/colors.css | 1 + 8 files changed, 241 insertions(+), 102 deletions(-) create mode 100644 code/frontend/src/components/ChagneAvatarDialog.tsx diff --git a/code/frontend/src/App.css b/code/frontend/src/App.css index e247a5f..80f1d26 100644 --- a/code/frontend/src/App.css +++ b/code/frontend/src/App.css @@ -1,5 +1,6 @@ .App { text-align: center; + min-height: 100vh; } .App-logo { @@ -7,6 +8,10 @@ pointer-events: none; } +footer { + vertical-align: baseline; +} + @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; diff --git a/code/frontend/src/components/ChagneAvatarDialog.tsx b/code/frontend/src/components/ChagneAvatarDialog.tsx new file mode 100644 index 0000000..2d7b756 --- /dev/null +++ b/code/frontend/src/components/ChagneAvatarDialog.tsx @@ -0,0 +1,88 @@ +import * as React from "react"; +import Button from "@mui/material/Button"; +import { styled } from "@mui/material/styles"; +import Dialog from "@mui/material/Dialog"; +import DialogTitle from "@mui/material/DialogTitle"; +import DialogContent from "@mui/material/DialogContent"; +import DialogActions from "@mui/material/DialogActions"; +import IconButton from "@mui/material/IconButton"; +import CloseIcon from "@mui/icons-material/Close"; +import Typography from "@mui/material/Typography"; +import Avatar from "@mui/material/Avatar"; + +const BootstrapDialog = styled(Dialog)(({ theme }) => ({ + "& .MuiDialogContent-root": { + padding: theme.spacing(2), + }, + "& .MuiDialogActions-root": { + padding: theme.spacing(1), + }, +})); + +export default function CustomizedDialogs() { + const [open, setOpen] = React.useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + const handleClose = () => { + setOpen(false); + }; + + return ( + + + + + Modal title + + ({ + position: "absolute", + right: 8, + top: 8, + color: theme.palette.grey[500], + })} + > + + + + + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, + dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta + ac consectetur ac, vestibulum at eros. + + + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. + Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor + auctor. + + + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo + cursus magna, vel scelerisque nisl consectetur et. Donec sed odio + dui. Donec ullamcorper nulla non metus auctor fringilla. + + + + + + + + ); +} diff --git a/code/frontend/src/components/QuiltedImageList.tsx b/code/frontend/src/components/QuiltedImageList.tsx index 40236c8..3740d4c 100644 --- a/code/frontend/src/components/QuiltedImageList.tsx +++ b/code/frontend/src/components/QuiltedImageList.tsx @@ -8,6 +8,7 @@ import { ThemeProvider, } from "@mui/material/styles"; import "./quiltedImageList.css"; +import { Box, Grid } from "@mui/material"; export default function StandardImageList() { const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm")); @@ -16,23 +17,28 @@ export default function StandardImageList() { return ( -
- {itemData.map((item) => ( - - {item.title} - - ))} -
+ + + {itemData.map((item) => ( + + {item.title} console.log(item.title)} /* change to onClick => Feed*/ + loading="lazy" + /> + + ))} + +
); } + const theme = createTheme({ breakpoints: { values: { diff --git a/code/frontend/src/components/footer.css b/code/frontend/src/components/footer.css index a97420e..2ee9470 100644 --- a/code/frontend/src/components/footer.css +++ b/code/frontend/src/components/footer.css @@ -1,4 +1,3 @@ - /*mobile style first*/ .footer { display: flex; @@ -10,7 +9,6 @@ gap: 2rem; text-align: center; text-decoration: none; - } .footer-left { @@ -23,9 +21,9 @@ .footer-link { display: flex; align-items: center; - gap: 0.5rem; /*Gap between icon and logo */ - text-decoration: none; /*prevents constant underline*/ - color: black; + gap: 0.5rem; /*Gap between icon and logo */ + text-decoration: none; /*prevents constant underline*/ + color: black; font-weight: 500; } @@ -42,14 +40,14 @@ } .footer-link.feather span { - color: var(--Rotkehlchen-orange-default); + color: var(--Rotkehlchen-orange-default); font-weight: bold; } .footer-right { display: flex; flex-direction: column; - gap: 0.4rem; /*gap between the links*/ + gap: 0.4rem; /*gap between the links*/ align-items: flex-end; } @@ -59,11 +57,13 @@ font-weight: 500; } -.footer-link:hover, .footer-link:active { +.footer-link:hover, +.footer-link:active { text-decoration: underline; } -.footer-link.feather:hover, .footer-link.feather:active { - text-decoration-color: var(--Rotkehlchen-orange-default) ; +.footer-link.feather:hover, +.footer-link.feather:active { + text-decoration-color: var(--Rotkehlchen-orange-default); } /*@media adjusts styles for desktop */ diff --git a/code/frontend/src/components/quiltedImageList.css b/code/frontend/src/components/quiltedImageList.css index 3eb11c0..bd6dc02 100644 --- a/code/frontend/src/components/quiltedImageList.css +++ b/code/frontend/src/components/quiltedImageList.css @@ -1,17 +1,38 @@ -.imageList { - height: 100vh; - width: fit-content; - margin-left: 1rem; - margin-right: 1rem; +.image-list { + height: fit-content; + width: fit-content; + justify-content: center; +} + +.box { + flex-grow: 1; + height: fit-content; + margin-left: 1rem; + margin-right: 1rem; +} +.css-1row2ej-MuiImageListItem-root .MuiImageListItem-img { + object-fit: cover; + width: fill-available; + height: fill-available; +} + +@media only screen and (min-width: 768px) { + + .box { + max-width: 75%; + margin-left: 45ch; + margin-right: 10ch; } - - @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; + + .image-list { + position: relative; + width: fill-available; + margin-bottom: 1rem; + } + + .css-1row2ej-MuiImageListItem-root .MuiImageListItem-img { + object-fit: cover; + width: 15rem; + height: 15rem; } } diff --git a/code/frontend/src/pages/Profile.tsx b/code/frontend/src/pages/Profile.tsx index bd94d5b..4dc7d94 100644 --- a/code/frontend/src/pages/Profile.tsx +++ b/code/frontend/src/pages/Profile.tsx @@ -16,8 +16,9 @@ import { ThemeProvider, Divider, Button, + Tooltip, } from "@mui/material"; -import Bio from "../components/Bio"; +import ProfilePictureDialog from "../components/ChagneAvatarDialog"; function Profile() { const toggleEditMode = (event: React.MouseEvent) => { @@ -44,14 +45,12 @@ function Profile() {
- - U - - Username + + + +
- {!editMode && } + {!editMode && ( + + )}
- +
50 diff --git a/code/frontend/src/pages/profile.css b/code/frontend/src/pages/profile.css index 95c5d80..7067f12 100644 --- a/code/frontend/src/pages/profile.css +++ b/code/frontend/src/pages/profile.css @@ -1,84 +1,95 @@ .profile-display { - padding-top: var(--Header-hight); + display: flex; + padding-top: calc(var(--Header-height) + 1rem); flex-direction: column; } .user-info { - display: flex; - flex-direction: column; - border-radius: 1rem; - background-color: hsla(244, 70%, 13%, 0.71); - backdrop-filter: blur(8px); - margin-top: calc(var(--Header-height) + 1rem); - padding-left: 1rem; - padding-right: 1rem; - } + display: flex; + flex-direction: column; + margin-bottom: 1rem; + margin-left: 1rem; + margin-right: 1rem; + border-radius: 1rem; + background-color: var(--transparent-dark-blue); + backdrop-filter: blur(8px); + padding-left: 1rem; + padding-right: 1rem; + height: fit-content; +} .user { - display: flex; - width: fit-content; - align-items: center; - gap: 20px; - margin: 2rem; - border-radius: 1rem; - } + display: flex; + width: fit-content; + align-items: center; + gap: 20px; + padding-bottom: 1rem; + margin-top: 1rem; + border-radius: 1rem; +} - .numeral-data { - display: flex; - flex-direction: row; - font-size: 18px; - font-weight: 500; - color: var(--Rotkehlchen-gray); - border-radius: 1rem; - } +.numeral-data { + display: flex; + flex-direction: row; + font-size: 18px; + font-weight: 600; + color: var(--Rotkehlchen-gray); + border-radius: 1rem; +} - .data { - display: flex; - flex-direction: column; - margin: 1rem; - } +.data { + display: flex; + flex-direction: column; + margin: 1rem; +} - .profile-avatar { - width: 40px; - height: 40px; - background-color: aqua; - } +.data-label { + padding-top: 0.5rem; + font-size: 0.7rem; + font-weight: 500; +} - .profile-username { - font-weight: 700; - color: var(--Rotkehlchen-orange-default); - } +.profile-avatar { + width: 40px; + height: 40px; + background-color: aqua; +} - .button { - margin-bottom: 0.5rem; - } +.profile-username { + font-weight: 700; + font-size: 1.2rem; + color: var(--Rotkehlchen-orange-default); + max-width: 10rem; + overflow: hidden; + text-overflow: ellipsis; +} - .divider { - border-color: var(--Rotkehlchen-orange-default); - } +.button { + margin-bottom: 0.5rem; +} + +.divider { + border-color: var(--Rotkehlchen-orange-default); +} @media screen and (min-width: 768px) { -.profile-display { + .profile-display { flex-direction: row; - justify-content: space-around; - align-items: baseline; - padding-top: 1rem; -} + } .user-info { display: flex; flex-direction: column; + position: fixed; margin-left: 2rem; - border-radius: 1rem; - background-color: hsla(244, 70%, 13%, 0.71); - align-self: top; - padding-bottom: 1rem; + margin-right: 1.5rem; } .user { width: fit-content; padding-left: 1rem; padding-right: 3rem; + padding-bottom: 1rem; } .numeral-data { diff --git a/code/frontend/src/styles/colors.css b/code/frontend/src/styles/colors.css index 31c2ad1..7a6da58 100644 --- a/code/frontend/src/styles/colors.css +++ b/code/frontend/src/styles/colors.css @@ -16,6 +16,7 @@ ), url("../../public/assets/images/BirdsSky.jpg") lightgray 50% / cover no-repeat; + --transparent-dark-blue: hsla(244, 70%, 13%, 0.71); } body{