Increase hover area

This commit is contained in:
zandercymatics 2024-01-30 14:26:53 -07:00
parent 9cd6d2f7b4
commit 6f891d8288
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7

View file

@ -45,6 +45,11 @@
</th> </th>
<td data-sort-value="{{ domain.expiration_date|date:"U" }}" data-label="Expires">{{ domain.expiration_date|date }}</td> <td data-sort-value="{{ domain.expiration_date|date:"U" }}" data-label="Expires">{{ domain.expiration_date|date }}</td>
<td data-label="Status"> <td data-label="Status">
<span class="usa-tooltip"
data-position="top"
title="{{domain.get_state_help_text}}"
aria-ignore="true"
focusable="false">
{# UNKNOWN domains would not have an expiration date and thus would show 'Expired' #} {# UNKNOWN domains would not have an expiration date and thus would show 'Expired' #}
{% if domain.is_expired and domain.state != domain.State.UNKNOWN %} {% if domain.is_expired and domain.state != domain.State.UNKNOWN %}
Expired Expired
@ -53,15 +58,16 @@
{% else %} {% else %}
{{ domain.state|capfirst }} {{ domain.state|capfirst }}
{% endif %} {% endif %}
{# TODO: this tooltip should trigger on click, not hover. Better for access and works better button wise #}
<svg <svg
class="usa-icon usa-tooltip" class="usa-icon usa-tooltip" role="img"
data-position="top" data-position="top"
title="{{domain.get_state_help_text}}" title="{{domain.get_state_help_text}}"
focusable="true" focusable="true"
role="img"
> >
<use xlink:href="{%static 'img/sprite.svg'%}#info_outline"></use> <use xlink:href="{%static 'img/sprite.svg'%}#info_outline"></use>
</svg> </svg>
</span>
</td> </td>
<td> <td>
<a href="{% url "domain" pk=domain.pk %}"> <a href="{% url "domain" pk=domain.pk %}">