Add cute little Tipper.js tooltips to the profiles on the home h-card

This commit is contained in:
Danielle McLean 2018-05-01 14:15:37 +10:00
parent ffd0d3384e
commit c40372a020
Signed by: 00dani
GPG Key ID: 8EB789DDF3ABD240
4 changed files with 14 additions and 7 deletions

View File

@ -63,3 +63,8 @@
{% endfor %}
</ol>
{% endblock %}
{% block foot %}
<script type="text/javascript">
tippy('.profiles [title]', {arrow: true});
</script>
{% endblock %}

View File

@ -5,10 +5,8 @@
.tippy-tooltip
&.success-theme
color $base0B
background-color $base03
&.warning-theme
color $base0A
background-color $base03
.verified-success
color $base0B
.verified-warning

View File

@ -14,11 +14,11 @@
{% if app %}{{ app.name | first }}{% endif %}
{% if app %}({% endif %}<a class="u-url code{% if not app %} p-name{% endif %}" href="{{ params.client_id }}">{{ params.client_id }}</a>{% if app %}){% endif %}?
{% if verified %}
<span data-tooltip data-tippy-theme="success" data-tippy-html="#verified-success">
<span data-tooltip data-tippy-theme="dark success" data-tippy-html="#verified-success">
<i class="fas fa-check-circle verified-success"></i>
</span>
{% else %}
<span data-tooltip data-tippy-theme="warning" data-tippy-html="#verified-warning">
<span data-tooltip data-tippy-theme="dark warning" data-tippy-html="#verified-warning">
<i class="fas fa-question-circle verified-warning"></i>
</span>
{% endif %}

View File

@ -33,9 +33,13 @@ code, pre, .code, .pre
text-decoration none
line-height 1
.tippy-popper[x-placement^=top] .tippy-tooltip
.tippy-arrow
border-top-color $base03
for placement in top bottom left right
.tippy-popper[x-placement^={placement}] .tippy-tooltip.dark-theme .tippy-arrow
border-{placement}-color $base03
.tippy-tooltip.dark-theme
background-color $base03
color $base04
body
display flex