interfaz para reordenar artículos

app/assets/javascripts/drag.js

@@ -6,5 +6,16 @@ $(document).on('turbolinks:load', function() {
   }).on('drop', function(from, to, el, mode) {
     // Al soltar, reordenamos toda la tabla
     $('.post_order').val(function(i,v) { return i; });
+    $('.reorder-posts-panel')
+      .addClass('d-block')
+      .removeClass('d-none');
+  });
+
+  // Ocultar el panel de ayuda con botón
+  $('.reorder-posts-panel .close').click(function(e) {
+    e.preventDefault();
+    $('.reorder-posts-panel')
+      .removeClass('d-block')
+      .addClass('d-none');
   });
 });

app/assets/stylesheets/application.scss

@@ -106,3 +106,7 @@ textarea.post-content {
 .sindu_dragger table {
   background: transparent !important;
 }
+
+.d-none, .d-block {
+  transition: all 3s;
+}

app/views/posts/index.haml

@@ -20,6 +20,14 @@
   .col
     - if @posts.present?
       = form_tag site_reorder_posts_path, method: :post do
+        = hidden_field 'posts', 'lang', value: @lang
+        .reorder-posts-panel.alert.alert-info.alert-dismissible.fade.show{role: 'alert'}
+          = raw t('help.posts.reorder')
+          %br
+          = submit_tag t('posts.reorder_posts'), class: 'btn btn-success'
+          %button.close{type: 'button',
+            'aria-label': t('help.close') }
+            %span{'aria-hidden': true} ×
         %table.table.table-condensed.table-striped.table-draggable
           %tbody
             - @posts.each_with_index do |post, i|
@@ -32,7 +40,7 @@
               %tr
                 %td
                   = fa_icon 'arrows-v', class: 'handle'
-                  = text_field 'posts[order]', i, value: post.order || i, class: 'post_order'
+                  = hidden_field 'posts[order]', i, value: post.order || i, class: 'post_order'
 
                 %td{class: direction}
                   = link_to post.title, site_post_path(@site, post, lang: @lang)

config/locales/en.yml

@@ -8,6 +8,10 @@ en:
     breadcrumbs: "What you see up here are the bread crumbs for this
     site.  When you enter a new section, you will see the previous ones
     and also have a path for where you\'re standing."
+    posts:
+      reorder: 'You can drag and drop articles by the arrow icon (<i
+      class="fa fa-arrows-v"></i>) and then press the "Reorder posts"
+      button to save them in different order.'
     i18n:
       top: 'Back to top'
       index: "Here you can edit your site's texts that don't belong to a
@@ -127,6 +131,7 @@ en:
     en: 'English'
     ar: 'Arabic'
   posts:
+    reorder_posts: 'Reorder posts'
     new: 'New post'
     index: 'Posts'
     edit: 'Edit'

config/locales/es.yml

@@ -8,6 +8,10 @@ es:
     breadcrumbs: 'Lo que ves arriba son las migas de pan de este sitio.
     Cuando ingreses a una sección, podrás volver a las secciones
     anteriores y además tener una ruta de donde estás parada.'
+    posts:
+      reorder: 'Puedes arrastrar y soltar los artículos por el ícono de
+      las flechas (<i class="fa fa-arrows-v"></i>) y luego presionar el
+      botón "Reordenar artículos" para guardarlos en ese orden.'
     i18n:
       top: 'Volver al principio'
       index: 'Aquí puedes editar todos los textos del sitio que no se
@@ -129,6 +133,7 @@ es:
     en: 'inglés'
     ar: 'árabe'
   posts:
+    reorder_posts: 'Reordenar artículos'
     new: 'Empezar un artículo nuevo'
     index: 'Artículos'
     edit: 'Editar'