dani/django-ram
1
0
Fork 0
mirror of https://github.com/daniviga/django-ram.git synced 2025-08-04 13:17:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Replace thumbnails with carousels in rolling stock pages (#15)

Browse Source 
* Replace thumbnails with carousels in rolling stock pages

* Add consist data and notes in page
This commit is contained in:
Daniele Viganò
2023-01-03 01:32:16 +01:00
committed by GitHub
parent e45d11d4b1
commit 68a18fcf58
11 changed files with 201 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
ram/portal/templates/page.html
View File

@@ -10,29 +10,32 @@
{% endif %}
<small class="text-muted">Updated {{ rolling_stock.updated_time | date:"M d, Y H:i" }}</small>
{% endblock %}
{% block cards %}
{% for t in rolling_stock.image.all %}
<div class="col">
<a href="" data-bs-toggle="modal" data-bs-target="#pictureModal{{ forloop.counter }}"><img class="img-thumbnail" src="{{ t.image.url }}" alt="Rolling stock image"></a>
</div>
<!-- Modal -->
<div class="modal fade" id="pictureModal{{ forloop.counter }}" tabindex="-1" aria-labelledby="pictureModalLabel{{ forloop.counter }}" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="pictureModalLabel{{ forloop.counter }}">{{ rolling_stock }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center">
<img class="rounded img-fluid" src="{{ t.image.url }}" alt="Rolling stock image">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
{% block carousel %}
<div id="carouselControls" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-inner">
{% for t in rolling_stock.image.all %}
{% if forloop.first %}
<div class="carousel-item active">
{% else %}
<div class="carousel-item">
{% endif %}
<img src="{{ t.image.url }}" class="d-block w-100 rounded img-thumbnail" alt="...">
</div>
{% endfor %}
</div>
{% if rolling_stock.image.count > 1 %}
<button class="carousel-control-prev" type="button" data-bs-target="#carouselControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
{% endif %}
</div>
{% endfor %}
{% endblock %}
{% block cards %}
{% endblock %}
{% block extra_content %}
<section class="py-4 text-start container">
@@ -263,7 +266,18 @@
</table>
</div>
<div class="tab-pane fade" id="nav-notes" role="tabpanel" aria-labelledby="nav-notes-tab">
{{ rolling_stock.notes | safe }}
<table class="table">
<thead>
<tr>
<th scope="row">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ rolling_stock.notes | safe }}</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="nav-documents" role="tabpanel" aria-labelledby="nav-documents-tab">
<table class="table table-striped">