Amélioration de l'ordre des produits (JS)

On ne peut désormais modifier l'ordre des produits qu'en cliquant sur le bouton
dédié à cet effet.
La ligne où va être inséré l'élément est mis en surbrillance et le cursor
passe en move lors du déplacement.

backend/web/css/screen.css

   display: none;
 }
 
-/* line 494, ../sass/screen.scss */
-.produit-index .td-photo {
+/* line 493, ../sass/screen.scss */
+.table-striped > tbody > tr:nth-of-type(2n) {
+  background-color: white;
+}
+
+/* line 498, ../sass/screen.scss */
+.wrap .produit-index .td-photo {
   max-width: 100px;
   width: 100px;
 }
-/* line 498, ../sass/screen.scss */
-.produit-index .photo-produit {
+/* line 502, ../sass/screen.scss */
+.wrap .produit-index .photo-produit {
   max-width: 100px;
 }
+/* line 506, ../sass/screen.scss */
+.wrap .produit-index .ui-state-highlight {
+  height: 75px;
+  background-color: #F8F1DD;
+}
 
 /* communiquer */
-/* line 505, ../sass/screen.scss */
+/* line 514, ../sass/screen.scss */
 .communiquer-mode-emploi {
   border: solid 1px #e0e0e0;
   padding: 10px;
   margin-bottom: 30px;
   font-family: "myriadpro-regular";
 }
-/* line 513, ../sass/screen.scss */
+/* line 522, ../sass/screen.scss */
 .communiquer-mode-emploi .header .logo {
   float: left;
   width: 75px;
   padding-right: 20px;
   padding-top: 10px;
 }
-/* line 519, ../sass/screen.scss */
+/* line 528, ../sass/screen.scss */
 .communiquer-mode-emploi .header .logo img {
   width: 75px;
 }
-/* line 525, ../sass/screen.scss */
+/* line 534, ../sass/screen.scss */
 .communiquer-mode-emploi .header h1 {
   font-family: "comfortaaregular";
   font-size: 40px;
   margin-bottom: 0px;
   font-weight: normal;
 }
-/* line 533, ../sass/screen.scss */
+/* line 542, ../sass/screen.scss */
 .communiquer-mode-emploi .header h2 {
   margin-top: 0px;
   font-family: "myriadpro-regular";
   left: 2px;
   font-weight: normal;
 }
-/* line 544, ../sass/screen.scss */
+/* line 553, ../sass/screen.scss */
 .communiquer-mode-emploi h3 {
   font-family: "comfortaalight";
   font-family: "myriadpro-regular";
   margin-bottom: 0px;
 }
 
-/* line 554, ../sass/screen.scss */
+/* line 563, ../sass/screen.scss */
 .communiquer-mode-emploi-encart {
   width: 420px;
   margin-top: 20px;
 }
-/* line 558, ../sass/screen.scss */
+/* line 567, ../sass/screen.scss */
 .communiquer-mode-emploi-encart .header .logo {
   width: 60px;
   margin-right: 20px;
   padding-top: 5px;
 }
-/* line 563, ../sass/screen.scss */
+/* line 572, ../sass/screen.scss */
 .communiquer-mode-emploi-encart .header .logo img {
   width: 60px;
 }
-/* line 569, ../sass/screen.scss */
+/* line 578, ../sass/screen.scss */
 .communiquer-mode-emploi-encart .header h1 {
   margin-bottom: 3px;
 }
-/* line 578, ../sass/screen.scss */
+/* line 587, ../sass/screen.scss */
 .communiquer-mode-emploi-encart h3 {
   margin-top: 15px;
   margin-bottom: 15px;
 }
 
-/* line 584, ../sass/screen.scss */
+/* line 593, ../sass/screen.scss */
 .bloc-mode-emploi-pdf {
   width: 49.9%;
   float: left;
   border-bottom: dotted 1px gray;
 }
 
-/* line 590, ../sass/screen.scss */
+/* line 599, ../sass/screen.scss */
 .bloc-mode-emploi-border {
   border-right: dotted 1px gray;
   border-bottom: dotted 1px gray;
 }
 
-/* line 595, ../sass/screen.scss */
+/* line 604, ../sass/screen.scss */
 .communiquer-mode-emploi-pdf {
   border: 0px none;
   -moz-border-radius: 0px;
   margin-bottom: 0px;
   padding: 20px 0px 20px 30px;
 }
-/* line 603, ../sass/screen.scss */
+/* line 612, ../sass/screen.scss */
 .communiquer-mode-emploi-pdf .header .logo {
   float: left;
   width: 55px;
   padding-right: 15px;
   padding-top: 10px;
 }
-/* line 609, ../sass/screen.scss */
+/* line 618, ../sass/screen.scss */
 .communiquer-mode-emploi-pdf .header .logo img {
   width: 55px;
 }
-/* line 613, ../sass/screen.scss */
+/* line 622, ../sass/screen.scss */
 .communiquer-mode-emploi-pdf .header h1 {
   font-size: 32px;
 }
-/* line 616, ../sass/screen.scss */
+/* line 625, ../sass/screen.scss */
 .communiquer-mode-emploi-pdf .header h2 {
   font-size: 16px;
 }
-/* line 621, ../sass/screen.scss */
+/* line 630, ../sass/screen.scss */
 .communiquer-mode-emploi-pdf h3 {
   font-weight: normal;
 }
 
-/* line 626, ../sass/screen.scss */
+/* line 635, ../sass/screen.scss */
 .bloc-mode-emploi-bottom {
   border-bottom: 0px none;
   border-bottom: solid 1px white;

backend/web/js/lechatdesnoisettes.js

     $(".produit-index table tbody").sortable({
         items: "> tr",
         appendTo: "parent",
+        cursor: "move",
+        placeholder: "ui-state-highlight",
+        handle: '.btn-order',
         //helper: "clone"
         helper: fixHelper,
         stop: function(event, ui) {

backend/web/sass/screen.scss

     }
 }
 
-.produit-index {
+.table-striped > tbody > tr:nth-of-type(2n) {
+    background-color: white ;
+}
+
+.wrap .produit-index {
     .td-photo {
         max-width: 100px ;
         width: 100px ;
     .photo-produit {
         max-width: 100px ;
     }
+    
+    .ui-state-highlight { 
+        height: 75px; 
+        background-color: $color2 ;
+    }   
 }
 
 /* communiquer */