diff options
| author | polo <ordipolo@gmx.fr> | 2025-11-13 23:42:33 +0100 |
|---|---|---|
| committer | polo <ordipolo@gmx.fr> | 2025-11-13 23:42:33 +0100 |
| commit | 7eeec8829e6698f16a20f49cc1c54e049fd34084 (patch) | |
| tree | 966a0c48f3780cd1ca71b146c071af17ae41e3d5 | |
| parent | 41b4052a17e01f83be34d1e0e0b2dc61cca02b38 (diff) | |
| download | cms-7eeec8829e6698f16a20f49cc1c54e049fd34084.tar.gz cms-7eeec8829e6698f16a20f49cc1c54e049fd34084.tar.bz2 cms-7eeec8829e6698f16a20f49cc1c54e049fd34084.zip | |
calendrier responsive avec une modale en position fixe
| -rw-r--r-- | public/css/body.css | 7 | ||||
| -rw-r--r-- | public/css/calendar.css | 23 |
2 files changed, 21 insertions, 9 deletions
diff --git a/public/css/body.css b/public/css/body.css index 8d5850d..4b11890 100644 --- a/public/css/body.css +++ b/public/css/body.css | |||
| @@ -237,11 +237,10 @@ article a:hover | |||
| 237 | display: block; | 237 | display: block; |
| 238 | } | 238 | } |
| 239 | } | 239 | } |
| 240 | @media screen and (max-width: 500px) | 240 | @media screen and (max-width: 480px) |
| 241 | { | 241 | { |
| 242 | main | 242 | main{ |
| 243 | { | 243 | padding: 10px 0; |
| 244 | padding: 10px; | ||
| 245 | } | 244 | } |
| 246 | .empty_column | 245 | .empty_column |
| 247 | { | 246 | { |
diff --git a/public/css/calendar.css b/public/css/calendar.css index d011f03..47efcbb 100644 --- a/public/css/calendar.css +++ b/public/css/calendar.css | |||
| @@ -15,7 +15,6 @@ | |||
| 15 | #calendar{ | 15 | #calendar{ |
| 16 | width: 1165px; /* on enlève le "gap" */ | 16 | width: 1165px; /* on enlève le "gap" */ |
| 17 | } | 17 | } |
| 18 | #event_modal{} | ||
| 19 | .event_title_box{ | 18 | .event_title_box{ |
| 20 | display: flex; | 19 | display: flex; |
| 21 | align-items: center; | 20 | align-items: center; |
| @@ -58,7 +57,7 @@ td .fc-timegrid-axis{ | |||
| 58 | border-radius: 5px; | 57 | border-radius: 5px; |
| 59 | } | 58 | } |
| 60 | 59 | ||
| 61 | @media screen and (max-width: 900px){ | 60 | @media screen and (max-width: 1024px){ |
| 62 | #calendar_zone{ | 61 | #calendar_zone{ |
| 63 | padding: 0; | 62 | padding: 0; |
| 64 | } | 63 | } |
| @@ -71,8 +70,23 @@ td .fc-timegrid-axis{ | |||
| 71 | .fc-header-toolbar{ | 70 | .fc-header-toolbar{ |
| 72 | font-size: smaller; | 71 | font-size: smaller; |
| 73 | } | 72 | } |
| 73 | #event_modal{ | ||
| 74 | position: fixed; | ||
| 75 | /* technique pour centrer un élément positionné */ | ||
| 76 | left: 50%; | ||
| 77 | top: 50%; | ||
| 78 | transform: translate(-50%, -50%); | ||
| 79 | z-index: 4; | ||
| 80 | } | ||
| 81 | #event_modal > div{ | ||
| 82 | background-color: #e3f3ff; | ||
| 83 | box-shadow: 1px 1px 3px black; | ||
| 84 | } | ||
| 85 | .event{ | ||
| 86 | width: 250px; | ||
| 87 | } | ||
| 74 | } | 88 | } |
| 75 | @media screen and (max-width: 650px){ | 89 | @media screen and (max-width: 768px){ |
| 76 | .fc-header-toolbar{ | 90 | .fc-header-toolbar{ |
| 77 | font-size: small; | 91 | font-size: small; |
| 78 | } | 92 | } |
| @@ -80,5 +94,4 @@ td .fc-timegrid-axis{ | |||
| 80 | font-size: 1.5em !important; /* au lieu de 1.75em */ | 94 | font-size: 1.5em !important; /* au lieu de 1.75em */ |
| 81 | } | 95 | } |
| 82 | } | 96 | } |
| 83 | @media screen and (max-width: 550px){ | 97 | @media screen and (max-width: 480px){} \ No newline at end of file |
| 84 | } \ No newline at end of file | ||