Adds annotator help

app/assets/stylesheets/layout.scss

@@ -213,6 +213,13 @@ a {
   border: 0;
 }
 
+#drop-help.f-dropdown.content {
+
+  @media (min-width: $small-breakpoint) {
+    max-width: $line-height*15;
+  }
+}
+
 // 02. Header
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 

app/views/legislations/show.html.erb

@@ -1,4 +1,23 @@
 <div class="row margin-top">
+  <div class="small-12 column">
+    <div class="right">
+      <a data-dropdown="drop-help" aria-controls="drop-help" aria-expanded="false" class="button radius warning">
+        <sub><i class="icon-edit"></i></sub>&nbsp;
+        <%= t("legislation.help.title") %>
+      </a>
+      <div id="drop-help" data-dropdown-content class="f-dropdown content" aria-hidden="true" tabindex="-1">
+        <p>
+          <%= t("legislation.help.text",
+              sign_in: link_to(t("legislation.help.text_sign_in"), new_user_session_path),
+              sign_up: link_to(t("legislation.help.text_sign_up"), new_user_registration_path)).html_safe %>
+          <%= image_tag ("annotator_help.gif"), alt: t("legislation.help.alt") %>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="row">
   <div class="small-12 medium-9 small-centered column">
     <section data-annotatable-type="legislation"
              data-annotatable-id="<%= @legislation.id %>">
@@ -7,4 +26,3 @@
     </section>
   </div>
 </div>
-

config/locales/en.yml

@@ -393,3 +393,10 @@ en:
     google_oauth2:
       sign_in: "Sign in with Google"
       sign_up: "Sign up with Google"
+  legislation:
+    help:
+      title: "How I can comment this document?"
+      text: "To comment this document you must %{sign_in} or %{sign_up}. Then select the text you want to comment and press the button with the pencil."
+      text_sign_in: "login"
+      text_sign_up: "sign up"
+      alt: "Select the text you want to comment and press the button with the pencil."

config/locales/es.yml

@@ -393,3 +393,10 @@ es:
     google_oauth2:
       sign_in: "Entra con Google"
       sign_up: "Regístrate con Google"
+  legislation:
+    help:
+      title: "¿Cómo puedo comentar este documento?"
+      text: "Para comentar este documento debes %{sign_in} o %{sign_up}. Después selecciona el texto que quieres comentar y pulsa en el botón con el lápiz."
+      text_sign_in: "iniciar sesión"
+      text_sign_up: "registrarte"
+      alt: "Selecciona el texto que quieres comentar y pulsa en el botón con el lápiz."