2 files changed, 43 insertions, 6 deletions

diff --git a/public/css/modif_page.css b/public/css/modif_page.css
index 8095766..4e38f1b 100644
--- a/public/css/modif_page.css
+++ b/public/css/modif_page.css
@@ -53,16 +53,20 @@
         justify-content: space-evenly;
         flex-wrap: wrap;
 }
-.edit_page_zone p, .edit_block_zone p, .edit_page_zone form
+.new_block
 {
-        margin: 5px;
+        max-width: 300px;
 }
-
 .new_block #bloc_title
 {
         width: 70%;
         max-width: 300px;
 }
+.explanations
+{
+        font-style: italic;
+        font-size: smaller;
+}
 
 .modify_block img
 {
@@ -76,17 +80,21 @@
 {
         background-color: white;
         margin: 8px 0;
-        padding: 5px;
 }
-.modify_one_block > *
+.modify_one_block p
 {
-        /*text-wrap: nowrap;*/
+        margin: 0px;
 }
 .modify_one_block > div
 {
+        padding: 4px;
         display: flex;
         align-items: center;
 }
+.modify_one_block > div > *
+{
+        margin: 4px;
+}
 .block_options
 {
         flex-wrap: wrap;
diff --git a/public/js/modif_page.js b/public/js/modif_page.js
index ee2004b..bf269ee 100644
--- a/public/js/modif_page.js
+++ b/public/js/modif_page.js
@@ -176,6 +176,35 @@ function switchBlocsPositions(bloc_id, direction) {
     });
 }
 
+function articlesOrderSelect(bloc_id){
+    const articles_order_select = document.getElementById('articles_order_select_' + bloc_id).value;
+
+    fetch('index.php?bloc_edit=change_articles_order', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: bloc_id, chrono_order: articles_order_select })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success){
+            // inverser l'ordre des articles!!
+            const parent = document.getElementById(bloc_id).querySelector(".section_child");
+            const articles = Array.from(parent.querySelectorAll("article"));
+            articles.reverse().forEach(article => {
+                parent.appendChild(article); // déplace dans le DOM, ne copie pas
+            });
+
+            console.log('ordre ' + articles_order_select);
+        }
+        else{
+            console.log("Erreur au changement de l'ordre d'affichage côté serveur");
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
+
 function changePresentation(bloc_id){
     const presentation = document.getElementById('presentation_select_' + bloc_id).value;