From 0f497d215de8e16739263e2718bd39640a6cc4d8 Mon Sep 17 00:00:00 2001 From: polo Date: Thu, 8 May 2025 22:58:04 +0200 Subject: modif page, renommage et suppression, du responsive design, modif dans Director, notif toast --- public/css/foot.css | 39 +++++++++++++++++++++++--------- public/css/main.css | 53 +++++++++++++++++++++++++++++++++++--------- public/css/trombinoscope.css | 35 ++++++++++++++++++++++++++--- public/js/main.js | 29 ++++++++++++++++++++++++ 4 files changed, 131 insertions(+), 25 deletions(-) (limited to 'public') diff --git a/public/css/foot.css b/public/css/foot.css index 038d33b..023a0f2 100644 --- a/public/css/foot.css +++ b/public/css/foot.css @@ -6,7 +6,7 @@ footer background-color: #B7E9FE; /*width: 1200px;*/ margin: auto; - padding: 0 20px; + /*padding: 0 20px;*/ } footer > div @@ -39,7 +39,7 @@ footer > div /*max-width: 45%;*/ /*margin-right: 10px;*/ /*margin: 16px 0;*/ /* = p */ - padding: 10px; + padding: 15px; list-style: none; /* retirer les puces */ font-size: small; text-align: right; @@ -69,6 +69,11 @@ footer > div margin: 0 3px; }*/ +.contact +{ + padding: 0 15px; +} + .footer_logo img { max-width: 288px; @@ -85,6 +90,7 @@ footer > div footer > div { flex-direction: column; + align-items: center; } } @@ -95,6 +101,17 @@ footer > div } /* zone admin */ +.admin_buttons_zone +{ + margin: 5px; + display: flex; + flex-wrap: wrap; + align-items: center; +} +.admin_buttons_zone p +{ + margin: 0; +} .logged_out { /*display: none;*/ @@ -107,23 +124,17 @@ footer > div } .empty_admin_zone { - height: 32px; + height: 70px; } .logged_in { - height: 32px; - width: 1200px; + /*height: 70px;*/ + width: 100%; margin: auto; background-color: #ffff00; position: fixed; bottom: 0px; } -.logged_in > p -{ - margin: 5px 0; - display: flex; - justify-content: center; -} .logged_in button { margin-left: 5px; @@ -132,6 +143,7 @@ footer > div border: lightgrey 2px outset; border-radius: 4px; background-color: white; + margin: 2px; } .logged_in button:hover { @@ -139,6 +151,11 @@ footer > div background-color: #ffff00; border-radius: 4px; } +.modif_mode +{ + background-color: #ffae1a; /* orange clair soupe de poisson */ +} + .toast { visibility: hidden; diff --git a/public/css/main.css b/public/css/main.css index 93a7bcf..870082a 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -11,15 +11,25 @@ section > h3 margin: 0; text-align: center; } -section > p /* boutons spéciaux mode admin */ -{ - /*margin-left: 15px;*/ -} .grid_columns { display: grid; grid-template-columns: repeat(3, 1fr); } +@media screen and (max-width: 800px) +{ + .grid_columns + { + grid-template-columns: repeat(2, 1fr); + } +} +@media screen and (max-width: 550px) +{ + .grid_columns + { + display: block; + } +} .galery_photos { display: flex; @@ -148,23 +158,35 @@ article a:hover flex-wrap: wrap; font-size: smaller; }*/ -.new_bloc +.edit_bloc_zone { background-color: white; padding: 10px; - margin: 10px 20px; - + margin: 10px 15px; + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; } -.new_bloc p +.edit_bloc_zone p { margin: 5px; } +.new_bloc, .modify_bloc +{ + /*background-color: white; + padding: 10px; + margin: 10px 20px;*/ +} +.new_bloc p +{ + /*margin: 5px;*/ +} .new_bloc #bloc_title { - width: 100%; + width: 70%; max-width: 300px; } -.new_bloc form select, .new_bloc form input[type=submit] +.new_bloc form select, .new_bloc form input[type=submit], .modify_bloc form input[type=submit] { color: #ff1d04; font-size: medium; @@ -176,9 +198,18 @@ select:hover { cursor: pointer; } -.new_bloc form input[type=submit]:hover +.new_bloc form input[type=submit]:hover, .modify_bloc form input[type=submit]:hover { background-color: #ffff00; border-radius: 4px; cursor: pointer; +} +.modify_bloc > div +{ + display: flex; + align-items: baseline; +} +.modify_bloc img +{ + vertical-align: middle; } \ No newline at end of file diff --git a/public/css/trombinoscope.css b/public/css/trombinoscope.css index 357e6b0..cee2666 100644 --- a/public/css/trombinoscope.css +++ b/public/css/trombinoscope.css @@ -1,10 +1,39 @@ +/* css personnalissé à cette page, +.grid_columns utilise un nombre de colonnes spécifique */ article img { border-radius: 50%; } - .grid_columns { - /* écrase les 3 colonnes par défaut */ - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(4, 1fr); +} +@media screen and (max-width: 900px) +{ + .grid_columns + { + grid-template-columns: repeat(3, 1fr); + } +} +@media screen and (max-width: 650px) +{ + .grid_columns + { + grid-template-columns: repeat(2, 1fr); + } +} +@media screen and (max-width: 550px) +{ + .grid_columns + { + display: grid; + grid-template-columns: repeat(2, 1fr); + } +} +@media screen and (max-width: 350px) +{ + .grid_columns + { + display: block; + } } \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js index e278325..802bbbe 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -202,4 +202,33 @@ function findParent(element, tag_name){ element = element.parentElement; } return null; +} + + +/* -- mode Modification d'une page -- */ +function renamePageBloc(bloc_id){ + const input = document.getElementById("bloc_rename_" + bloc_id); + const title = document.getElementById(bloc_id).querySelector("h3"); + + fetch('index.php?bloc_edit=rename_page_bloc', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({bloc_title: input.value, bloc_id: bloc_id}) + }) + .then(response => response.json()) + .then(data => { + if(data.success){ + title.innerHTML = data.title; + console.log(data.title); + toastNotify('Le bloc a été renommé: ' + data.title); + } + else{ + console.error('Erreur au renommage du titre.'); + } + }) + .catch(error => { + console.error('Erreur:', error); + }); } \ No newline at end of file -- cgit v1.2.3