[tor-commits] [tpo/master] Make signature download link more visually distinct

[gus at torproject.org]

commit 4071ac9675fa8b57e6cefb9149cb62126692feb7
Author: kez <kez at torproject.org>
Date:   Wed Jun 23 18:58:12 2021 -0400

    Make signature download link more visually distinct
    
    Add an underline to the signature link
    Add a mouseover tooltip to the "how to verify" button
    Make the signature link download instead of opening a new tab
    
    See: tpo/web/tpo#64
---
 templates/hero-download.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/templates/hero-download.html b/templates/hero-download.html
index 90924f44..3a054065 100644
--- a/templates/hero-download.html
+++ b/templates/hero-download.html
@@ -33,9 +33,15 @@
         <a class="downloadLink" href="{{ download_link }}">
           <i class="text-light fab fa-{{ id }}-png"></i>
         </a>
+        <script>
+         // we can't use jquery for the event listener because jquery isn't loaded yet
+         document.addEventListener("DOMContentLoaded", function() {
+           $('[data-toggle="tooltip"]').tooltip();
+         });
+        </script>
         <a class="btn btn-primary mt-4 downloadLink" href="{{ download_link }}">{{ _('Download for') }} {{ item.label }}</a>
-        <a class="link" href="{{ sig_link }}"><span class="nick text-white">{{ _('Signature') }}</span></a>
-        <a class="link" href="{{ 'https://support.torproject.org/' + this.alt + '/tbb/how-to-verify-signature/' }}" target="_blank"><i style="font-size:10px;" class="text-light fas fa-question-circle"></i></a>
+        <a class="link" href="{{ sig_link }}" download><span class="nick text-white" style="text-decoration: underline;">{{ _('Signature') }}</span></a>
+        <a class="link" href="{{ 'https://support.torproject.org/' + this.alt + '/tbb/how-to-verify-signature/' }}" target="_blank" data-toggle="tooltip" data-placement="bottom" title="{{ _('Learn how to verify a signature') }}"><i style="font-size:10px;" class="text-light fas fa-question-circle"></i></a>
       </div>
     </div>
     {% endfor %}