Implement TOC in UI

This commit is contained in:
2025-12-30 00:44:06 +01:00
parent 1899747909
commit 8087ab5997
4 changed files with 38 additions and 7 deletions

View File

@@ -191,6 +191,15 @@ class Magazine(BaseModel):
def get_absolute_url(self):
return reverse("magazine", kwargs={"uuid": self.uuid})
def get_cover(self):
if self.image:
return self.image
else:
cover_issue = self.issue.filter(published=True).first()
if cover_issue and cover_issue.image.exists():
return cover_issue.image.first().image
return None
def website_short(self):
if self.website:
return urlparse(self.website).netloc.replace("www.", "")

View File

@@ -49,10 +49,12 @@
<div class="mx-auto">
<nav class="nav nav-tabs d-none d-lg-flex flex-row mb-2" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-summary-tab" data-bs-toggle="tab" data-bs-target="#nav-summary" type="button" role="tab" aria-controls="nav-summary" aria-selected="true">Summary</button>
{% if data.toc.all %}<button class="nav-link" id="nav-toc-tab" data-bs-toggle="tab" data-bs-target="#nav-toc" type="button" role="tab" aria-controls="nav-toc" aria-selected="true">Table of contents</button>{% endif %}
{% if documents %}<button class="nav-link" id="nav-documents-tab" data-bs-toggle="tab" data-bs-target="#nav-documents" type="button" role="tab" aria-controls="nav-documents" aria-selected="false">Documents</button>{% endif %}
</nav>
<select class="form-select d-lg-none mb-2" id="tabSelector" aria-label="Tab selector">
<option value="nav-summary" selected>Summary</option>
{% if data.toc.all %}<option value="nav-toc">Table of contents</option>{% endif %}
{% if documents %}<option value="nav-documents">Documents</option>{% endif %}
</select>
<div class="tab-content" id="nav-tabContent">
@@ -189,6 +191,30 @@
</table>
{% endif %}
</div>
<div class="tab-pane" id="nav-toc" role="tabpanel" aria-labelledby="nav-toc-tab">
<table class="table table-striped">
<thead>
<tr>
<th scope="row">Title</th>
<th scope="row">Subtitle</th>
<th scope="row">Authors</th>
<th scope="row">Page</th>
<th scope="row"><abbr title="Featured article"><i class="bi bi-star-fill"></i></abbr></th>
</tr>
</thead>
<tbody class="table-group-divider">
{% for toc in data.toc.all %}
<tr>
<td class="w-33">{{ toc.title }}</td>
<td class="w-33">{{ toc.subtitle }}</td>
<td>{{ toc.authors }}</td>
<td>{{ toc.page }}</td>
<td>{% if toc.featured %}<abbr title="Featured article"><i class="bi bi-star-fill text-warning"></i></abbr>{% endif %}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="tab-pane" id="nav-documents" role="tabpanel" aria-labelledby="nav-documents-tab">
<table class="table table-striped">
<thead>

View File

@@ -4,12 +4,8 @@
<div class="card shadow-sm">
{% if d.obj_type == "magazine" %}
<a href="{{ d.get_absolute_url }}">
{% if d.image and d.obj_type == "magazine" %}
<img class="card-img-top" src="{{ d.image.url }}" alt="{{ d }}">
{% elif d.issue.first.image.exists %}
{% with d.issue.first as i %}
<img class="card-img-top" src="{{ i.image.first.image.url }}" alt="{{ d }}">
{% endwith %}
{% if d.get_cover %}
<img class="card-img-top" src="{{ d.get_cover.url }}" alt="{{ d }}">
{% else %}
<!-- Do not show the "Coming soon" image when running in a single card column mode (e.g. on mobile) -->
<img class="card-img-top d-none d-sm-block" src="{% static DEFAULT_CARD_IMAGE %}" alt="{{ d }}">

View File

@@ -1,4 +1,4 @@
from ram.utils import git_suffix
__version__ = "0.19.1"
__version__ = "0.19.2"
__version__ += git_suffix(__file__)