Site

- add pen edit on pfp and banner when it s personnal page

docker-compose/requirements/djangoserver/file/server/server/templates/profilPage.html

@@ -8,6 +8,11 @@
                 <h2>Username <span class="online-status"></span></h2>
                 <p>150 Elo</p>
             </div>
+            <div class="rightButtonDiv">
+                <img src="/static/img/profilPage/github.png">
+                <img src="/static/img/profilPage/discord.webp">
+                <img src="/static/img/profilPage/addConv.png">
+            </div>
         </div>
 
         <!-- Dashboard and History Section -->

docker-compose/requirements/nginx/static/javascript/profilPage/main.js

@@ -6,12 +6,13 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/19 23:08:31 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/20 01:09:20 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/20 11:15:34 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
-import { createNotification as CN } from "/static/javascript/notification/main.js";
 import { waitForUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js";
+import { userMeInfo } from "/static/javascript/typeResponse/typeLogin.js";
+import { createNotification as CN } from "/static/javascript/notification/main.js";
 import { sendRequest } from "/static/javascript/websocket.js";
 
 
@@ -27,8 +28,17 @@ class ProfilPage
 		sendRequest("get_user_info", {id: userId});
 		waitForUserInfo().then((userInfo) => {
 			username.innerText = userInfo.username + ' (status not implemented)';
-			pfp.innerHTML = `<img src='${userInfo.pfp}'>`
-			banner.innerHTML = `<img src='${userInfo.banner}'>`
+			pfp.style.backgroundImage = `url("${userInfo.pfp}")`
+			pfp.style.backgroundSize = "cover";
+			pfp.style.backgroundRepeat = "no-repeat";
+			banner.style.backgroundImage = `url("${userInfo.banner}")`
+			banner.style.backgroundSize = "cover";
+			banner.style.backgroundRepeat = "no-repeat";
+			if (userId == userMeInfo.id)
+			{
+				pfp.innerHTML = `<div id='editPenPfpBg'><img class='editPenPfp' src='/static/img/profilPage/editPen.png'/></div>`
+				banner.innerHTML = `<img class='editPen' src='/static/img/profilPage/editPen.png'/>`
+			}	
 		});
 	}
 

docker-compose/requirements/nginx/static/style/profilPage/profil.css

@@ -28,6 +28,7 @@
     height: 250px;
     background-color: #D3D3D3;
     margin-bottom: 20px;
+    position: relative;
 }
 
 #profil .background-card img {
@@ -100,3 +101,59 @@
     padding: 20px;
     text-align: center;
 }
+
+#profil .container .rightButtonDiv {
+    margin-left: auto;
+    margin-right: 50px;
+}
+
+#profil .container .rightButtonDiv img {
+    width: 40px;
+    height: 40px;
+    object-fit: cover;
+    object-position: 50% 50%;
+    margin-left: 5px;
+    cursor: pointer;
+}
+
+#profil .container .editPen {
+    position: absolute;
+    z-index: 10;
+    top: 10px;
+    right: 10px;
+    width: 40px;
+    height: 40px;
+    margin: 10px;
+    padding: 10px;
+    opacity: 0.5;
+    background-color: black;
+    border-radius: 10px;
+}
+
+#profil .container .editPen:hover {
+    opacity: 1;
+}
+
+#profil .container #editPenPfpBg
+{
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #00000067;
+    opacity: 0;
+}
+
+#profil .container .editPenPfp {
+    width: 50%;
+    height: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 0;
+}
+
+#profil .container #editPenPfpBg:hover {
+    opacity: 1;
+    cursor: pointer;
+}