renommage des présentations,modif présentation des blocs et largeur min (donc nb de colonnes) en mode grid, corrections de bugs et erreurs 404, le param page_modif n'est plus une action, légère symfonyfication du routeur

3 files changed, 101 insertions, 48 deletions

diff --git a/public/css/body.css b/public/css/body.css
index 17bdad5..af178a8 100644
--- a/public/css/body.css
+++ b/public/css/body.css
@@ -49,6 +49,10 @@ main
     background-color: #E3F3FF;
     padding: 15px 0;
 }
+.hidden
+{
+    display: none;
+}
 section > h3
 {
     padding: 15px;
@@ -62,28 +66,10 @@ section > h3
     padding: 15px;
 }
 
-.grid_columns
+.grid > .section_child
 {
-    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: 600px)
-{
-    article
-    {
-        /*margin: 5px;*/
-    }
-    .grid_columns
-    {
-        display: block;
-    }
+    display: grid; /* et c'est tout */
+    /*grid-template-columns: repeat(auto-fit, minmax(' . $min_width . 'px, 1fr)); */ /* dans PostBlockBuilder et NewsBlockBuilder */
 }
 .galery_photos
 {
diff --git a/public/css/modif_page.css b/public/css/modif_page.css
index d6fc23e..9048f05 100644
--- a/public/css/modif_page.css
+++ b/public/css/modif_page.css
@@ -5,7 +5,7 @@
         padding: 10px;
         margin: 10px 15px;
 }
-.page_modification form select, .page_modification form input[type=submit]
+.page_modification select, .page_modification input[type=submit]
 {
         color: #ff1d04;
         font-size: medium;
@@ -17,7 +17,7 @@
 {
         cursor: pointer;
 }*/
-.page_modification form input[type=submit]:hover
+.page_modification input[type=submit]:hover
 {
         background-color: yellow;
         border-radius: 4px;
@@ -29,10 +29,10 @@
         flex-wrap: wrap;
         justify-content: space-evenly;
 }
-.edit_page_zone, .edit_bloc_zone, .delete_page_zone
+.edit_page_zone, .edit_block_zone, .delete_page_zone
 {
         background-color: #f0f0f0f0;
-        margin: 5px;
+        margin: 8px 5px;
         padding: 10px;
 }
 #edit_description
@@ -47,32 +47,54 @@
 {
         vertical-align: top;
 }
-.edit_bloc_zone
+.edit_block_zone
 {
         display: flex;
         justify-content: space-evenly;
         flex-wrap: wrap;
 }
-.edit_page_zone p, .edit_bloc_zone p, .edit_page_zone form
+.edit_page_zone p, .edit_block_zone p, .edit_page_zone form
 {
         margin: 5px;
 }
 
-.new_bloc #bloc_title
+.new_block #bloc_title
 {
         width: 70%;
         max-width: 300px;
 }
-.modify_bloc > div
+
+.modify_block img
+{
+        vertical-align: middle;
+}
+.delete_page_zone
+{
+        text-align: center;
+}
+.modify_one_block
+{
+        background-color: white;
+        margin: 8px 0;
+        padding: 5px;
+}
+.modify_one_block > *
+{
+        /*text-wrap: nowrap;*/
+}
+.modify_one_block > div
 {
         display: flex;
         align-items: baseline;
 }
-.modify_bloc img
+.block_options > *
 {
-        vertical-align: middle;
+        /*display: flex;
+        flex-wrap: wrap;*/
+        text-wrap: nowrap;
 }
-.delete_page_zone
+.grid_options
 {
-        text-align: center;
+        /*text-wrap: nowrap;*/ /* saut de la div grid_options */
+        flex-wrap: wrap; /* éléments à l'intérieur de grid_options lorsque lui-même dépasse la largeur dispo (téléphone) */
 }
\ No newline at end of file
diff --git a/public/js/modif_page.js b/public/js/modif_page.js
index b307f69..615f34a 100644
--- a/public/js/modif_page.js
+++ b/public/js/modif_page.js
@@ -19,9 +19,7 @@ function changePageTitle(page_id){
 
         fetch('index.php?page_edit=page_title', {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({title: page_name.value, page_id: page_id})
     })
     .then(response => response.json())
@@ -49,9 +47,7 @@ function changePageTitle(page_id){
         
         fetch('index.php?page_edit=page_menu_path', {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({page_menu_path: page_name_path.value, page_id: page_id})
     })
     .then(response => response.json())
@@ -88,9 +84,7 @@ function changeDescription(node_data_id){
 
         fetch('index.php?page_edit=page_description', {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({description: textarea.value, node_data_id: node_data_id})
     })
     .then(response => response.json())
@@ -117,9 +111,7 @@ function renamePageBloc(bloc_id){
 
         fetch('index.php?bloc_edit=rename_page_bloc', {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({bloc_title: input.value, bloc_id: bloc_id})
     })
     .then(response => response.json())
@@ -159,9 +151,7 @@ function switchBlocsPositions(bloc_id, direction, current_page) {
         
     fetch('index.php?page=' + current_page + '&bloc_edit=switch_blocs_positions', {
         method: 'POST',
-        headers: {
-        'Content-Type': 'application/json'
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ id1: bloc_id, id2: parseInt(other_bloc.id) })
     })
     .then(response => response.json())
@@ -187,4 +177,59 @@ function switchBlocsPositions(bloc_id, direction, current_page) {
     .catch(error => {
         console.error('Erreur:', error);
     });
+}
+
+function changePresentation(bloc_id){
+    const presentation = document.getElementById('presentation_select_' + bloc_id).value;
+
+    fetch('index.php?bloc_edit=change_presentation', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: bloc_id, presentation: presentation })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success){
+            document.getElementById(bloc_id).className = presentation;
+            document.getElementById('cols_min_width_edit_' + bloc_id).className = presentation === 'grid' ? '' : 'hidden';
+            console.log('changement de présentation');
+        }
+        else{
+            console.log('Erreur au changement de présentation côté serveur');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
+
+function changeColsMinWidth(bloc_id){
+    const cols_min_width_input = document.getElementById('cols_min_width_select_' + bloc_id);
+    
+    if(cols_min_width_input.value < 150){
+        cols_min_width_input.value = 150;
+    }
+    else if(cols_min_width_input.value > 500){
+        cols_min_width_input.value = 500;
+    }
+
+    fetch('index.php?bloc_edit=change_cols_min_width', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: bloc_id, cols_min_width: cols_min_width_input.value })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success){
+            document.getElementById(bloc_id).className = 'grid';
+            document.getElementById(bloc_id).querySelector(".section_child").style.gridTemplateColumns = 'repeat(auto-fit, minmax(' + data.cols_min_width + 'px, 1fr))';
+            console.log('changement de la largeur minimum en mode grille');
+        }
+        else{
+            console.log('Erreur au changement du nb de colonnes en mode grille côté serveur');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
 }
\ No newline at end of file