Hotfix some templates

Support external links and replace font-awesome with bootstrap icons

ram/portal/admin.py

@@ -26,6 +26,7 @@ class SiteConfigurationAdmin(SingletonModelAdmin):
                 "classes": ("collapse",),
                 "fields": (
                     "show_version",
+                    "use_cdn",
                     "extra_head",
                 ),
             },

ram/portal/migrations/0015_siteconfiguration_use_cdn.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.1.5 on 2023-01-03 15:01
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("portal", "0014_siteconfiguration_extra_head"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="siteconfiguration",
+            name="use_cdn",
+            field=models.BooleanField(default=True),
+        ),
+    ]

ram/portal/models.py

@@ -35,6 +35,7 @@ class SiteConfiguration(SingletonModel):
     footer = RichTextField(blank=True)
     footer_extended = RichTextField(blank=True)
     show_version = models.BooleanField(default=True)
+    use_cdn = models.BooleanField(default=True)
     extra_head = models.TextField(blank=True)
 
     class Meta:

ram/portal/static/css/main.css

@@ -11,10 +11,6 @@ a.badge, a.badge:hover {
   color: #fff;
 }
 
-.tab-pane {
-  min-height: 300px;
-}
-
 .img-thumbnail {
   padding: 0;
 }

ram/portal/templates/base.html

@@ -13,9 +13,14 @@
     <meta name="author" content="{{ site_conf.site_author }}">
     <meta name="generator" content="Django Framework">
     <title>{% block title %}{{ title }}{% endblock %} - {{ site_conf.site_name }}</title>
+    {% if site_conf.use_cdn %}
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css" rel="stylesheet">
-    <link href="{% static "css/main.css" %}" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet">
-    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    {% else %}
+    <link href="{% static "bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css" %}" rel="stylesheet">
+    <link href="{% static "bootstrap-icons@1.10.3/font/bootstrap-icons.css" %}" rel="stylesheet">
+    {% endif %}
+    <link href="{% static "css/main.css" %}?v={{ site_conf.version }}" rel="stylesheet">
     <style>
       .bd-placeholder-img {
         font-size: 1.125rem;
@@ -51,7 +56,7 @@
           </a>
           <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>
+            <a id="darkmode-button" class="btn btn-sm btn-outline-dark"><i class="bi bi-moon d-none d-light-inline" title="Switch to dark mode"></i><i class="bi bi-sun d-none d-dark-inline" title="Switch to light mode"></i></a>
          </div>
         </div>
       </div>
@@ -93,9 +98,9 @@
       </section>
       <div class="album py-4 bg-light">
         <div class="container">
-          <a id="rolling-stock"></a>
           {% block carousel %}
           {% endblock %}
+          <a id="rolling-stock"></a>
           {% block cards_layout %}
           {% endblock %}
         </div>
@@ -104,8 +109,13 @@
       {% block extra_content %}{% endblock %}
     </main>
     {% include 'includes/footer.html' %}
+    {% if site_conf.use_cdn %}
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js"></script>
+    {% else %}
+    <script src="{% static "bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" %}"></script>
+    <script src="{% static "bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js" %}"></script>
+    {% endif %}
     <!-- script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script -->
     <script>
       document.querySelector("#darkmode-button").onclick = function(e){

ram/portal/templates/cards.html

@@ -34,7 +34,9 @@
                   </tr>
                   <tr>
                     <th scope="row">Company</th>
-                    <td><abbr title="{{ r.rolling_class.company.extended_name }}">{{ r.rolling_class.company }}</abbr></td>
+                    <td>
+                      <a href="{% url 'filtered' _filter="company" search=r.rolling_class.company %}"><abbr title="{{ r.rolling_class.company.extended_name }}">{{ r.rolling_class.company }}</abbr></a>
+                    </td>
                   </tr>
                   <tr>
                     <th scope="row">Class</th>
@@ -50,7 +52,7 @@
                   </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>
+                    <td>{{ r.manufacturer|default_if_none:"" }}{% if r.manufacturer.website %} <a href="{{ r.manufacturer.website }}" target="_blank"><i class="bi bi-box-arrow-up-right"></i></a>{% endif %}</td>
                   </tr>
                   <tr>
                     <th scope="row">Scale</th>

ram/portal/templates/consist.html

@@ -10,6 +10,19 @@
       <small class="text-muted">Updated {{ consist.updated_time | date:"M d, Y H:i" }}</small>
       {% endif %}
       {% endblock %}
+      {% block carousel %}
+      {% if consist.image %}
+      <div class="row pb-4">
+        <div id="carouselControls" class="carousel carousel-dark slide" data-bs-ride="carousel">
+          <div class="carousel-inner">
+            <div class="carousel-item active">
+              <img src="{{ consist.image.url }}" class="d-block w-100 rounded img-thumbnail" alt="...">
+            </div>
+          </div>
+        </div>
+      </div>
+      {% endif %}
+      {% endblock %}
       {% block cards %}
       {% for r in rolling_stock %}
       <div class="col">
@@ -42,7 +55,9 @@
                 </tr>
                 <tr>
                   <th scope="row">Company</th>
-                  <td><abbr title="{{ r.rolling_stock.rolling_class.company.extended_name }}">{{ r.rolling_stock.rolling_class.company }}</abbr></td>
+                  <td>
+                    <a href="{% url 'filtered' _filter="company" search=r.rolling_stock.rolling_class.company %}"><abbr title="{{ r.rolling_stock.rolling_class.company.extended_name }}">{{ r.rolling_stock.rolling_class.company }}</abbr></a>
+                  </td>
                 </tr>
                 <tr>
                   <th scope="row">Class</th>
@@ -58,7 +73,7 @@
                 </tr>
                 <tr>
                   <th width="35%" scope="row">Manufacturer</th>
-                  <td>{% if r.rolling_stock.manufacturer.website %}<a href="{{ r.rolling_stock.manufacturer.website }}">{% endif %}{{ r.rolling_stock.manufacturer }}{% if r.rolling_stock.manufacturer.website %}</a>{% endif %}</th>
+                  <td>{{ r.rolling_stock.manufacturer|default_if_none:"" }}{% if r.rolling_stock.manufacturer.website %} <a href="{{ r.rolling_stock.manufacturer.website }}" target="_blank"><i class="bi bi-box-arrow-up-right"></i></a>{% endif %}</td>
                 </tr>
                 <tr>
                   <th scope="row">Scale</th>

ram/portal/templates/rollingstock.html

@@ -11,28 +11,30 @@
         <small class="text-muted">Updated {{ rolling_stock.updated_time | date:"M d, Y H:i" }}</small>
         {% endblock %}
         {% block carousel %}
-        <div id="carouselControls" class="carousel carousel-dark slide" data-bs-ride="carousel">
+        <div class="row">
-          <div class="carousel-inner">
+          <div id="carouselControls" class="carousel carousel-dark slide" data-bs-ride="carousel" data-bs-interval="10000">
-            {% for t in rolling_stock.image.all %}
+            <div class="carousel-inner">
-            {% if forloop.first %}
+              {% for t in rolling_stock.image.all %}
-            <div class="carousel-item active">
+              {% if forloop.first %}
-        	{% else %}
+              <div class="carousel-item active">
-            <div class="carousel-item">
+              {% else %}
-            {% endif %}
+              <div class="carousel-item">
-              <img src="{{ t.image.url }}" class="d-block w-100 rounded img-thumbnail" alt="...">
+              {% endif %}
+                <img src="{{ t.image.url }}" class="d-block w-100 rounded img-thumbnail" alt="...">
+              </div>
+              {% endfor %}
             </div>
-            {% endfor %}
+            {% 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>
-          {% 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>
         {% endblock %}
         {% block cards %}
@@ -67,7 +69,9 @@
                       </tr>
                       <tr>
                         <th scope="row">Company</th>
-                        <td><abbr title="{{ rolling_stock.rolling_class.company.extended_name }}">{{ rolling_stock.rolling_class.company }}</abbr></td>
+                        <td>
+                            <a href="{% url 'filtered' _filter="company" search=rolling_stock.rolling_class.company %}"><abbr title="{{ rolling_stock.rolling_class.company.extended_name }}">{{ rolling_stock.rolling_class.company }}</abbr></a>
+                        </td>
                       </tr>
                       <tr>
                         <th scope="row">Class</th>
@@ -92,7 +96,7 @@
                     <tbody>
                       <tr>
                         <th width="35%" scope="row">Manufacturer</th>
-                        <td>{% if rolling_stock.manufacturer.website %}<a href="{{ rolling_stock.manufacturer.website }}">{% endif %}{{ rolling_stock.manufacturer|default_if_none:"" }}{% if rolling_stock.manufacturer.website %}</a>{% endif %}</th>
+                        <td>{{ rolling_stock.manufacturer|default_if_none:"" }}{% if rolling_stock.manufacturer.website %} <a href="{{ rolling_stock.manufacturer.website }}" target="_blank"><i class="bi bi-box-arrow-up-right"></i></a>{% endif %}</td>
                       </tr>
                       <tr>
                         <th scope="row">Scale</th>
@@ -140,7 +144,7 @@
                     <tbody>
                       <tr>
                         <th width="35%" scope="row">Manufacturer</th>
-                        <td>{% if rolling_stock.manufacturer.website %}<a href="{{ rolling_stock.manufacturer.website }}">{% endif %}{{ rolling_stock.manufacturer|default_if_none:"" }}{% if rolling_stock.manufacturer.website %}</a>{% endif %}</th>
+                        <td>{{ rolling_stock.manufacturer|default_if_none:"" }}{% if rolling_stock.manufacturer.website %} <a href="{{ rolling_stock.manufacturer.website }}" target="_blank"><i class="bi bi-box-arrow-up-right"></i></a>{% endif %}</td>
                       </tr>
                       <tr>
                         <th scope="row">Scale</th>
@@ -290,7 +294,7 @@
                     {% for d in rolling_stock.document.all %}
                       <tr>
                         <td>{{ d.description }}</td>
-                        <td><a href="{{ d.file.url }}">{{ d.filename }}</a></td>
+                        <td><a href="{{ d.file.url }}" target="_blank">{{ d.filename }}</a></td>
                         <td class="text-end">{{ d.file.size | filesizeformat }}</td>
                       </tr>
                     {% endfor %}

ram/portal/views.py

@@ -170,7 +170,7 @@ class GetRollingStock(View):
 
         return render(
             request,
-            "page.html",
+            "rollingstock.html",
             {
                 "title": rolling_stock,
                 "rolling_stock": rolling_stock,

ram/ram/__init__.py

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