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

* Replace thumbnails with carousels in rolling stock pages

* Add consist data and notes in page
This commit is contained in:
2023-01-03 01:32:16 +01:00
committed by GitHub
parent e45d11d4b1
commit 68a18fcf58
11 changed files with 201 additions and 137 deletions

View File

@@ -49,7 +49,7 @@
</svg>
<strong>{{ site_conf.site_name }}</strong>
</a>
<div class="btn-group" role="group" aria-label="Basic example">
<div class="btn-group" role="group" aria-label="Login menu">
{% include 'includes/login.html' %}
<a id="darkmode-button" class="btn btn-sm btn-outline-dark"><i class="fa fa-moon-o fa-fw d-none d-light-inline" title="Switch to dark mode"></i><i class="fa fa-sun-o fa-fw d-none d-dark-inline" title="Switch to light mode"></i></a>
</div>
@@ -94,96 +94,10 @@
<div class="album py-4 bg-light">
<div class="container">
<a id="rolling-stock"></a>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
{% block cards %}
{% for r in rolling_stock %}
<div class="col">
<div class="card shadow-sm">
{% for i in r.image.all %}
{% if forloop.first %}<a href="{{r.get_absolute_url}}"><img src="{{ i.image.url }}" alt="Card image cap"></a>{% endif %}
{% endfor %}
<div class="card-body">
<p class="card-text" style="position: relative;">
<strong>{{ r }}</strong>
<a class="stretched-link" href="{{ r.get_absolute_url }}"></a>
</p>
{% if r.tags.all %}
<p class="card-text"><small>Tags:</small>
{% for t in r.tags.all %}<a href="{% url 'filtered' _filter="tag" search=t.slug %}" class="badge rounded-pill bg-primary">
{{ t.name }}</a>{# new line is required #}
{% endfor %}
</p>
{% endif %}
<table class="table table-striped">
<thead>
<tr>
<th colspan="2" scope="row">Data</th>
</tr>
</thead>
<tbody>
<tr>
<th width="35%" scope="row">Type</th>
<td>{{ r.rolling_class.type }}</td>
</tr>
<tr>
<th scope="row">Company</th>
<td><abbr title="{{ r.rolling_class.company.extended_name }}">{{ r.rolling_class.company }}</abbr></td>
</tr>
<tr>
<th scope="row">Class</th>
<td>{{ r.rolling_class.identifier }}</td>
</tr>
<tr>
<th scope="row">Road number</th>
<td>{{ r.road_number }}</td>
</tr>
<tr>
<th scope="row">Era</th>
<td>{{ r.era }}</td>
</tr>
<tr>
<th width="35%" scope="row">Manufacturer</th>
<td>{% if r.manufacturer.website %}<a href="{{ r.manufacturer.website }}">{% endif %}{{ r.manufacturer }}{% if r.manufacturer.website %}</a>{% endif %}</th>
</tr>
<tr>
<th scope="row">Scale</th>
<td><a href="{% url 'filtered' _filter="scale" search=r.scale %}"><abbr title="{{ r.scale.ratio }} - {{ r.scale.tracks }}">{{ r.scale }}</abbr></a></td>
</tr>
<tr>
<th scope="row">SKU</th>
<td>{{ r.sku }}</td>
</tr>
</tbody>
</table>
{% if r.decoder %}
<table class="table table-striped">
<thead>
<tr>
<th colspan="2" scope="row">DCC data</th>
</tr>
</thead>
<tbody>
<tr>
<th width="35%" scope="row">Decoder</th>
<td>{{ r.decoder }}</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>{{ r.address }}</td>
</tr>
</tbody>
</table>
{% endif %}
<div class="d-grid gap-2 mb-1 d-md-block">
<a class="btn btn-sm btn-outline-primary" href="{{r.get_absolute_url}}">Show all data</a>
{% if request.user.is_staff %}<a class="btn btn-sm btn-outline-danger" href="{% url 'admin:roster_rollingstock_change' r.pk %}">Edit</a>{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
</div>
{% block carousel %}
{% endblock %}
{% block cards_layout %}
{% endblock %}
</div>
<div class="container">{% block pagination %}{% endblock %}</div>
</div>