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

make profile page editable

Browse source
This commit is contained in:
luisa.bellitto 2025-06-20 11:22:32 +02:00 • committed by Rudi Regentonne
parent b27d45c965
commit f1711d10e8
8 changed files with 241 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

31
code/frontend/src/pages/Profile.tsx
View file

@ -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<HTMLElement>) => {
@ -44,14 +45,12 @@ function Profile() {
<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-l">Username</span>
<ProfilePictureDialog />
<Tooltip title="Username12345678" placement="top" arrow>
<button className="profile-username body-l">
Username12345678
</button>
</Tooltip>
</div>
<div>
<Box
@ -65,6 +64,7 @@ function Profile() {
}}
noValidate
autoComplete="off"
onClick={editMode ? toggleEditMode : undefined}
>
<TextField
className="bio-input"
@ -73,12 +73,19 @@ function Profile() {
multiline
maxRows={4}
disabled={editMode}
onClick={editMode ? toggleEditMode : undefined}
/>
</Box>
{!editMode && <Button variant="contained" className="button" onClick={toggleEditMode}>Ok</Button>}
{!editMode && (
<Button
variant="contained"
className="button"
onClick={toggleEditMode}
>
Ok
</Button>
)}
</div>
<Divider variant="middle" className="divider"/>
<Divider variant="middle" className="divider" />
<div className="numeral-data">
<div className="data">
<span aria-label="current-post-number">50</span>

119
code/frontend/src/pages/profile.css
View file

@ -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 {