Opened 4 years ago

Closed 4 years ago

#21350 closed enhancement (fixed)

We should use CSS to style fingerprints, not <tt>

Reported by: irl Owned by: irl
Priority: Low Milestone:
Component: Metrics/Relay Search Version:
Severity: Normal Keywords:
Cc: Actual Points:
Parent ID: #21274 Points:
Reviewer: Sponsor:

Description

The tt element is deprecated in recent HTML standards, we should style this with CSS instead. This appears on detail pages for routers and bridges.

Child Tickets

Change History (8)

comment:1 Changed 4 years ago by cypherpunks

I've been toying around with a solution to this issue and I've come up with the following patch.

diff --git a/templates/details/router.html b/templates/details/router.html
index d94f5cf..f87001f 100644
--- a/templates/details/router.html
+++ b/templates/details/router.html
@@ -72,7 +72,7 @@
     <% } %>
 
     <dt><span class="tip" data-content="20-byte unique identifier of the relay." data-original-title="Fingerprint">Fingerprint</span></dt>
-    <dd><tt><%= relay.get('fingerprint').replace(/(.{20})/g,"$1&#8203;") %></tt></dd>
+    <dd><pre><%= relay.get('fingerprint') %></pre></dd>
 
     <dt><span class="tip" data-content="Flags that the directory authorities assigned to this relay." data-original-title="Relay flags">Flags</span></dt>
     <dd><% _.each(relay.get('flags'), function(flag) { %>

It reverts the solution from #12685 because <pre> tags wrap their content automatically. However, using the <pre> tag changes the fingerprint to look like the fingerprints of the family members (except with black text instead of blue or orange). IMO this is preferable because it makes displaying fingerprints consistent but thought I'd mention it anyway.

comment:2 Changed 4 years ago by cypherpunks

Status: newneeds_review

comment:3 Changed 4 years ago by irl

Owner: changed from RaBe to irl
Status: needs_reviewassigned

comment:4 Changed 4 years ago by irl

Status: assignedneeds_review

comment:5 Changed 4 years ago by irl

Resolution: fixed
Status: needs_reviewclosed

LGTM. Merged in 4627254904953d0ba9c02d0cf767472d10b78acc.

Thanks for your work. (:

comment:6 Changed 4 years ago by cypherpunks

Resolution: fixed
Status: closedreopened

My patch only addressed the issue on the router page. I forgot about the bridge page.

diff --git a/templates/details/bridge.html b/templates/details/bridge.html
index 99ffdd3..124e374 100644
--- a/templates/details/bridge.html
+++ b/templates/details/bridge.html
@@ -40,7 +40,7 @@
     <% } %>
 
     <dt><span class="tip" data-content="Hash of 20-byte unique identifier of the bridge." data-original-title="Hashed Fingerprint">Hashed Fingerprint</span></dt>
-    <dd><tt><%= relay.get('fingerprint').replace(/(.{20})/g,"$1&#8203;") %></tt></dd>
+    <dd><pre><%= relay.get('fingerprint') %></pre></dd>
 
     <dt><span class="tip" data-content="Flags that the directory authorities assigned to this bridge." data-original-title="Bridge flags">Flags</span></dt>
     <dd><% _.each(relay.get('flags'), function(flag) { %>

comment:7 Changed 4 years ago by cypherpunks

Status: reopenedneeds_review

comment:8 Changed 4 years ago by irl

Resolution: fixed
Status: needs_reviewclosed

Merged in 61dfcd6bc354e6c91a71e1bae38119c54fc6678e.

Thanks for your work. (:

Note: See TracTickets for help on using tickets.