Move translation helper from sidebar to an "alert" box at top of page

[jywarren]

This has been marked as a good candidate for becoming a first-timers-only issue like these, meaning that it's simple, self-contained, and with some extra formatting, could be a great entry point for a new contributor. If you're familiar enough with this code, please consider reformatting or reposting it as a first-timers-only issue, and then ping @jywarren to get it labelled. Or, if this is not your first time, try to solve it yourself!

---

Please describe the problem (or idea)

This page is now tagged with lang:zh which triggers a Translation widget to appear at the top of the sidebar. But it's not easy to notice.

The code is here:

plots2/app/views/sidebar/_related.html.erb

Line 24 in f40642c

<div id="google_translate_element"></div><script type="text/javascript">

Solution

Let's move it to the top of the page, into an alert box, using Bootstrap, as in these lines of code:

https://github.com/publiclab/plots2/blob/master/app/views/notes/show.html.erb#L6-L11

[kkavita92]

I can claim this!

[jywarren]

Yes please! That would be great. Thank you!

…

On Nov 29, 2017 7:33 PM, "Kavita Kalaichelvan" ***@***.***> wrote: I can claim this! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1808 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ8Hnmo-O05q9N5acve_hBHCPTmegks5s7ffAgaJpZM4QvcSd> .

[jywarren]

Hi, just checking if you've gotten stuck on this at all, or if I could help in any way? Thanks!

[tungla]

@jywarren could you show me which screen does the side appear? I'd like to claim this issue

[jywarren]

Here's one example with the translation sidebar widget: https://publiclab.org/notes/juncheng09/12-09-2017/instruction-for-sensors Awesome, thanks!

…

On Dec 10, 2017 2:41 AM, "tungla" ***@***.***> wrote: @jywarren <https://github.com/jywarren> could you show me which screen does the side appear? I'd like to claim this issue — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1808 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ8gCojR23xkzOgdxmSjKvnpHvJ4Uks5s-4sUgaJpZM4QvcSd> .

[tungla]

is this the correct position the ticket's aiming @jywarren?

[jywarren]

This looks good, but do you think we could put it in the main (right) column? And I think we don't need the full header for Translation. It could just be in a <p> -- "Translate this post" -- how does that sound? Thanks so much, this is looking great!

…

On Mon, Dec 11, 2017 at 2:32 AM, tungla ***@***.***> wrote: is this the correct position you're aiming to @jywarren <https://github.com/jywarren>? [image: image] <https://user-images.githubusercontent.com/8103307/33820071-0c53ce0c-de80-11e7-9fdd-6179be75c456.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1808 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ8eIg2UqkzKmAUMjonOk_buKcrjkks5s_NqdgaJpZM4QvcSd> .

[tungla]

Updated @jywarren. Is that ok?
One problem is i have to use javasciprt to edit HTML of google translate element (to add a span to its div). Is it fine to use this approach?

<% if @node && (@node.has_power_tag('iso') || @node.has_power_tag('lang')) %>
    <div id="google_translate_element" class="alert alert-info">
      <script type="text/javascript">
      function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, 'google_translate_element');
        addLabelTranslateElement();
      }
      function addLabelTranslateElement() {
        var paragraph = document.createElement('span');
        paragraph.innerHTML = "Translation: ";
        paragraph.style.fontSize = '125%';
        document.getElementsByClassName("skiptranslate goog-te-gadget")[0].prepend(paragraph);
      }
    </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  </div>
  <% end %>

[jywarren]

Hmm, interesting! This looks cool -- what does the span add? I also was hoping to get it to display in the main column above the title and main image, but this is looking good! Can you open a pull request with your solution? Thank you!

[jywarren]

Hi, @tungla -- just checking if you're able to open a pull request with this code. Thanks!

[tungla]

Yes @jywarren, gonna open a PR soon, sorry for being late

[jywarren]

no problem! Thanks!

[raunaks13]

@jywarren - This is my first time contributing. Since this issue has been inactive for a while can I try to submit a PR?

[jywarren]

yes please! We'd appreciate that!

…

On Wed, Mar 28, 2018 at 12:59 PM, Raunak Shah ***@***.***> wrote: @jywarren <https://github.com/jywarren> - This is my first time contributing. Since this issue has been inactive for a while can I try to submit a PR? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1808 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ6tzMekUGIdzHs9LiIDVVbJY-Ug0ks5ti8F9gaJpZM4QvcSd> .