Lobby page

- fix search bar for mobile

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

@@ -14,11 +14,6 @@
 		<p>Logout</p>
 	</div>
 </div>
-<div class="search-container-mobile">
-	<input type="text" placeholder="Search..." class="search-input" id="searchInputUser" autocomplete="off">
-</div>
-<div id="searchResult">
-</div>
 <div id="chatButton">
 	<span class="notification-badge"></span>
 	<img src="/static/img/homePage/bulle.png">

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

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 17:08:46 by madegryc          #+#    #+#             */
-/*   Updated: 2024/11/14 16:48:15 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/11/18 15:05:34 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 

docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css

@@ -402,19 +402,12 @@ body {
 	width: 30%;
 }
 
-.search-container-mobile {
-	display: none;
-	align-items: flex-start;
-	width: 30%;
-}
-
 .search-input {
 	width: 100%;
 	padding: 10px;
 	border: 2px solid #ccc;
 	font-size: 16px;
 	outline: none;
-	min-width: 200px;
 }
 
 #nbBot {
@@ -620,16 +613,22 @@ input:checked + .slider:before {
 		flex-direction: column;
 		display: unset;
 		padding-inline: inherit;
+		margin-top: 45px;
 	}
 	.search-container {
-		display: none;
-	}
-	.search-container-mobile {
-		width: 100%;
 		position: absolute;
-		display: flex;
+		left: 50%;
+		transform: translateX(-50%);
+		top: 100px;
+		width: 100%;
 	}
-	  
+	.search-container input {
+		min-width: 200px;
+	}
+	.search-input {
+		margin-inline: 50px;
+	}
+
 	.search-input input {
 		left: 50%;
 		transform: translate(-50%);