This commit is contained in:
parent
5330cedcfb
commit
27a100f591
Signed by:
Joakim Hellsén
Joakim Hellsén
SSH key fingerprint:
SHA256:/9h/CsExpFp+PRhsfA0xznFx2CGfTT5R/kpuFfUgEQk
1 changed files with 283 additions and 227 deletions
|
|
@ -61,22 +61,29 @@
|
|||
{% for game_id, game_data in campaigns_by_game.items %}
|
||||
<article id="twitch-game-article-{{ game_id }}"
|
||||
style="margin-bottom: 2rem;
|
||||
border: 1px solid color-mix(in srgb, CanvasText 25%, transparent 75%);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;">
|
||||
<header style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem;">
|
||||
<a href="{% url 'twitch:game_detail' game_id %}" style="flex-shrink: 0; line-height: 0;">
|
||||
padding: 1rem">
|
||||
<header style="display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.25rem">
|
||||
<a href="{% url 'twitch:game_detail' game_id %}"
|
||||
style="flex-shrink: 0;
|
||||
line-height: 0">
|
||||
{% picture game_data.box_art alt="Box art for "|add:game_data.name width=72 %}
|
||||
</a>
|
||||
<div>
|
||||
<h3 style="margin: 0; font-size: 1.5rem;">
|
||||
<a href="{% url 'twitch:game_detail' game_id %}" style="text-decoration: none; color: inherit;">{{ game_data.name }}</a>
|
||||
<a href="{% url 'twitch:game_detail' game_id %}"
|
||||
style="text-decoration: none;
|
||||
color: inherit">{{ game_data.name }}</a>
|
||||
</h3>
|
||||
{% if game_data.owners %}
|
||||
<div style="font-size: 1.1rem; color: color-mix(in srgb, CanvasText 75%, transparent 25%);">
|
||||
<div style="font-size: 1.1rem;
|
||||
color: color-mix(in srgb, CanvasText 75%, transparent 25%)">
|
||||
{% for org in game_data.owners %}
|
||||
<a href="{% url 'twitch:organization_detail' org.twitch_id %}" style="color: inherit;">{{ org.name }}</a>
|
||||
{% if not forloop.last %}, {% endif %}
|
||||
<a href="{% url 'twitch:organization_detail' org.twitch_id %}"
|
||||
style="color: inherit">{{ org.name }}</a>
|
||||
{% if not forloop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -85,52 +92,67 @@
|
|||
<div style="overflow-x: auto; padding: 0.25rem 0;">
|
||||
<div style="display: flex; gap: 1rem; min-width: max-content;">
|
||||
{% for campaign_data in game_data.campaigns %}
|
||||
<article class="campaign-entry" style="display: flex;
|
||||
<article class="campaign-entry"
|
||||
style="display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: 450px;
|
||||
padding: 0.9rem;
|
||||
border-radius: 8px;">
|
||||
padding: 0.9rem">
|
||||
<div style="display: flex; gap: 1rem;">
|
||||
<a href="{% url 'twitch:campaign_detail' campaign_data.campaign.twitch_id %}"
|
||||
style="flex-shrink: 0; line-height: 0;">
|
||||
style="flex-shrink: 0;
|
||||
line-height: 0">
|
||||
{% picture campaign_data.campaign.image_best_url|default:campaign_data.campaign.image_url alt="Image for "|add:campaign_data.campaign.name width=120 %}
|
||||
</a>
|
||||
<div style="flex: 1; min-width: 0;">
|
||||
<a href="{% url 'twitch:campaign_detail' campaign_data.campaign.twitch_id %}"
|
||||
style="text-decoration: none; color: inherit;">
|
||||
style="text-decoration: none;
|
||||
color: inherit">
|
||||
<h4 style="margin: 0 0 0.2rem 0; font-size: 1.3rem; line-height: 1.2;">{{ campaign_data.campaign.clean_name }}</h4>
|
||||
</a>
|
||||
{% if campaign_data.publisher %}
|
||||
<div style="font-size: 1rem; color: color-mix(in srgb, CanvasText 75%, transparent 25%);">{{ campaign_data.publisher }}</div>
|
||||
<div style="font-size: 1rem;
|
||||
color: color-mix(in srgb, CanvasText 75%, transparent 25%)">{{ campaign_data.publisher }}</div>
|
||||
{% endif %}
|
||||
<div style="font-size: 0.9rem; color: color-mix(in srgb, CanvasText 70%, transparent 30%); margin-top: 0.4rem;">
|
||||
{% if campaign_data.watch_range %}{{ campaign_data.watch_range }} · {% endif %}
|
||||
<div style="font-size: 0.9rem;
|
||||
color: color-mix(in srgb, CanvasText 70%, transparent 30%);
|
||||
margin-top: 0.4rem">
|
||||
{% if campaign_data.watch_range %}{{ campaign_data.watch_range }} ·{% endif %}
|
||||
ends in {{ campaign_data.campaign.end_at|timeuntil }}
|
||||
</div>
|
||||
<div style="font-size: 0.85rem; margin-top: 0.1rem;">
|
||||
{% if campaign_data.allowed_channels %}
|
||||
<a href="{% url 'twitch:campaign_detail' campaign_data.campaign.twitch_id %}#allowed-channels"
|
||||
style="color: color-mix(in srgb, CanvasText 60%, transparent 40%); text-decoration: none;">
|
||||
style="color: color-mix(in srgb, CanvasText 60%, transparent 40%);
|
||||
text-decoration: none">
|
||||
{{ campaign_data.allowed_channels.0.display_name }}{% if campaign_data.allowed_channels|length > 1 %} +{{ campaign_data.allowed_channels|length|add:'-1' }} more{% endif %}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ campaign_data.campaign.game.twitch_directory_url }}"
|
||||
style="color: color-mix(in srgb, CanvasText 60%, transparent 40%); text-decoration: none;">
|
||||
any channel
|
||||
</a>
|
||||
style="color: color-mix(in srgb, CanvasText 60%, transparent 40%);
|
||||
text-decoration: none">any channel</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if campaign_data.benefits %}
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem;">
|
||||
<div style="display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem">
|
||||
{% for benefit in campaign_data.benefits %}
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; font-size: 1.1rem; background: color-mix(in srgb, CanvasText 8%, transparent 92%); border-radius: 6px;">
|
||||
<span style="display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-size: 1.1rem;
|
||||
background: color-mix(in srgb, CanvasText 8%, transparent 92%)">
|
||||
{% if benefit.image_best_url %}
|
||||
<img src="{{ benefit.image_best_url }}"
|
||||
alt="{{ benefit.name }}"
|
||||
style="width: 30px; height: 30px; border-radius: 4px; object-fit: contain;"
|
||||
style="width: 30px;
|
||||
height: 30px;
|
||||
object-fit: contain"
|
||||
loading="lazy" />
|
||||
{% endif %}
|
||||
{{ benefit.name }}
|
||||
|
|
@ -236,22 +258,33 @@
|
|||
style="margin-bottom: 2rem;
|
||||
border: 1px solid color-mix(in srgb, CanvasText 25%, transparent 75%);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;">
|
||||
<header style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem;">
|
||||
padding: 1rem">
|
||||
<header style="display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.25rem">
|
||||
{% if game_data.image %}
|
||||
<img src="{{ game_data.image }}"
|
||||
width="48"
|
||||
height="48"
|
||||
alt="Image for {{ game_data.name }}"
|
||||
style="width: 72px; height: 72px; border-radius: 8px; object-fit: cover; flex-shrink: 0;" />
|
||||
style="width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0" />
|
||||
{% endif %}
|
||||
<div>
|
||||
<h3 style="margin: 0; font-size: 1.5rem;">
|
||||
{% if game_data.kick_id %}
|
||||
<a href="{% url 'kick:game_detail' game_data.kick_id %}" style="text-decoration: none; color: inherit;">{{ game_data.name }}</a>
|
||||
<a href="{% url 'kick:game_detail' game_data.kick_id %}"
|
||||
style="text-decoration: none;
|
||||
color: inherit">{{ game_data.name }}</a>
|
||||
{% elif game_data.organizations %}
|
||||
{% for org in game_data.organizations %}
|
||||
<a href="{% url 'kick:organization_detail' org.kick_id %}" style="text-decoration: none; color: inherit;">{{ org.name }}</a>
|
||||
<a href="{% url 'kick:organization_detail' org.kick_id %}"
|
||||
style="text-decoration: none;
|
||||
color: inherit">{{ org.name }}</a>
|
||||
{% if not forloop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
|
|
@ -259,9 +292,11 @@
|
|||
{% endif %}
|
||||
</h3>
|
||||
{% if game_data.kick_id and game_data.organizations %}
|
||||
<div style="font-size: 1.1rem; color: color-mix(in srgb, CanvasText 75%, transparent 25%);">
|
||||
<div style="font-size: 1.1rem;
|
||||
color: color-mix(in srgb, CanvasText 75%, transparent 25%)">
|
||||
{% for org in game_data.organizations %}
|
||||
<a href="{% url 'kick:organization_detail' org.kick_id %}" style="color: inherit;">{{ org.name }}</a>
|
||||
<a href="{% url 'kick:organization_detail' org.kick_id %}"
|
||||
style="color: inherit">{{ org.name }}</a>
|
||||
{% if not forloop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
@ -273,58 +308,79 @@
|
|||
{% for campaign_data in game_data.campaigns %}
|
||||
{% with rewards=campaign_data.rewards %}
|
||||
{% with min_watch=rewards.0.required_units|default:0 max_watch=rewards.last.required_units|default:0 %}
|
||||
<article class="campaign-entry" style="display: flex;
|
||||
<article class="campaign-entry"
|
||||
style="display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: 450px;
|
||||
padding: 0.9rem;
|
||||
border-radius: 8px;">
|
||||
border-radius: 8px">
|
||||
<div style="display: flex; gap: 1rem;">
|
||||
<a href="{% url 'kick:campaign_detail' campaign_data.campaign.kick_id %}"
|
||||
style="flex-shrink: 0; line-height: 0;">
|
||||
style="flex-shrink: 0;
|
||||
line-height: 0">
|
||||
{% if campaign_data.campaign.image_url %}
|
||||
<img src="{{ campaign_data.campaign.image_url }}"
|
||||
width="120"
|
||||
height="120"
|
||||
alt="Image for {{ campaign_data.campaign.name }}"
|
||||
style="width: 120px; height: 120px; border-radius: 8px; object-fit: cover;" />
|
||||
style="width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover" />
|
||||
{% endif %}
|
||||
</a>
|
||||
<div style="flex: 1; min-width: 0;">
|
||||
<a href="{% url 'kick:campaign_detail' campaign_data.campaign.kick_id %}"
|
||||
style="text-decoration: none; color: inherit;">
|
||||
style="text-decoration: none;
|
||||
color: inherit">
|
||||
<h4 style="margin: 0 0 0.2rem 0; font-size: 1.3rem; line-height: 1.2;">{{ campaign_data.campaign.name }}</h4>
|
||||
</a>
|
||||
{% if campaign_data.campaign.organization %}
|
||||
<div style="font-size: 1rem; color: color-mix(in srgb, CanvasText 75%, transparent 25%);">{{ campaign_data.campaign.organization.name }}</div>
|
||||
<div style="font-size: 1rem;
|
||||
color: color-mix(in srgb, CanvasText 75%, transparent 25%)">{{ campaign_data.campaign.organization.name }}</div>
|
||||
{% endif %}
|
||||
<div style="font-size: 0.9rem; color: color-mix(in srgb, CanvasText 70%, transparent 30%); margin-top: 0.4rem;">
|
||||
{% if min_watch %}{% if min_watch == max_watch %}{{ min_watch }}m watch{% else %}{{ min_watch }}m–{{ max_watch }}m watch{% endif %} · {% endif %}
|
||||
<div style="font-size: 0.9rem;
|
||||
color: color-mix(in srgb, CanvasText 70%, transparent 30%);
|
||||
margin-top: 0.4rem">
|
||||
{% if min_watch %}{% if min_watch == max_watch %}{{ min_watch }}m watch{% else %}{{ min_watch }}m-{{ max_watch }}m watch{% endif %} · {% endif %}
|
||||
ends in {{ campaign_data.campaign.ends_at|timeuntil }}
|
||||
</div>
|
||||
<div style="font-size: 0.85rem; margin-top: 0.1rem;">
|
||||
{% if campaign_data.channels %}
|
||||
<a href="{% url 'kick:campaign_detail' campaign_data.campaign.kick_id %}#allowed-channels"
|
||||
style="color: color-mix(in srgb, CanvasText 60%, transparent 40%); text-decoration: none;">
|
||||
style="color: color-mix(in srgb, CanvasText 60%, transparent 40%);
|
||||
text-decoration: none">
|
||||
{{ campaign_data.channels.0.user.username|default:campaign_data.channels.0.slug }}{% if campaign_data.channels|length > 1 %} +{{ campaign_data.channels|length|add:'-1' }} more{% endif %}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ campaign_data.campaign.url }}"
|
||||
style="color: color-mix(in srgb, CanvasText 60%, transparent 40%); text-decoration: none;">
|
||||
any channel
|
||||
</a>
|
||||
style="color: color-mix(in srgb, CanvasText 60%, transparent 40%);
|
||||
text-decoration: none">any channel</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if rewards %}
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem;">
|
||||
<div style="display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem">
|
||||
{% for reward in rewards %}
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; font-size: 1.1rem; background: color-mix(in srgb, CanvasText 8%, transparent 92%); border-radius: 6px;">
|
||||
<span style="display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-size: 1.1rem;
|
||||
background: color-mix(in srgb, CanvasText 8%, transparent 92%);
|
||||
border-radius: 6px">
|
||||
{% if reward.full_image_url %}
|
||||
<img src="{{ reward.full_image_url }}"
|
||||
alt="{{ reward.name }}"
|
||||
style="width: 30px; height: 30px; border-radius: 4px; object-fit: contain;"
|
||||
style="width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
object-fit: contain"
|
||||
loading="lazy" />
|
||||
{% endif %}
|
||||
{{ reward.name }}
|
||||
|
|
@ -345,4 +401,4 @@
|
|||
{% endif %}
|
||||
</section>
|
||||
</main>
|
||||
{% endblock content %}
|
||||
{% endblock content %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue