Another attempt at getting the trade flipping and collapsing looking correct
This commit is contained in:
parent
7c62c57433
commit
37d8bd5981
7 changed files with 386 additions and 233 deletions
|
|
@ -107,9 +107,8 @@
|
|||
{% if gravatar_profile %}
|
||||
<div class="hovercard-profile mb-4 text-center">
|
||||
<img src="{{ gravatar_profile.thumbnailUrl }}" alt="{{ gravatar_profile.displayName|default:request.user.username }}" class="rounded-full mb-2 mx-auto" />
|
||||
<h3 class="text-xl mb-2">{{ gravatar_profile.displayName|default:request.user.username }}</h3>
|
||||
<a href="https://gravatar.com/profile/" target="_blank" rel="noopener noreferrer" class="btn btn-primary">
|
||||
Edit Profile on Gravatar
|
||||
<a href="https://gravatar.com/profile/avatars" target="_blank" rel="noopener noreferrer" class="btn btn-primary mt-4">
|
||||
Edit Avatar on Gravatar
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||||
</svg>
|
||||
|
|
@ -122,16 +121,16 @@
|
|||
{% endwith %}
|
||||
<div class="divider"></div>
|
||||
<h2 class="text-base font-semibold pt-0">What is Gravatar?</h2>
|
||||
<p class="mb-4 text-sm">Gravatar (Globally Recognized Avatar) is a free service that links your email address to a profile picture and, optionally, a profile. Many websites, including this one, use Gravatar to display your avatar and profile automatically.</p>
|
||||
<p class="mb-4 text-sm">Gravatar (Globally Recognized Avatar) is a free service that links your email address to a profile picture. Many websites, including this one, use Gravatar to display your preferred avatar automatically.</p>
|
||||
|
||||
<h2 class="text-base font-semibold">How does it work?</h2>
|
||||
<p class="mb-4 text-sm">If you've set up a Gravatar, your profile picture will appear here whenever you use your email on supported sites. When someone hovers over or clicks on your avatar, your Gravatar profile will also appear if you have one. If you don't have a Gravatar yet, you'll see a default image instead.</p>
|
||||
<p class="mb-4 text-sm">If you've set up a Gravatar, your profile picture will appear here whenever you use your email on supported sites. If you don't have a Gravatar yet, you'll see a default image instead.</p>
|
||||
|
||||
<h2 class="text-base font-semibold">Is it safe? What about privacy?</h2>
|
||||
<p class="mb-4 text-sm">Gravatar is completely optional, opt-in, and prioritizes your security and privacy. Your email is never shared and only a hashed version is sent to Gravatar, protecting your identity while ensuring that your email address is not exposed to bots or scrapers. Your personal data remains secure, and you maintain full control over your public profile.</p>
|
||||
<p class="mb-4 text-sm">Gravatar is completely optional, opt-in, and prioritizes your security and privacy. Your email is never visible to anyone and only a hashed version is shown on the page and sent to Gravatar, protecting your identity while ensuring that your email address is not exposed to bots or scrapers.</p>
|
||||
|
||||
<h2 class="text-base font-semibold">Want to update or add a Gravatar?</h2>
|
||||
<p class="mb-4 text-sm">Go to Gravatar.com to set up or change your avatar or profile. Your updates will appear here once saved!</p>
|
||||
<p class="mb-4 text-sm">Go to Gravatar.com to set up or change your avatar. Your updates will appear here once saved!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,13 +41,6 @@
|
|||
<script src="{% static 'js/floating-ui_core@1.6.9.9.min.js' %}"></script>
|
||||
<script src="{% static 'js/floating-ui_dom@1.6.13.13.min.js' %}"></script>
|
||||
|
||||
<!-- Gravatar -->
|
||||
<!-- Import the hovercard styles -->
|
||||
<link rel="stylesheet" href="{% static 'css/hovercards.min.css' %}">
|
||||
|
||||
<!-- Import the hovercards library -->
|
||||
<script src="{% static 'js/hovercards.min.js' %}"></script>
|
||||
|
||||
<script src="{% static 'js/base.js' %}"></script>
|
||||
|
||||
{% block css %}{% endblock %}
|
||||
|
|
@ -150,29 +143,6 @@
|
|||
<script defer src="{% static 'js/alpinejs@3.14.8.min.js' %}"></script>
|
||||
|
||||
<script defer src="{% static 'js/tooltip.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>
|
||||
|
||||
|
||||
{% block javascript %}{% endblock %}
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@
|
|||
<div id="featured-tab-contents">
|
||||
<div class="tab-content" data-tab="featured-all">
|
||||
{% if featured_offers.All %}
|
||||
<div class="flex flex-col items-center gap-3 w-auto mx-auto">
|
||||
<div class="flex flex-col items-center gap-6 w-auto mx-auto">
|
||||
{% for offer in featured_offers.All %}
|
||||
{% render_trade_offer offer %}
|
||||
{% endfor %}
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
<h5 class="text-xl font-semibold whitespace-nowrap truncate mb-0">Recent Offers</h5>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<div class="flex flex-col items-center gap-6">
|
||||
{% for offer in recent_offers %}
|
||||
{% render_trade_offer offer %}
|
||||
{% empty %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue