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

Site

Browse Source 
- Add responsive :
     - Lobby page
     - Fix bug profil/login/settings'
This commit is contained in:
Mathis Degryck
2024-10-05 23:49:39 +02:00
parent 7f5cf36eb7
commit 667d5141dc
10 changed files with 190 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docker-compose/requirements/nginx/static/style/homePage/home.css
View File

@ -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);
}
}

14
docker-compose/requirements/nginx/static/style/homePage/liveChat.css
View File

@ -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%;
}
}

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

@ -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;
}
}

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

@ -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;
}
}

53
docker-compose/requirements/nginx/static/style/settings/settings.css
View File

@ -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;
}
}