diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index e6ec0d7..27ae32b 100644 --- a/app/assets/javascripts/application.js +++ b/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 diff --git a/app/assets/javascripts/help.js b/app/assets/javascripts/help.js index 130bd3c..7a94f23 100644 --- a/app/assets/javascripts/help.js +++ b/app/assets/javascripts/help.js @@ -1,3 +1,4 @@ $(document).on('turbolinks:load', function() { $('.alert').alert(); + $('[data-toggle="tooltip"]').tooltip({ placement: 'auto' }); }); diff --git a/app/views/layouts/_btn_with_tooltip.haml b/app/views/layouts/_btn_with_tooltip.haml new file mode 100644 index 0000000..a90a9d3 --- /dev/null +++ b/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 diff --git a/app/views/posts/index.haml b/app/views/posts/index.haml index fdd4f19..9d7cc14 100644 --- a/app/views/posts/index.haml +++ b/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 diff --git a/app/views/sites/index.haml b/app/views/sites/index.haml index 06428b0..2a88315 100644 --- a/app/views/sites/index.haml +++ b/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' - = link_to t('i18n.edit'), site_i18n_edit_path(site), class: 'btn btn-info' + = render 'layouts/btn_with_tooltip', + 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), - class: 'btn btn-warning' + = render 'layouts/btn_with_tooltip', + tooltip: t('help.sites.build_log'), + text: t('sites.build_log'), + type: 'warning', + link: site_build_log_path(site) diff --git a/config/locales/en.yml b/config/locales/en.yml index e06fa67..8c146f3 100644 --- a/config/locales/en.yml +++ b/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' diff --git a/config/locales/es.yml b/config/locales/es.yml index 19c39ac..dd7fddf 100644 --- a/config/locales/es.yml +++ b/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' diff --git a/package.json b/package.json index 1e7c014..575e176 100644 --- a/package.json +++ b/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" } } diff --git a/yarn.lock b/yarn.lock index 4578bf9..71693e8 100644 --- a/yarn.lock +++ b/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"