Implement TOC in UI

ram/bookshelf/models.py

@@ -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.", "")

ram/portal/templates/bookshelf/book.html

@@ -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>

ram/portal/templates/cards/magazine.html

@@ -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" %}
+            {% if d.get_cover %}
-            <img class="card-img-top" src="{{ d.image.url }}" alt="{{ d }}">
+            <img class="card-img-top" src="{{ d.get_cover.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 %}
             {% 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 }}">

ram/ram/__init__.py

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