diff --git a/src/components/IncompleteEvent/IncompleteEvent.module.css b/src/components/IncompleteEvent/IncompleteEvent.module.css index b000887..85849fc 100644 --- a/src/components/IncompleteEvent/IncompleteEvent.module.css +++ b/src/components/IncompleteEvent/IncompleteEvent.module.css @@ -80,7 +80,6 @@ } } -/* Adaptation pour mobile */ @media screen and (max-width: 760px) { .eventCard { min-width: 100%; diff --git a/src/components/PendingMembers/PendingMembers.module.css b/src/components/PendingMembers/PendingMembers.module.css index c87d933..33639c4 100644 --- a/src/components/PendingMembers/PendingMembers.module.css +++ b/src/components/PendingMembers/PendingMembers.module.css @@ -17,25 +17,6 @@ scroll-behavior: smooth; } - -/*.membersContainer::-webkit-scrollbar { - width: 8px; -} - -.membersContainer::-webkit-scrollbar-track { - background: rgba(0, 0, 0, 0.1); - border-radius: 10px; -} - -.membersContainer::-webkit-scrollbar-thumb { - background: rgba(255, 0, 0, 0.5); - border-radius: 10px; -} - -.membersContainer::-webkit-scrollbar-thumb:hover { - background: rgba(125, 249, 30, 0.7); -}*/ - .memberCard { display: flex; justify-content: space-between; @@ -54,6 +35,10 @@ .memberCard p { font-weight: bold; font-size: 20px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 250px; } .buttonGroup { @@ -71,11 +56,20 @@ .membersContainer { max-height: 200px; } - .rightBlock > h2{ - font-size:18px; - } + .rightBlock > h2{ + font-size: 18px; + } .memberCard p{ font-size: 15px; + max-width: 150px; + } +} +@media screen and (min-width: 761px) { + .memberCard p{ + white-space: normal; + overflow: visible; + text-overflow: clip; + max-width: none; } } diff --git a/src/components/SettingsModal/SettingsModal.module.css b/src/components/SettingsModal/SettingsModal.module.css index 80b9d81..d6b0b12 100644 --- a/src/components/SettingsModal/SettingsModal.module.css +++ b/src/components/SettingsModal/SettingsModal.module.css @@ -1,23 +1,73 @@ .content { width: 100%; - padding: 20px; + padding: 16px; display: flex; flex-direction: column; + gap: 20px; } .modifyIcon { - height: 30px; - width: 30px; + height: 28px; + width: 28px; } .section { display: flex; flex-direction: column; - gap: 10px; - margin-top: 15px; - margin-bottom: 15px; + gap: 12px; + margin-top: 10px; +} + +.section h3 { + font-size: 1.1rem; + margin-bottom: 5px; +} + +.section h4 { + font-size: 0.95rem; + font-weight: 500; } .submitBtn { - align-self: center; -} \ No newline at end of file + width: 100%; + margin-top: 15px; +} + +.section button { + width: 100%; +} + +@media (min-width: 600px) { + .content { + padding: 24px; + } + + .section h3 { + font-size: 1.2rem; + } + + .submitBtn { + width: auto; + align-self: center; + min-width: 200px; + } + + .section button { + width: fit-content; + } +} +@media (min-width: 900px) { + .content { + padding: 30px; + gap: 30px; + } + + .section { + gap: 14px; + } + + .modifyIcon { + height: 30px; + width: 30px; + } +} diff --git a/src/components/chart/ParticipationChart.module.css b/src/components/chart/ParticipationChart.module.css index b35dcab..f9a223c 100644 --- a/src/components/chart/ParticipationChart.module.css +++ b/src/components/chart/ParticipationChart.module.css @@ -149,7 +149,6 @@ width: 100%; height: auto; min-height: auto; - margin-bottom: 20px; } .chartContainer { @@ -167,7 +166,6 @@ font-size: 48px; } } -/* scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; diff --git a/src/pages/Admin/AdminPage.module.css b/src/pages/Admin/AdminPage.module.css index ced6cdf..59664b1 100644 --- a/src/pages/Admin/AdminPage.module.css +++ b/src/pages/Admin/AdminPage.module.css @@ -4,9 +4,8 @@ width: 100%; padding: 20px; box-sizing: border-box; - gap: 20px; + gap: 20px; } - .rightSection { width: 60%; display: flex; @@ -19,11 +18,13 @@ flex-direction: column; width: 100%; padding: 0; + margin-top:25px; } .rightSection { width: 100%; margin: 0; - margin-bottom: 15px; + margin-top:0; + margin-bottom:25px; } } diff --git a/src/pages/Events/EventsPage.module.css b/src/pages/Events/EventsPage.module.css index 7666a73..44b469f 100644 --- a/src/pages/Events/EventsPage.module.css +++ b/src/pages/Events/EventsPage.module.css @@ -1,11 +1,89 @@ .eventsContainer { width: 100%; position: relative; + padding: 10px; + box-sizing: border-box; } - -.eventsList{ +.eventsList { display: flex; - align-items: center; flex-direction: column; -} \ No newline at end of file + align-items: center; + gap: 10px; +} + +.eventCard { + width: 100%; + max-width: 360px; + padding: 12px 10px; + border-radius: 12px; + box-sizing: border-box; + display: flex; + flex-direction: column; + background-color: #ffffffcc; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); +} +.eventCard h3 { + margin: 0 0 5px 0; + font-size: 1rem; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.eventCard p { + margin: 0; + font-size: 0.9rem; + color: #333; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.eventImage { + width: 100%; + height: 120px; + object-fit: cover; + border-radius: 8px; + margin-bottom: 8px; +} + +@media screen and (min-width: 768px) { + .eventCard { + max-width: 600px; + padding: 16px 12px; + } + .eventCard h3 { + font-size: 1.2rem; + white-space: normal; + overflow: visible; + text-overflow: clip; + } + .eventCard p { + font-size: 1rem; + white-space: normal; + overflow: visible; + text-overflow: clip; + } +} +@media screen and (min-width: 1024px) { + .eventsContainer { + padding: 20px; + } + .eventsList { + gap: 20px; + } + .eventCard { + max-width: 700px; + padding: 20px; + } + .eventCard h3 { + font-size: 1.4rem; + } + .eventCard p { + font-size: 1.1rem; + } + .eventImage { + height: 180px; + } +} diff --git a/src/pages/Login/LoginPage.module.css b/src/pages/Login/LoginPage.module.css index 69e4f8c..5f86c1d 100644 --- a/src/pages/Login/LoginPage.module.css +++ b/src/pages/Login/LoginPage.module.css @@ -1,23 +1,64 @@ -.container { +/*.container { position: absolute; - z-index: 2; + z-index: 9999; + touch-action: manipulation; + width: 90%; + max-width: 380px; + padding: 20px; display: flex; flex-direction: column; - width: 600px; - max-height: 80%; - justify-content: center; align-items: center; - padding: 20px; - border-radius: 12px; + justify-content: center; + border-radius: 14px; left: 50%; top: 50%; transform: translate(-50%, -50%); +}*/ +.container { + position: relative; /* au lieu d'absolute */ + z-index: 9999; + touch-action: manipulation; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 90%; + max-width: 420px; /* RegisterPage : 420px / LoginPage : 380px */ + padding: 20px; + border-radius: 14px; + + margin: auto; /* centre dans le parent flex */ } .title { - font-size: 36px; + font-size: 1.8rem; color: white; text-align: center; margin-bottom: 20px; - text-shadow: 0 2px 8px rgba(0,0,0,0.3); + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } + +@media (min-width: 600px) { + .container { + max-width: 460px; + padding: 24px; + } + + .title { + font-size: 2.2rem; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 600px; + padding: 32px; + } + + .title { + font-size: 2.6rem; + } +} + diff --git a/src/pages/Profile/ProfilePage.module.css b/src/pages/Profile/ProfilePage.module.css index 2ebba4b..7f560cf 100644 --- a/src/pages/Profile/ProfilePage.module.css +++ b/src/pages/Profile/ProfilePage.module.css @@ -1,161 +1,154 @@ .container { - width: 100%; - padding: 10px; - box-sizing: border-box; + width: 100%; + padding: 12px; + box-sizing: border-box; } - .profileboard { - width: 100%; - padding: 15px; - border-radius: 20px; - box-sizing: border-box; + width: 100%; + padding: 16px; + border-radius: 20px; + box-sizing: border-box; } .contentWrapper { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; } .profilePictureContainer { - width: 120px; - height: 120px; - margin-bottom: 15px; + width: 120px; + height: 120px; + margin-bottom: 16px; } .profilePicture { - width: 100%; - height: 100%; - border-radius: 50%; - object-fit: cover; + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; } .description { - width: 100%; - text-align: left; - margin-left:4%; + width: 100%; + text-align: left; +} + +.headerProfile { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} + +.description h2 { + font-size: 1.6rem; + margin-bottom: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.description button { + width: 44px; + height: 44px; + min-width: 44px; + min-height: 44px; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + background: transparent; + border: none; + cursor: pointer; +} + +.modifyIcon { + width: 22px; + height: 22px; + display: block; + margin: 0; } .topDescription { display: flex; flex-direction: column; - align-items: center; - gap: 10px; - margin-bottom: 15px; -} - -.infoBlock { - width: 100%; - padding: 10px; -} - -.eventTasks { - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease-out, opacity 0.2s ease; - opacity: 0; - padding-left: 20px; -} - -.eventTasks.expanded { - max-height: 500px; - opacity: 1; - margin-top: 10px; -} -.description h2{ - font-size:30px; - -} -.profilePicture{ - width:90%; -} - -.settingsBtns { - display: flex; - gap: 5px; - justify-content: right; -} - -@media screen and (min-width: 768px) { - .contentWrapper { - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - } - - .profilePictureContainer { - width: 150px; - height: 150px; - margin-right: 20px; - margin-bottom: 0; - } - - .description { - width: calc(100% - 170px); - margin-left:4%; - } - - .topDescription { - flex-direction: row; - justify-content: space-between; - } - - .infoBlock { - width: 48%; - } - - .event { - padding: 15px; - } - .description h2{ - font-size:30px; -} -.profilePicture{ - width:90%; - } -} -.description button{ - width:50px; - height:50px; - -} - -.headerProfile { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; + gap: 12px; margin-bottom: 20px; } -@media screen and (min-width: 1024px) { - .container { - max-width: 100%; - margin: 0 auto; - padding: 20px; - } - - .profileboard { - padding: 25px; - } - - .profilePictureContainer { - width: 30%; - height:auto; - } - .profilePicture{ - width:90%; - } - .description { - width: calc(100% - 200px); - margin-left:4%; - } - - .event { - padding: 18px; - } - .description h2{ - font-size:30px; +.infoBlock { + width: 100%; + padding: 12px; } + +.eventTasks { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease, opacity 0.2s ease; + opacity: 0; + padding-left: 16px; +} + +.eventTasks.expanded { + max-height: 500px; + opacity: 1; + margin-top: 10px; +} + +@media (min-width: 768px) { + .contentWrapper { + flex-direction: row; + align-items: flex-start; + } + + .profilePictureContainer { + width: 150px; + height: 150px; + margin-right: 24px; + margin-bottom: 0; + } + + .description { + width: calc(100% - 180px); + } + + .topDescription { + flex-direction: row; + justify-content: space-between; + } + + .infoBlock { + width: 48%; + } + + .description h2 { + font-size: 1.8rem; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1200px; + margin: 0 auto; + padding: 24px; + } + + .profileboard { + padding: 28px; + } + + .profilePictureContainer { + width: 180px; + height: 180px; + } + + .description { + width: calc(100% - 220px); + } + + .description h2 { + font-size: 2rem; + } } diff --git a/src/pages/Register/RegisterPage.module.css b/src/pages/Register/RegisterPage.module.css index 1f560be..f8a7e76 100644 --- a/src/pages/Register/RegisterPage.module.css +++ b/src/pages/Register/RegisterPage.module.css @@ -1,44 +1,88 @@ .container { position: relative; - z-index: 2; + z-index: 9999; + touch-action: manipulation; display: flex; flex-direction: column; - width: 30%; - justify-content: center; align-items: center; + justify-content: center; + width: 90%; + max-width: 420px; padding: 20px; - border-radius:12px; + border-radius: 14px; + margin: auto; } + .title { - font-size: 36px; + font-size: 1.8rem; color: white; text-align: center; margin-bottom: 20px; - text-shadow: 0 2px 8px rgba(0,0,0,0.3); + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } - :global(.glassCard) { --glass-bg: #ffffff9f; } -.logButton{ - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - margin-top: 12px; -} -.formGroup{ - margin-top:23px; + +.inputContainer { + width: 100%; + padding: 16px; } + +.formGroup { + margin-top: 18px; +} + +.logButton { + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + margin-top: 20px; +} + +.logButton button { + width: 100%; +} + +@media (min-width: 600px) { + .container { + max-width: 480px; + padding: 24px; + } + + .title { + font-size: 2.2rem; + } + + .inputContainer { + padding: 20px; + } +} +@media (min-width: 1024px) { + .container { + max-width: 600px; + padding: 32px; + } + + .title { + font-size: 2.6rem; + } + + .logButton { + flex-direction: row; + justify-content: space-between; + } + + .logButton button { + width: auto; + min-width: 180px; + } +} h1 { overflow: visible; text-align: center; } - -.inputContainer { - padding: 15px; - width: 100%; -} \ No newline at end of file diff --git a/src/pages/Volunteers/VolunteerCard.jsx b/src/pages/Volunteers/VolunteerCard.jsx index fb58440..0e55cd7 100644 --- a/src/pages/Volunteers/VolunteerCard.jsx +++ b/src/pages/Volunteers/VolunteerCard.jsx @@ -18,7 +18,11 @@ export default function VolunteerCard({ user }) {