From 667d5141dc37e38e0472b044630fb1af0601a489 Mon Sep 17 00:00:00 2001
From: Mathis Degryck <madegryc@3D3.42angouleme.fr>
Date: Sat, 5 Oct 2024 23:49:39 +0200
Subject: [PATCH] Site     - Add responsive :      - Lobby page      - Fix bug
 profil/login/settings'

---
 .../server/server/templates/lobbyPage.html    |  6 +-
 .../server/server/templates/settingsPage.html |  2 +-
 .../nginx/static/javascript/homePage/main.js  |  4 +-
 .../nginx/static/javascript/lobbyPage/main.js |  4 +-
 .../nginx/static/javascript/login/main.js     | 15 +++-
 .../nginx/static/style/homePage/home.css      | 10 ++-
 .../nginx/static/style/homePage/liveChat.css  | 14 ++-
 .../static/style/lobbyPage/lobbyPage.css      | 90 ++++++++++++++++++-
 .../nginx/static/style/profilPage/profil.css  | 14 +--
 .../nginx/static/style/settings/settings.css  | 53 ++++++++++-
 10 files changed, 190 insertions(+), 22 deletions(-)

diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
index b4bc000..5b806f0 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
@@ -80,7 +80,7 @@
 		<div class="menuSelected" id="multiLocalSelected">
 			<div id="whatGame">
 				<p>The key to success is timing and precision, as you need to position your paddle correctly to deflect the ball at the right angle.</p>
-				<span class="line"></span>
+				<span class="line" id="tournament-line1"></span>
 				<div class="keys">
 					<div class="key">
 						<p>W</p>
@@ -172,7 +172,7 @@
 		<div class="menuSelected" id="tournamentSelected">
 			<div id="whatGame">
 				<p>Compete in the ultimate Pong Tournament with up to 8 players, only the best will claim victory!</p>
-				<span class="line"></span>
+				<span class="line" id="tournament-line1"></span>
 				<div class="keys">
 					<div class="key">
 						<p>W</p>
@@ -194,8 +194,8 @@
 				<span class="line"></span>
 				<p style="text-align: center; margin-bottom: 20px;">Tournament code</p>
 				<input id="tournamentCode" class="search-input" type="text" placeholder="Enter the tournament code (empty for create one)">
+				<span class="line" id="tournament-line2"></span>
 			</div>
-	
 			<div class="skin-select">
 				<div class="barSelection" id="bar2">
 	
diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/settingsPage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/settingsPage.html
index 099d4ac..12048c1 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/settingsPage.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/settingsPage.html
@@ -1,4 +1,4 @@
-<div id="topBar">
+<div id="topBarSettings">
 	<h1 id="homeButton">METH</h1>
 	<div id="loginButton">
 		<p>LOGIN</p>
diff --git a/docker-compose/requirements/nginx/static/javascript/homePage/main.js b/docker-compose/requirements/nginx/static/javascript/homePage/main.js
index 1740b16..9fc53ff 100644
--- a/docker-compose/requirements/nginx/static/javascript/homePage/main.js
+++ b/docker-compose/requirements/nginx/static/javascript/homePage/main.js
@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   main.js                                            :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/25 00:02:19 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/03 02:31:12 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/05 22:24:29 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
diff --git a/docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js b/docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
index 44a7774..649056f 100644
--- a/docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
+++ b/docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   main.js                                            :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 17:08:46 by madegryc          #+#    #+#             */
-/*   Updated: 2024/10/04 00:07:11 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/05 22:12:30 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
diff --git a/docker-compose/requirements/nginx/static/javascript/login/main.js b/docker-compose/requirements/nginx/static/javascript/login/main.js
index 711e7fc..dfdc78a 100644
--- a/docker-compose/requirements/nginx/static/javascript/login/main.js
+++ b/docker-compose/requirements/nginx/static/javascript/login/main.js
@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   main.js                                            :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 17:40:15 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/29 23:30:25 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/05 22:32:01 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -29,6 +29,7 @@ class Login
 		let		usernameNode		= null;
 		let		nodeText			= null;
 
+		document.body.style.overflow = 'auto';
 		registerButton.addEventListener('click', changeWindowLogin);
 		loginBackButton.addEventListener('click', changeWindowLoginBack);
 		button42.addEventListener('click', redirection);
@@ -114,6 +115,7 @@ function hideMenu()
 	const	popMenuLoginButton 	= document.getElementById('popMenuLoginButton');
 	
 	popMenuLoginButton.style.display = 'none';
+	document.body.style.overflow = 'auto';
 	document.removeEventListener('click', hideMenu);
 	loginButton.addEventListener('click', showMenu);
 }
@@ -183,9 +185,15 @@ function	showLoginDiv()
 	const popout = document.getElementById('loginPopup');
 
 	if (popout.style.display === 'flex')
+	{		
+		document.body.style.overflow = 'auto';
 		popout.style.display = 'none';
+	}
 	else
+	{
+		document.body.style.overflow = 'hidden';
 		popout.style.display = 'flex';
+	}
 }
 
 function	connect(e)
@@ -203,7 +211,10 @@ function	connect(e)
 function closeClickOutsiteGameMode(event)
 {
 	if (event.target == document.getElementById('loginPopup'))
+	{
 		document.getElementById('loginPopup').style.display = 'none';
+		document.body.style.overflow = 'auto';	
+	}
 }
 
 export { Login, changeWindowLoginBack };
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/style/homePage/home.css b/docker-compose/requirements/nginx/static/style/homePage/home.css
index 98cb709..acb3dd5 100644
--- a/docker-compose/requirements/nginx/static/style/homePage/home.css
+++ b/docker-compose/requirements/nginx/static/style/homePage/home.css
@@ -6,7 +6,7 @@
 /*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 12:00:55 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/04 19:40:55 by madegryc         ###   ########.fr       */
+/*   Updated: 2024/10/05 22:09:37 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -146,6 +146,8 @@
     width: 70%;
     height: 80%;
     background-color: #020202;
+	overflow: hidden;
+	overflow-y: hidden;
 }
 
 .left-side {
@@ -526,6 +528,8 @@ footer {
 	.team {
 		padding-inline: 30px;
 		padding-block: 50px;
+		flex-wrap: nowrap;
+		overflow-x: auto;
 	}
 
 	.team-member {
@@ -533,4 +537,8 @@ footer {
 		width: 100%;
 		height: auto;
 	}
+
+	form input {
+		width: calc(100% - 40px);
+	}
 }
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/style/homePage/liveChat.css b/docker-compose/requirements/nginx/static/style/homePage/liveChat.css
index bd80f36..43a70f1 100644
--- a/docker-compose/requirements/nginx/static/style/homePage/liveChat.css
+++ b/docker-compose/requirements/nginx/static/style/homePage/liveChat.css
@@ -6,7 +6,7 @@
 /*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:53:39 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/04 18:03:56 by madegryc         ###   ########.fr       */
+/*   Updated: 2024/10/04 20:43:32 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -274,4 +274,16 @@
 	#chatButton {
 		left: 40px;
 	}
+	
+	#chatDiv {
+		width: 80%;
+	}
+
+	#inputMessageDiv {
+		width: 87%;
+	}
+
+	#inputMessage {
+		width: 100%;
+	}
 }
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
index 254001b..bbf67bd 100644
--- a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
+++ b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
@@ -67,7 +67,7 @@ body {
 	padding-inline: 150px;
 	display: flex;
 	flex-direction: row;
-	gap: 12rem;
+	gap: 9vw;
 }
 
 .skin-select{
@@ -263,6 +263,18 @@ body {
 	gap: 20px;
 }
 
+#tournament-line2{
+	display: none;
+    width: 100%;
+    height: 2px;
+	justify-content: center;
+	align-items: center;
+    background-color: rgb(255, 255, 255);
+    margin: 20px 0;
+	justify-content: center;
+	align-items: center;
+}
+
 .select-keys {
 	display: flex;
 	flex-direction: row;
@@ -342,6 +354,7 @@ body {
 	justify-content: flex-start;
 	width: 300px;
 	height: 550px;
+	align-items: center;
 }
 
 .mode-card {
@@ -349,7 +362,7 @@ body {
 	height: 100px;
 	background-color: white;
 	color: #020202;
-	padding: 20px;
+	padding-block: 20px;
 	margin-block: 20px;
 	display: flex;
 	justify-content: center;
@@ -364,7 +377,7 @@ body {
 	background-color: transparent;
 	color: white;
 	border: 5px solid white;
-	padding: 20px;
+	padding-block: 20px;
 	margin-block: 20px;
 	display: flex;
 	justify-content: center;
@@ -501,7 +514,7 @@ body {
 .menuSelected {
 	display: flex;
 	flex-direction: row;
-	gap: 12rem;
+	gap: 9vw;
 }
 
 .menuSelected {
@@ -527,4 +540,73 @@ body {
 #tournamentCode {
 	width: 94%;
 	font-size: 0.8rem;
+}
+
+@media (max-aspect-ratio: 1/1){
+	.main {
+		flex-direction: column;
+		display: unset;
+		padding-inline: inherit;
+	}
+	.search-container {
+		display: none;
+	}
+	.menuSelected {
+		flex-direction: column;
+	}
+	#whatGame {
+		/* display: none; */
+		margin-inline: 20px;
+		margin-left: auto;
+		margin-right: auto;
+		width: 90vw;
+	}
+	.game-mode {
+		margin-left: auto;
+		margin-right: auto;
+	}
+	.skin-select {
+		display: flex;
+	}
+	.barSelection {
+		width: 150px;
+		height: 150px;
+		margin: 5px;
+	}
+	.goalSelection {
+		width: 150px;
+		height: 150px;
+		margin: 5px;
+	}
+	#chatDiv {
+		width: 80%;
+	}
+	.keys{
+		display: none;
+	}
+	.select-line {
+		display: none;
+	}
+	.menuSelected {
+		gap: 0;
+	}
+	#tournament-line1 {
+		display: none;
+	}
+	#tournament-line2 {
+		display: block;	
+		margin-top: 30px;
+	}
+	.popup-skin {
+		width: 70%;
+	}
+	.color-grid {
+		grid-template-columns: repeat(2, 90px);
+		justify-content: center;
+		align-items: center;
+	}
+	.color-box {
+		width: 90px;
+		height: 90px;
+	}
 }
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/style/profilPage/profil.css b/docker-compose/requirements/nginx/static/style/profilPage/profil.css
index 869b4b8..a31841c 100644
--- a/docker-compose/requirements/nginx/static/style/profilPage/profil.css
+++ b/docker-compose/requirements/nginx/static/style/profilPage/profil.css
@@ -302,20 +302,22 @@
 
     #profil .history-card {
         height: 150px;
+        align-items: center;
+        justify-content: center;
     }
 
     #profil .history-card #score-history {
-        font-size: 50px;
+        font-size: 30px;
     }
 
     #profil .profile-img-history {
-        width: 80px;
-        height: 80px;
+        width: 60px;
+        height: 60px;
     }
 
     #profil .profile-img-history img {
-        width: 75px;
-        height: 75px;
+        width: 55px;
+        height: 55px;
     }
 
     #profil .profile-img-history-enemy {
@@ -350,4 +352,6 @@
         height: 60px;
         position: relative;
     }
+
+
 }
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/style/settings/settings.css b/docker-compose/requirements/nginx/static/style/settings/settings.css
index 13f63bd..480cfba 100644
--- a/docker-compose/requirements/nginx/static/style/settings/settings.css
+++ b/docker-compose/requirements/nginx/static/style/settings/settings.css
@@ -10,6 +10,47 @@
     font-style: normal;
 }
 
+#topBarSettings {
+    margin-block: 25px;
+	padding: 0;
+	padding-inline: 50px;
+	display: flex;
+	gap: 2rem;
+	align-items: center;
+	position: relative;
+	inset-inline: 0;
+	top: 0;
+	z-index: 500;
+}
+
+#topBarSettings h1 {
+	padding: 0;
+	padding-top: 4px;
+	font-size: 35px;
+	color: white;
+	font-family: 'Poppins';
+	font-style: italic;
+    font-weight: bold;
+}
+
+#topBarSettings #loginButton {
+	font-size: 20px;
+	background-color: white;
+	height: 40px;
+	width: 130px;	
+	color: black;
+	text-align: center;
+	line-height: 40px;
+	margin-left: auto;
+	transition: background-color 0.3s ease;
+}
+
+#topBarSettings #loginButton:hover {
+	background-color: transparent;
+	color: white;
+	cursor: pointer;
+}
+
 .popup-background-delete {
 	display: none;
 	position: fixed;
@@ -154,11 +195,13 @@
 
 
 @media (max-width: 768px) {
+    #settingsBody {
+        align-items: normal;
+    }
     #settingsBody .container-settings {
         display: flex;
         flex-direction: column;
         width: 100%;
-        margin-top: 350px;
         margin-inline: 30px;
     }
 
@@ -166,4 +209,12 @@
     #settingsBody .right-section {
         margin-bottom: 20px;
     }
+
+    .delete-btn {
+        margin-bottom: 30px;
+    }
+
+    #topBar{
+        position: relative;
+    }
 }
\ No newline at end of file