62 lines
No EOL
2.5 KiB
HTML
62 lines
No EOL
2.5 KiB
HTML
{% load gravatar card_badge %}
|
|
|
|
<div class="card trade-offer mb-3 mx-auto shadow-lg unified-card" style="border: none;">
|
|
<div class="card-body trade-offer-body">
|
|
<!-- Header Row: Using Grid, with relative positioning for avatar placement -->
|
|
<div class="row no-gutters">
|
|
<!-- Has Side -->
|
|
<div class="col-6 position-relative" style="padding: 1rem;">
|
|
{% if offer.initiated_by and offer.initiated_by.user.email %}
|
|
<!-- Positioned to the left -->
|
|
<div class="avatar position-absolute" style="left: 1rem; top: 50%; transform: translateY(-50%);">
|
|
{{ offer.initiated_by.user.email|gravatar:40 }}
|
|
</div>
|
|
{% endif %}
|
|
<!-- Centered text remains in the normal flow -->
|
|
<div class="text-center">
|
|
<h6 class="card-subtitle text-muted mb-0">Has</h6>
|
|
</div>
|
|
</div>
|
|
<!-- Wants Side -->
|
|
<div class="col-6 position-relative" style="padding: 1rem;">
|
|
{% if offer.accepted_by and offer.accepted_by.user.email %}
|
|
<!-- Positioned to the right -->
|
|
<div class="avatar position-absolute" style="right: 1rem; top: 50%; transform: translateY(-50%);">
|
|
{{ offer.accepted_by.user.email|gravatar:40 }}
|
|
</div>
|
|
{% endif %}
|
|
<!-- Centered text remains in the normal flow -->
|
|
<div class="text-center">
|
|
<h6 class="card-subtitle text-muted mb-0">Wants</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Body Row: Using Grid, no separators; badge spacing is consistent -->
|
|
<div class="row no-gutters">
|
|
<div class="col-6" style="padding: 1rem;">
|
|
<div class="trade-offer-cards d-flex flex-wrap justify-content-center gap-2">
|
|
{% if offer.have_cards.all %}
|
|
{% for card in offer.have_cards.all %}
|
|
{% card_badge card %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-6" style="padding: 1rem;">
|
|
<div class="trade-off-offer-cards d-flex flex-wrap justify-content-center gap-2">
|
|
{% if offer.want_cards.all %}
|
|
{% for card in offer.want_cards.all %}
|
|
{% card_badge card %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trade ID Footer with Info Icon -->
|
|
<small class="text-muted mt-auto d-block text-end pe-2">
|
|
<i class="bi bi-info-circle-fill" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Trade ID: {{ offer.hash }}" style="cursor: pointer;"></i>
|
|
</small>
|
|
</div>
|
|
</div> |