tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lobby page

Browse Source 
- fix search bar for mobile
This commit is contained in:
Kum1ta
2024-11-18 15:19:28 +01:00
parent b38f18d765
commit c2bad9702f
3 changed files with 13 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,11 +14,6 @@
<p>Logout</p> <p>Logout</p>
</div> </div>
</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"> <div id="chatButton">
<span class="notification-badge"></span> <span class="notification-badge"></span>
<img src="/static/img/homePage/bulle.png"> <img src="/static/img/homePage/bulle.png">

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */ /* 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 */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */

25
docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
View File

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