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,23 +45,29 @@
</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">
{# UNKNOWN domains would not have an expiration date and thus would show 'Expired' #} <span class="usa-tooltip"
{% if domain.is_expired and domain.state != domain.State.UNKNOWN %} data-position="top"
Expired title="{{domain.get_state_help_text}}"
{% elif domain.state == domain.State.UNKNOWN or domain.state == domain.State.DNS_NEEDED %} aria-ignore="true"
DNS needed focusable="false">
{% else %} {# UNKNOWN domains would not have an expiration date and thus would show 'Expired' #}
{{ domain.state|capfirst }} {% if domain.is_expired and domain.state != domain.State.UNKNOWN %}
{% endif %} Expired
<svg {% elif domain.state == domain.State.UNKNOWN or domain.state == domain.State.DNS_NEEDED %}
class="usa-icon usa-tooltip" DNS needed
data-position="top" {% else %}
title="{{domain.get_state_help_text}}" {{ domain.state|capfirst }}
focusable="true" {% endif %}
role="img" {# TODO: this tooltip should trigger on click, not hover. Better for access and works better button wise #}
> <svg
<use xlink:href="{%static 'img/sprite.svg'%}#info_outline"></use> class="usa-icon usa-tooltip" role="img"
</svg> data-position="top"
title="{{domain.get_state_help_text}}"
focusable="true"
>
<use xlink:href="{%static 'img/sprite.svg'%}#info_outline"></use>
</svg>
</span>
</td> </td>
<td> <td>
<a href="{% url "domain" pk=domain.pk %}"> <a href="{% url "domain" pk=domain.pk %}">