Files
sunday/templates/comic.html
2025-11-07 18:37:45 +10:00

60 lines
2.5 KiB
HTML

{% extends "base.html" %}
{% block meta_description %}{{ comic.alt_text }}{% if comic.author_note %} - {{ comic.author_note }}{% endif %}{% endblock %}
{% block og_image %}{{ request.url_root }}static/images/thumbs/{{ comic.filename }}{% endblock %}
{% block content %}
<div class="comic-container{% if comic.full_width %} comic-container-fullwidth{% endif %}{% if comic.plain %} comic-container-plain{% endif %}" data-comic-number="{{ comic.number }}" data-total-comics="{{ total_comics }}">
{% if not comic.plain %}
<div class="comic-header">
<h1>{{ comic.title if comic.title else '#' ~ comic.number }}</h1>
<p class="comic-date">{{ comic.date }}</p>
</div>
{% endif %}
<div class="comic-image">
{% if comic.number < total_comics %}
<a href="{{ url_for('comic', comic_id=comic.number + 1) }}">
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}">
</a>
{% else %}
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}">
{% endif %}
</div>
<div class="comic-navigation">
<div class="nav-buttons">
{% if comic.number > 1 %}
<a href="{{ url_for('comic', comic_id=1) }}" class="btn btn-nav">First</a>
<a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn btn-nav">Previous</a>
{% else %}
<span class="btn btn-nav btn-disabled">First</span>
<span class="btn btn-nav btn-disabled">Previous</span>
{% endif %}
<span class="comic-number">Comic #{{ comic.number }}</span>
{% if comic.number < total_comics %}
<a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn btn-nav">Next</a>
<a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn btn-nav">Latest</a>
{% else %}
<span class="btn btn-nav btn-disabled">Next</span>
<span class="btn btn-nav btn-disabled">Latest</span>
{% endif %}
</div>
</div>
{% if comic.author_note %}
<div class="comic-transcript">
<h3>Author Note</h3>
<p>{{ comic.author_note }}</p>
</div>
{% endif %}
</div>
{% endblock %}