Fix Gravatar profiles showing on hover and add gravatar explanation and profile page for users
This commit is contained in:
parent
2451a6c630
commit
4c0db9f842
7 changed files with 79 additions and 10 deletions
|
|
@ -36,6 +36,14 @@
|
|||
<!-- Floating UI -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.6.9"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.6.13"></script>
|
||||
|
||||
<!-- Gravatar -->
|
||||
<!-- Import the hovercard styles -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/@gravatar-com/hovercards@0.10.8/dist/style.css">
|
||||
|
||||
<!-- Import the hovercards library -->
|
||||
<script src="https://unpkg.com/@gravatar-com/hovercards@0.10.8"></script>
|
||||
|
||||
{% block css %}{% endblock %}
|
||||
|
||||
{% block javascript_head %}{% endblock %}
|
||||
|
|
@ -97,14 +105,14 @@
|
|||
<div class="dropdown dropdown-end hidden sm:block">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
|
||||
<div class="w-10 rounded-full">
|
||||
{{ user.email|gravatar:40 }}
|
||||
{{ user.email|gravatar_no_hover:40 }}
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-32 p-2 shadow">
|
||||
<li>
|
||||
<a class="flex items-center justify-between" href="https://www.gravatar.com/profile/" target="_blank" rel="noopener noreferrer">
|
||||
<a class="flex items-center justify-between" href="{% url 'profile' %}">
|
||||
<div>Profile</div>
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
|
||||
|
|
@ -171,7 +179,29 @@
|
|||
|
||||
<script defer src="{% static 'js/tooltip.js' %}"></script>
|
||||
|
||||
<script defer src="{% static 'js/base.js' %}"></script>
|
||||
<!-- Gravatar -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (typeof Gravatar !== 'undefined' && typeof Gravatar.Hovercards !== 'undefined') {
|
||||
const hovercards = new Gravatar.Hovercards({
|
||||
myHash: '{{ user.email|gravatar_hash }}'
|
||||
});
|
||||
hovercards.attach( document.body, { ignoreSelector: 'img[src*="gravatar.com/avatar/"].ignore' } );
|
||||
}
|
||||
});
|
||||
// i18n: {
|
||||
// 'Edit your profile →': 'Modifier votre profil →',
|
||||
// 'View profile →': 'Voir le profil →',
|
||||
// 'Contact': 'Contact',
|
||||
// 'Send money': 'Envoyer de l\'argent',
|
||||
// 'Sorry, we are unable to load this Gravatar profile.': 'Désolé, nous ne pouvons pas charger ce profil Gravatar.',
|
||||
// 'Profile not found.': 'Profil non trouvé.',
|
||||
// 'Too Many Requests.': 'Trop de demandes.',
|
||||
// 'Internal Server Error.': 'Erreur interne du serveur.',
|
||||
// }
|
||||
</script>
|
||||
<script defer src="{% static 'js/base.js' %}"></script>
|
||||
|
||||
{% block javascript %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue