From 26dcc0fcd3aaf394ad6d7f09ae28a957af453d10 Mon Sep 17 00:00:00 2001 From: p2405951 Date: Tue, 10 Feb 2026 14:58:25 +0100 Subject: [PATCH] add responsive profile --- src/config/appConfig.js | 4 + src/pages/Profile/ProfilePage.module.css | 249 ++++++++++++----------- src/pages/Profile/ProfilePage.tsx | 4 +- 3 files changed, 139 insertions(+), 118 deletions(-) create mode 100644 src/config/appConfig.js diff --git a/src/config/appConfig.js b/src/config/appConfig.js new file mode 100644 index 0000000..12764ab --- /dev/null +++ b/src/config/appConfig.js @@ -0,0 +1,4 @@ +export const APP_CONFIG = { + contactEmail: "contact@example.com", + contactPhone: "+33 01 02 03 04 05" +} \ No newline at end of file diff --git a/src/pages/Profile/ProfilePage.module.css b/src/pages/Profile/ProfilePage.module.css index 3c5b26b..e354d42 100644 --- a/src/pages/Profile/ProfilePage.module.css +++ b/src/pages/Profile/ProfilePage.module.css @@ -1,158 +1,175 @@ +/* Conteneur principal */ .container { - width: 100%; - padding: 12px; - box-sizing: border-box; + width: 100%; + padding: 12px; + box-sizing: border-box; + margin: 0 auto; } + .profileboard { - width: 100%; - padding: 16px; - border-radius: 20px; - box-sizing: border-box; -} -.settingImage{ - width:100%; - display: flex; - justify-content: center; + 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%; + gap: 20px; } .profilePictureContainer { - width: 120px; - height: 120px; - margin-bottom: 16px; + width: 120px; + height: 120px; + margin-bottom: 0; + position: relative; + display: flex; + justify-content: center; } .profilePicture { - width: 100%; - height: 100%; - border-radius: 50%; - object-fit: cover; + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; +} + +.editPictureButton { + margin-top: 16px; + padding-top: 12px; + padding-bottom: 12px; + background: rgba(255, 255, 255, 0.95); + border: none; + border-radius: 24px; + cursor: pointer; + font-size: 0.95rem; + font-weight: 600; + color: #e74c3c; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); + transition: all 0.3s ease; + backdrop-filter: blur(5px); + white-space: nowrap; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + width: auto; + min-width: 140px; +} + +.editPictureButton:hover { + background: rgba(255, 255, 255, 1); + transform: translateY(-2px); + box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2); + color: #c0392b; } .description { - width: 100%; - text-align: left; + width: 100%; + text-align: left; } - .headerProfile { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; + 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; +.headerProfile h2 { + font-size: 1.6rem; + margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } +/* Conteneur des informations principales */ .topDescription { - display: flex; - flex-direction: column; - gap: 12px; - margin-bottom: 20px; + display: flex; + flex-direction: column; + gap: 16px; + width: 100%; + margin-bottom: 20px; } +/* Bloc d'informations */ .infoBlock { - width: 100%; - padding: 12px; + width: 100%; + padding: 12px; + box-sizing: border-box; } -.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; +/* Conteneur pour les paramètres */ +.settingImage { + width: 100%; + display: flex; + justify-content: center; + margin-top: 16px; } +/* Adaptation pour tablette et PC */ @media (min-width: 768px) { - .contentWrapper { - flex-direction: row; - align-items: flex-start; - } + .contentWrapper { + flex-direction: row; + align-items: flex-start; + gap: 24px; + } - .profilePictureContainer { - width: 150px; - height: 150px; - margin-right: 24px; - margin-bottom: 0; - } + .profilePictureContainer { + width: 150px; + height: 150px; + margin-right: 0; + } - .description { - width: calc(100% - 180px); - } + .description { + width: calc(100% - 180px); + } - .topDescription { - flex-direction: row; - justify-content: space-between; - } + .topDescription { + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + } - .infoBlock { - width: 48%; - } + .infoBlock { + flex: 1; + min-width: calc(50% - 8px); + max-width: calc(50% - 8px); + } - .description h2 { - font-size: 1.8rem; - } + .editPictureButton { + margin: 16px auto 0 auto; + display: block; + } + + .headerProfile h2 { + font-size: 1.8rem; + } } +/* Adaptation pour grand écran */ @media (min-width: 1024px) { - .container { - max-width: 1200px; - margin: 0 auto; - padding: 24px; - } + .container { + max-width: 1200px; + padding: 24px; + } - .profileboard { - padding: 28px; - } + .profileboard { + padding: 28px; + } - .profilePictureContainer { - width: 180px; - height: 180px; - } + .profilePictureContainer { + width: 180px; + height: 180px; + } - .description { - width: calc(100% - 220px); - } + .description { + width: calc(100% - 220px); + } - .description h2 { - font-size: 2rem; - } + .headerProfile h2 { + font-size: 2rem; + } } diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx index 0733f40..bbcbb71 100644 --- a/src/pages/Profile/ProfilePage.tsx +++ b/src/pages/Profile/ProfilePage.tsx @@ -67,7 +67,8 @@ function ProfilePage() { alt="Photo de profil" className={styles.profilePicture} /> -