OffreLegume, apparence de la zone drag and drop, ou quand elle est figée

src/APIBundle/Controller/OffreLegumesAPIController.php

@@ -28,19 +28,6 @@ class OffreLegumesAPIController extends MasterAPIController
         }
         
         return $this->api($legumes);
-    
-        /*
-            $hop = '';
-            for ($i=0; $i < count($legumes); $i++)
-            {
-                $hop .= $legumes[$i]['id'].',';
-            }
-            return $this->render('PotageBundle:Default:test.html.twig', array(
-                'if_sorted' => !empty($sorted),
-                'sorted' => $sorted,
-                'leguid' => $hop,
-                'legumes' => $legumes
-            ));
-        */
+  
     }
 }

src/PotageBundle/Resources/views/Offre/ajaxDisplay.html.twig

@@ -6,15 +6,6 @@
 
 {% block searchbar %}
     <nav class="navbar navbar-expand-lg navbar-light navbar-search">
-        {#<form class="form-inline my-2 my-lg-0" style="margin: auto;">
-            <div class="input-group input-group-lg">
-                <div class="input-group-prepend">
-                    <span class="input-group-text" id="inputGroup-sizing-lg"><i class="fas fa-search"></i></span>
-                </div>
-                <input id="search" type="search" class="form-control" placeholder="Rechercher"
-                       aria-label="LargeSearch" aria-describedby="inputGroup-sizing-sm">
-            </div>
-        </form>#}
         <a href="{{ path('potage_legume_ajax_display') }}" class="nav-laterale left text-secondary"><i class="fas fa-long-arrow-alt-left  fa-fw"></i>Les légumes</a>
         <a href="{{ path('potage_lettre_ajax_display') }}" class="nav-laterale right text-secondary">Les infolettres<i class="fas fa-long-arrow-alt-right  fa-fw"></i></a>
     </nav>

src/PotageBundle/Resources/views/OffreLegumes/ajaxDisplay.html.twig

@@ -6,15 +6,6 @@
 
 {% block searchbar %}
     <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-search">
-        <form class="form-inline my-2 my-lg-0" style="margin: auto;">
-            <div class="input-group input-group-lg">
-                <div class="input-group-prepend">
-                    <span class="input-group-text" id="inputGroup-sizing-lg"><i class="fas fa-search"></i></span>
-                </div>
-                <input id="search" type="search" class="form-control" placeholder="Rechercher"
-                       aria-label="LargeSearch" aria-describedby="inputGroup-sizing-sm">
-            </div>
-        </form>
         <div class="nav-laterale left">
             <a href="{{ path('potage_legume_ajax_display') }}" class="text-secondary">
                 <i class="fas fa-long-arrow-alt-up  fa-fw" style="transform: rotate(-45deg);"></i>Les légumes</a>
@@ -43,11 +34,11 @@
             <div class="col right hd-1">
                 <div style="margin-top: 0.65em;">
 
+                    {#
                     <a href="javascript: void(0);" class="btn btn-outline-dark mb-2 btn-reload">
                         <i class="fas fa-sync-alt"></i>
                         Rafraîchir la liste
                     </a>
-                    {#
                     <a href="javascript: void(0);" class="btn btn-dark mb-2 btn-create"
                        data-toggle="modal" data-target=".form-offre-modal">
                         <i class="fas fa-plus"></i>
@@ -59,10 +50,11 @@
             </div>
         </div>
 
-        <div id="maingrid" class="grid offre-legumes table-striped">
+        <div id="maingrid" class="grid offre-legumes {{ offre.status }}">
             <div id="sortable">
                 Il n'y a pas encore de légumes !
             </div>
+            <div class="clearfix"></div>
         </div>
 
     </section>

web/css/style.css

@@ -198,9 +198,40 @@ table#maintab span.details {
 }
 
 /**/
-#sortable { list-style-type: none; margin: 0; padding: 0;  }
-#sortable div { width: 220px; height: 290px;}
-#sortable div.ui-state-default { margin: 1em 1em 0 0; padding: 0; float: left; position: relative; border: 0; }
+#maingrid.draft {
+    border: 6px dashed #d8d8d8;
+    padding: 2em;
+}
+#maingrid.draft:after {
+    content: "Glisser les légumes avec la souris pour les repositionner";
+    text-align: center;
+    margin: 1em auto 0;
+    color: grey;
+    display: block;
+    font-style: italic;
+}
+#maingrid.current,
+#maingrid.closed {
+    border: 6px solid #d8d8d8;
+    padding: 2em;
+}
+#sortable {
+    width: 720px;
+    margin: 0 auto;
+    padding: 0;
+    list-style-type: none;
+}
+#sortable div {
+    width: 220px;
+    height: 290px;
+}
+#sortable div.ui-state-default {
+    margin: 1em 1em 0 0;
+    padding: 0;
+    float: left;
+    position: relative;
+    border: 0;
+}
 #sortable div.texte, #sortable div.prix {
     position: absolute;
     color: white;