ayudas para el panel del sitio

app/assets/javascripts/application.js

@@ -14,8 +14,10 @@
 //= require turbolinks
 //= require jquery/dist/jquery.js
 //= require jquery.hotkeys/jquery.hotkeys
+//= require popper.js/dist/umd/popper
 //= require bootstrap/util
 //= require bootstrap/alert
+//= require bootstrap/tooltip
 //= require bootstrap-markdown/js/bootstrap-markdown
 //= require markdown-it/dist/markdown-it
 //= require select2/dist/js/select2

app/assets/javascripts/help.js

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

app/views/layouts/_btn_with_tooltip.haml

@@ -0,0 +1,2 @@
+= link_to text, link, class: "btn btn-#{type || secondary}",
+  data: { toggle: 'tooltip' }, title: tooltip

app/views/posts/index.haml

@@ -2,13 +2,14 @@
   .col
     = render 'layouts/breadcrumb',
       crumbs: [ link_to(t('sites.index'), sites_path), @site.name, link_to(t('posts.index'), site_posts_path(@site)), @category ]
+    = render 'layouts/help', help: t('help.breadcrumbs')
 .row
   .col
     %h1= @site.name_with_i18n(@lang)
 
 .row
   .col
-    = link_to t('posts.new'), new_site_post_path(@site),
+    = link_to t('posts.new'), new_site_post_path(@site, lang: @lang),
       class: 'btn btn-success'
 
 .row

app/views/sites/index.haml

@@ -6,6 +6,8 @@
   .col
     %h1= t('sites.title')
 
+    = render 'layouts/help', help: t('help.sites.index')
+
     %table.table.table-striped.table-condensed
       %tbody
         - @sites.each do |site|
@@ -14,18 +16,36 @@
               %h2= link_to site.name, site_path(site)
               %br
                 .btn-group{role: 'group', 'aria-label': t('sites.actions')}
-                  = link_to t('sites.posts'), site_path(site), class: 'btn btn-success'
+                  = render 'layouts/btn_with_tooltip',
-                  = link_to t('i18n.edit'), site_i18n_edit_path(site), class: 'btn btn-info'
+                    tooltip: t('help.sites.edit_posts'),
+                    type: 'success',
+                    link: site_path(site),
+                    text: t('sites.posts')
+                  = render 'layouts/btn_with_tooltip',
+                    tooltip: t('help.sites.edit_translations'),
+                    text: t('i18n.edit'),
+                    type: 'info',
+                    link: site_i18n_edit_path(site)
                   - if site.enqueued?
-                    %button.btn.btn-secondary= t('sites.enqueued')
+                    = render 'layouts/btn_with_tooltip',
+                      tooltip: t('help.sites.enqueued'),
+                      text: t('sites.enqueued'),
+                      type: 'secondary',
+                      link: nil
                   - else
                     = form_tag site_enqueue_path(site), method: :post, class: 'form-inline' do
-                      = button_tag type: 'submit', class: 'btn btn-success' do
+                      = button_tag type: 'submit',
+                        class: 'btn btn-success',
+                        title: t('help.sites.enqueue'),
+                        data: { toggle: 'tooltip' } do
                         = fa_icon 'building'
                         = t('sites.enqueue')
 
                   - if site.failed?
                     %button.btn.btn-danger= t('sites.failed')
                   - if site.build_log?
-                    = link_to t('sites.build_log'), site_build_log_path(site),
+                    = render 'layouts/btn_with_tooltip',
-                      class: 'btn btn-warning'
+                      tooltip: t('help.sites.build_log'),
+                      text: t('sites.build_log'),
+                      type: 'warning',
+                      link: site_build_log_path(site)

config/locales/en.yml

@@ -3,6 +3,23 @@ en:
     argument_error: 'Argument `%{argument}` must be an instance of %{class}'
     unknown_locale: 'Unknown %{locale} locale'
   help:
+    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."
+    sites:
+      index: 'This is the list of sites you can edit.'
+      edit_translations: "You can edit texts from your site other than
+      posts', and you can also translate them to other languages."
+      edit_posts: "When you enter here, you'll see a list of every
+      article and edit them.  You can also create new ones."
+      enqueued: "The site is on queue to be generated.  Once this
+      process finishes, you'll get an email telling you the status. If
+      everything went well, your site will be published :)"
+      enqueue: "When you finish making changes to your site, you can
+      publish them with this action.  You'll receive an email when it
+      finishes."
+      build_log: "This is the log for what happened during site
+      generation.  If there was an issue, you'll see it here."
     close: 'Close help'
     markdown:
       intro: 'The text is formatted using a syntax called Markdwon, a
@@ -62,6 +79,7 @@ en:
     en: 'English'
     ar: 'Arabic'
   posts:
+    new: 'New post'
     index: 'Posts'
     edit: 'Edit'
     save: 'Save'

config/locales/es.yml

@@ -3,6 +3,25 @@ es:
     argument_error: 'El argumento `%{argument}` debe ser una instancia de %{class}'
     unknown_locale: 'El idioma %{locale} es desconocido'
   help:
+    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.'
+    sites:
+      index: 'Este es el listado de sitios que puedes editar.'
+      edit_translations: 'Puedes editar los textos que salen en tu sitio
+      que no corresponden a artículos aquí, además de traducirlos a
+      otros idiomas.'
+      edit_posts: 'Aquí verás el listado de todos los artículos y podrás
+      editarlos o crear nuevos'
+      enqueued: 'El sitio está en la cola de espera para ser generado.
+      Una vez que este proceso termine, recibirás un correo indicando el
+      estado y si todo fue bien, se publicarán los cambios en tu sitio
+      :)'
+      enqueue: 'Cuando termines de hacer cambios en tu sitio, puedes
+      publicarlos con esta acción.  Al finalizar recibirás un correo
+      avisándote cómo fue todo.'
+      build_log: 'Este es el registro de lo que sucedió mientras se
+      generaba el sitio.  Si hubo algún problema, saldrá aquí.'
     close: 'Cerrar ayuda'
     markdown:
       intro: 'El formato del texto se llama Markdown.  Es un formato
@@ -61,6 +80,7 @@ es:
     en: 'inglés'
     ar: 'árabe'
   posts:
+    new: 'Empezar un artículo nuevo'
     index: 'Artículos'
     edit: 'Editar'
     save: 'Guardar'

package.json

@@ -8,6 +8,7 @@
     "markdown": "^0.5.0",
     "markdown-it": "^8.4.0",
     "marked": "^0.3.12",
+    "popper.js": "^1.12.9",
     "select2": "^4.0.6-rc.1"
   }
 }

yarn.lock

@@ -72,6 +72,10 @@ nopt@~2.1.1:
   dependencies:
     abbrev "1"
 
+popper.js@^1.12.9:
+  version "1.12.9"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.9.tgz#0dfbc2dff96c451bb332edcfcfaaf566d331d5b3"
+
 select2@^4.0.6-rc.1:
   version "4.0.6-rc.1"
   resolved "https://registry.yarnpkg.com/select2/-/select2-4.0.6-rc.1.tgz#aa6c3038a7f0f2e91ffade38f0a21c15e1813276"