From e7c3f594bf02d12d75271688397a5d444ec8777a Mon Sep 17 00:00:00 2001 From: Ilay Eble Date: Sun, 29 Jun 2025 15:51:42 +0200 Subject: [PATCH] New Componen, Avatar --- code/frontend/src/components/UserAvatar.tsx | 51 ++++++++++++ code/frontend/src/components/userAvatar.css | 0 code/frontend/src/pages/PostCreation.tsx | 70 ++++++++-------- code/frontend/src/pages/postCreation.css | 90 ++++++++++++--------- 4 files changed, 137 insertions(+), 74 deletions(-) create mode 100644 code/frontend/src/components/UserAvatar.tsx create mode 100644 code/frontend/src/components/userAvatar.css diff --git a/code/frontend/src/components/UserAvatar.tsx b/code/frontend/src/components/UserAvatar.tsx new file mode 100644 index 0000000..6473f7f --- /dev/null +++ b/code/frontend/src/components/UserAvatar.tsx @@ -0,0 +1,51 @@ +import { Avatar, Box, Typography } from "@mui/material"; +import api from "../api/axios"; +import { useState,useEffect } from "react"; + +interface UserAvatarProps { + username: string|null; + src?: string; + size?: number | string; +} + +export default function UserAvatar({ username, size = 40 }: UserAvatarProps) { + const[pb, setPb] = useState(); + + useEffect(() => { + (async () => { + try { + const res = await api.get(`/profile/getProfilePicture/${username}`) + setPb(res.data.url); + } catch (error) { + console.log(error); + } + })(); + }, [username]); + + return ( + + + username[0]; + + + {username} + + + ); +} + +// ---------------- Exemplarische Verwendung ---------------- +// +// --------------------------------------------------------- diff --git a/code/frontend/src/components/userAvatar.css b/code/frontend/src/components/userAvatar.css new file mode 100644 index 0000000..e69de29 diff --git a/code/frontend/src/pages/PostCreation.tsx b/code/frontend/src/pages/PostCreation.tsx index 6fd32cb..3ddd48c 100644 --- a/code/frontend/src/pages/PostCreation.tsx +++ b/code/frontend/src/pages/PostCreation.tsx @@ -1,35 +1,30 @@ import "./postCreation.css"; import "./loginAndSignUpPage.css"; -import { useState, useEffect } from 'react'; +import { useState, useEffect, useRef } from 'react'; import { useNavigate } from "react-router-dom"; import Chip from '@mui/material/Chip'; import Autocomplete from '@mui/material/Autocomplete'; import TextField from '@mui/material/TextField'; import Avatar from '@mui/material/Avatar'; -import Close from '@mui/icons-material/Close'; import ButtonPrimary from "../components/ButtonRotkehlchen"; -import "../styles/sizes.css"; -import "../styles/fonts.css"; - -import AspectRatio from '@mui/joy/AspectRatio'; - import api from "../api/axios"; import { useAuth } from "../api/Auth"; -import { - Box, - Card, - CardMedia, - CardActionArea, - IconButton, - Skeleton, - StyledEngineProvider, -} from '@mui/material'; +import {Box,Card,CardMedia,CardActionArea,IconButton} from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; +import UserAvatar from "../components/UserAvatar"; + +const theme = createTheme({ + palette: { + primary: { + main:'#e79a0e;' + } + } +}); function PostCreation(){ const {user} = useAuth(); - interface ImageItem { src: string; title: string; @@ -43,6 +38,7 @@ function PostCreation(){ const navigate = useNavigate(); const [fileList,setFileList] = useState(null); + const inputFile = useRef(null); useEffect(() => { let cancelled = false; @@ -85,6 +81,11 @@ function PostCreation(){ } setFileList(files); }; + const onEmptyImgClick = () =>{ + if(inputFile.current){ + inputFile.current?.click(); + } + } const handleDelete = (idx: number) =>{ setData((prev) => prev.filter((_, i) => i !== idx)); if((idx-1)<0){ @@ -123,23 +124,24 @@ function PostCreation(){ const files = fileList ? [...fileList] : []; return( - +

Create Post

-
- OP - {user?.username} +
+ + {selectedImage? + Add an Image: + }
-
- {selectedImage? - Add an Image: - } +
+

Description

-
-
+
@@ -234,7 +237,7 @@ function PostCreation(){ freeSolo value={tags} onChange={handleTags} - sx={{ width: "90vw" }} + sx={{ width: "100%" }} renderValue={(value: readonly string[], getItemProps) => value.map((tags: string, index: number) => { const { key, ...itemProps } = getItemProps({ index }); @@ -252,17 +255,14 @@ function PostCreation(){ placeholder="Add Tags" /> )} - /> -
-
- + /> +
-
-
+
- + ); } export default PostCreation; \ No newline at end of file diff --git a/code/frontend/src/pages/postCreation.css b/code/frontend/src/pages/postCreation.css index 5540a9a..27488a5 100644 --- a/code/frontend/src/pages/postCreation.css +++ b/code/frontend/src/pages/postCreation.css @@ -9,10 +9,11 @@ align-items: center; justify-content: center; } + .create-part{ display: flex; - height: 100vh; - width: 100%; + width: 100vw; + height: calc(100vh - var(--Header-height)); padding: 29px 40px; flex-direction: column; align-items: center; @@ -21,41 +22,49 @@ border-left: 4px solid var(--Rotkehlchen-gray-hover); background: #FFF; } -.create-layout{ + +.create-layout{ display: grid; - grid-template-columns: auto auto auto; + grid-template-columns: 1fr; + grid-auto-rows: auto; + width: 90vw; + gap: 0.5rem; } .create-account{ display: flex; flex-direction: row; align-items: center; + width: 100%; } -.create-post1{ +.create-post-desc{ + width: 100%; display: flex; flex-direction: column; - gap: 9px; - width: 90vw; } .create-post-description{ width: 100%; accent-color: var(--Rotkehlchen-yellow-default); -} -.create-post2{ - display: flex; - flex-direction: column; - width: 100%; - gap: 10px; - align-items: flex-start; -} -.create-tags{ - width: 90vw; + resize: none; + height: 100%; } .create-post-image{ height: 40vh; - width: 90vw; + width: 100%; object-fit: cover; overflow: hidden; - +} +.create-post-img-layer{ + display: flex; + align-items: center; + align-self: center; + justify-content: center; + height: 40vh; + width: 100%; + background-position: center; + background-size: cover; + overflow: hidden; + background-image: url("../../public/assets/images/BirdLogin.jpg"); + filter: grayscale(); } input#create-file-upload[type="file"] { display: none; @@ -64,14 +73,8 @@ input#create-file-upload[type="file"] { border: 1px solid #ccc; padding: 6px 12px; cursor: pointer; - width: 90vw; - height: 100px; -} -.create-post3{ - display: flex; - flex-direction: row-reverse; width: 100%; - align-items: flex-end; + height: 100px; } @media only screen and (min-width: 768px) { @@ -79,28 +82,27 @@ input#create-file-upload[type="file"] { padding-top: calc(var(--Header-height) + 1rem); padding-bottom: 1rem; } - .create-part{ + .create-part{ + display: flex; width: 90vw; height: calc(100vh - var(--Header-height)); - } - .create-post1{ - width:70vw; - flex-direction: row; - - } - .create-post2{ - display: flex; - flex-direction: row; - width: 70vw; - gap: 10px; + padding: 29px 40px; + flex-direction: column; align-items: center; + gap: 10px; + border-right: 4px solid var(--Rotkehlchen-gray-hover); + border-left: 4px solid var(--Rotkehlchen-gray-hover); + background: #FFF; } .create-post-image { - width: 100%; + width: 100%s; max-width: 600px; display: block; margin: 0 auto; } + .create-post-img-layer{ + max-width: 600px; + } .create-file-upload { border: 1px solid #ccc; padding: 6px 12px; @@ -111,4 +113,14 @@ input#create-file-upload[type="file"] { .create-tags{ width: 100%; } + .create-layout{ + display: grid; + grid-template-columns: 50% auto; + grid-auto-rows: auto; + margin: 0 ; + width: 88vw; + } + .create-post-desc{ + height: 40vh; + } } \ No newline at end of file