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 %} {% endfor %}
</ol> </ol>
{% endblock %} {% endblock %}
{% block foot %}
<script type="text/javascript">
tippy('.profiles [title]', {arrow: true});
</script>
{% endblock %}

View file

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

View file

@ -14,11 +14,11 @@
{% if app %}{{ app.name | first }}{% endif %} {% 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 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 %} {% 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> <i class="fas fa-check-circle verified-success"></i>
</span> </span>
{% else %} {% 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> <i class="fas fa-question-circle verified-warning"></i>
</span> </span>
{% endif %} {% endif %}

View file

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