From 506a0faabeab8dea0c32ae076fc080bff2d4a69e Mon Sep 17 00:00:00 2001
From: f <f@kefir.red>
Date: Mon, 30 Apr 2018 14:19:19 -0300
Subject: [PATCH] =?UTF-8?q?interfaz=20para=20reordenar=20art=C3=ADculos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/javascripts/drag.js          | 11 +++++++++++
 app/assets/stylesheets/application.scss |  4 ++++
 app/views/posts/index.haml              | 10 +++++++++-
 config/locales/en.yml                   |  5 +++++
 config/locales/es.yml                   |  5 +++++
 5 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/drag.js b/app/assets/javascripts/drag.js
index e65ede53..0f604636 100644
--- a/app/assets/javascripts/drag.js
+++ b/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');
   });
 });
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index b00df3a7..08335f43 100644
--- a/app/assets/stylesheets/application.scss
+++ b/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;
+}
diff --git a/app/views/posts/index.haml b/app/views/posts/index.haml
index 28d1aea6..fc405e10 100644
--- a/app/views/posts/index.haml
+++ b/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} &times;
         %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)
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 4348a2d6..ca22cba3 100644
--- a/config/locales/en.yml
+++ b/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'
diff --git a/config/locales/es.yml b/config/locales/es.yml
index a0c91d0d..1a3ac06d 100644
--- a/config/locales/es.yml
+++ b/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'