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