saltar de secciones con un dropdown

recomendación de la clinica de ux de iff

app/assets/javascripts/application.js

@@ -18,6 +18,7 @@
 //= require bootstrap/util
 //= require bootstrap/alert
 //= require bootstrap/tooltip
+//= require bootstrap/dropdown
 //= require bootstrap-markdown/js/bootstrap-markdown
 //= require markdown-it/dist/markdown-it
 //= require select2/dist/js/select2

app/assets/javascripts/help.js

@@ -1,4 +1,5 @@
 $(document).on('turbolinks:load', function() {
   $('.alert').alert();
   $('[data-toggle="tooltip"]').tooltip({ placement: 'auto' });
+  $('.dropdown-toggle').dropdown();
 });

app/assets/stylesheets/application.scss

@@ -97,3 +97,7 @@ textarea.post-content {
   background-color: transparent;
   border: none;
 }
+
+.inline {
+  display: inline;
+}

app/views/i18n/_form.haml

@@ -26,28 +26,20 @@
     = render 'layouts/help', help: t('help.i18n.index')
 
 
-.row
+#top.row
-  .col-2
-    %ul.list-group
-      - @site.data.dig(@lang_from).each_pair do |section, content|
-        %li.list-group-item.align-items-center.justify-content-between.d-flex
-          -# https://github.com/turbolinks/turbolinks/issues/75
-          %a{href: "##{section}",
-            title: t('help.i18n.toc'),
-            data: { turbolinks: 'false', toggle: 'tooltip' }}= t("help.i18n.#{section}")
-          -# %span.badge.badge-secondary.badge-pill{data: { toggle: 'tooltip' },
-            title: t('help.i18n.count') }
-            - if content.is_a? String
-              = 1
-            - elsif content.is_a? Array
-              = content.count
-            - elsif content.is_a? Hash
-              = content.map(&:count).inject(&:+)
   .col
 
     = form_tag site_i18n_path(@site), method: :post, class: 'form' do
       = hidden_field 'i18n', 'lang_to', value: @lang_to
       .form-group
+        .dropdown.inline
+          %button.btn.btn-info.dropdown-toggle{type: 'button',
+            data: { toggle: 'dropdown' },
+            aria: { haspopup: 'true', expanded: 'false' }}
+            = t('i18n.jump')
+          .dropdown-menu{aria: { labelledby: t('i18n.jump') }}
+            - @site.data.dig(@lang_from).each_pair do |section, content|
+              %a.dropdown-item{href: "##{section}"}= t("help.i18n.#{section}")
         = submit_tag t('i18n.save'), class: 'btn btn-success'
 
       = render 'i18n/recursive', data: @site.data.dig(@lang_from), superkeys: []

app/views/i18n/_recursive.haml

@@ -4,6 +4,8 @@
   - unless keys.first == previous_key
     %h2{id: keys.first}
       = t("help.i18n.#{keys.first}")
+    %small
+      %a.float-md-right{href: '#top'}= t('help.i18n.top')
   - if value.is_a? String
     = render 'i18n/text_field', keys: keys, value: value
   - elsif value.is_a? Hash

config/locales/en.yml

@@ -9,6 +9,7 @@ en:
     site.  When you enter a new section, you will see the previous ones
     and also have a path for where you\'re standing."
     i18n:
+      top: 'Back to top'
       index: "Here you can edit your site's texts that don't belong to a
       post, like its description, sections, buttons... If you change
       languages up there in the title to be the same, you can edit them.
@@ -118,6 +119,7 @@ en:
     save: 'Save'
     change: 'Change'
     translate: 'Translate'
+    jump: 'Jump to section'
     translating:
       from: 'Translating from'
       to: 'into'

config/locales/es.yml

@@ -9,6 +9,7 @@ es:
     Cuando ingreses a una sección, podrás volver a las secciones
     anteriores y además tener una ruta de donde estás parada.'
     i18n:
+      top: 'Volver al principio'
       index: 'Aquí puedes editar todos los textos del sitio que no se
       corresponden con artículos, como la descripción, secciones, textos
       de botones... Si cambias los idiomas arriba para que coincidan,
@@ -120,6 +121,7 @@ es:
     translate_into: '.  Traducir a'
     change: 'Cambiar'
     translate: 'Traducir'
+    jump: 'Ir a la sección'
     translating:
       from: 'Traduciendo desde'
       to: 'a'