Fix a typo

Add modal for pictures
Add support for dark mode
2025-08-07 14:47:49 +02:00 · 2022-07-23 16:15:56 +02:00 · 2022-07-23 11:58:17 +02:00 · 2022-07-22 22:39:02 +02:00 · 2022-07-21 23:01:34 +02:00 · 2022-07-21 22:11:17 +02:00
13 changed files with 138 additions and 43 deletions
--- a/ram/metadata/admin.py
+++ b/ram/metadata/admin.py
@@ -27,8 +27,8 @@ class DecoderAdmin(admin.ModelAdmin):

@admin.register(Scale)
 class ScaleAdmin(admin.ModelAdmin):
-    list_display = ("scale", "ratio", "gauge")
-    list_filter = ("ratio", "gauge")
+    list_display = ("scale", "ratio", "gauge", "tracks")
+    list_filter = ("ratio", "gauge", "tracks")
    search_fields = list_display


--- a/ram/metadata/migrations/0005_rename_gauge_scale_track.py
+++ b/ram/metadata/migrations/0005_rename_gauge_scale_track.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.0.6 on 2022-07-18 21:40
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('metadata', '0004_alter_rollingstocktype_options_and_more'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='scale',
+            old_name='gauge',
+            new_name='track',
+        ),
+    ]
--- a/ram/metadata/migrations/0006_scale_gauge.py
+++ b/ram/metadata/migrations/0006_scale_gauge.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.0.6 on 2022-07-18 21:41
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('metadata', '0005_rename_gauge_scale_track'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='scale',
+            name='gauge',
+            field=models.CharField(blank=True, max_length=16),
+        ),
+    ]
--- a/ram/metadata/migrations/0007_rename_track_scale_tracks.py
+++ b/ram/metadata/migrations/0007_rename_track_scale_tracks.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.0.6 on 2022-07-18 21:44
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('metadata', '0006_scale_gauge'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='scale',
+            old_name='track',
+            new_name='tracks',
+        ),
+    ]
--- a/ram/metadata/models.py
+++ b/ram/metadata/models.py
@@ -85,6 +85,7 @@ class Scale(models.Model):
    scale = models.CharField(max_length=32, unique=True)
    ratio = models.CharField(max_length=16, blank=True)
    gauge = models.CharField(max_length=16, blank=True)
+    tracks = models.CharField(max_length=16, blank=True)

    class Meta:
        ordering = ["scale"]
--- a/ram/portal/templates/base.html
+++ b/ram/portal/templates/base.html
@@ -8,12 +8,14 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
    <meta name="description" content="{{ site_conf.about}}">
    <meta name="author" content="{{ site_conf.site_author }}">
    <meta name="generator" content="Django Framework">
    <title>{{ site_conf.site_name }}</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <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://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
@@ -22,12 +24,15 @@
        -moz-user-select: none;
        user-select: none;
      }
-
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
+      .d-light-inline { display: inline !important; }
+      .d-dark-inline { display: none !important; }
+      html.dark .d-light-inline { display: none !important; }
+      html.dark .d-dark-inline { display: inline !important; }
    </style>
  </head>
  <body>
@@ -40,7 +45,10 @@
            </svg>
            <strong>{{ site_conf.site_name }}</strong>
          </a>
+          <div class="btn-group" role="group" aria-label="Basic example">
            {% 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>
        </div>
      </div>
    </header>
@@ -132,7 +140,7 @@
                      </tr>
                      <tr>
                        <th scope="row">Scale</th>
-                        <td><a href="{% url 'filtered' _filter="scale" search=r.scale %}"><abbr title="{{ r.scale.ratio }} - {{ r.scale.gauge }}">{{ r.scale }}</abbr></a></td>
+                        <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>
@@ -159,13 +167,10 @@
                    </tbody>
                  </table>
                  {% endif %}
-                  <div class="btn-group mb-4">
+                  <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 class="d-flex justify-content-between align-items-center">
-                    <small class="text-muted">Updated {{ r.updated_time | date:"M d, Y H:m" }}</small>
-                  </div>
                </div>
              </div>
            </div>
@@ -179,6 +184,12 @@
    </main>
    {% include 'includes/footer.html' %}
    <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/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js"></script>
+    <!-- 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){
+        darkmode.toggleDarkMode();
+      }
+    </script>
  </body>
 </html>
--- a/ram/portal/templates/companies.html
+++ b/ram/portal/templates/companies.html
@@ -45,7 +45,7 @@
               {% endif %}
              </tbody>
            </table>
-            <div class="btn-group mb-4">
+            <div class="d-grid gap-2 mb-1 d-md-block">
              <a class="btn btn-sm btn-outline-primary" href="{% url 'filtered' _filter="company" search=c %}">Show all rolling stock</a>
              {% if request.user.is_staff %}<a class="btn btn-sm btn-outline-danger" href="{% url 'admin:metadata_company_change' c.pk %}">Edit</a>{% endif %}
            </div>
--- a/ram/portal/templates/consist.html
+++ b/ram/portal/templates/consist.html
@@ -5,10 +5,11 @@
      <h1 class="fw-light">{{ consist }}</h1>
      {% if consist.tags.all %}
      <p><small>Tags:</small>
-         {% for t in consist.tags.all %}<span class="badge bg-primary">
-          {{ t.name }}</span>{# new line is required #}
+        {% for t in consist.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>
+      <small class="text-muted">Updated {{ consist.updated_time | date:"M d, Y H:i" }}</small>
      {% endif %}
      {% endblock %}
      {% block cards %}
@@ -25,8 +26,8 @@
            </p>
            {% if r.rolling_stock.tags.all %}
            <p class="card-text"><small>Tags:</small>
-             {% for t in r.rolling_stock.tags.all %}<span class="badge bg-primary">
-              {{ t.name }}</span>{# new line is required #}
+              {% for t in r.rolling_stock.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 %}
@@ -63,7 +64,7 @@
                </tr>
                <tr>
                  <th scope="row">Scale</th>
-                  <td><a href="{% url 'filtered' _filter="scale" search=r.rolling_stock.scale %}"><abbr title="{{ r.rolling_stock.scale.ratio }} - {{ r.rolling_stock.scale.gauge }}">{{ r.rolling_stock.scale }}</abbr></a></td>
+                  <td><a href="{% url 'filtered' _filter="scale" search=r.rolling_stock.scale %}"><abbr title="{{ r.rolling_stock.scale.ratio }} - {{ r.rolling_stock.scale.tracks }}">{{ r.rolling_stock.scale }}</abbr></a></td>
                </tr>
                <tr>
                  <th scope="row">SKU</th>
@@ -90,13 +91,10 @@
                </tbody>
              </table>
            {% endif %}
-            <div class="btn-group mb-4">
+            <div class="d-grid gap-2 mb-1 d-md-block">
             <a class="btn btn-sm btn-outline-primary" href="{{r.rolling_stock.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.rolling_stock.pk %}">Edit</a>{% endif %}
            </div>
-            <div class="d-flex justify-content-between align-items-center">
-              <small class="text-muted">Updated {{ r.rolling_stock.updated_time | date:"M d, Y H:m" }}</small>
-            </div>
          </div>
        </div>
      </div>
--- a/ram/portal/templates/consists.html
+++ b/ram/portal/templates/consists.html
@@ -48,13 +48,10 @@
                </tr>
              </tbody>
            </table>
-            <div class="btn-group mb-4">
+            <div class="d-grid gap-2 mb-1 d-md-block">
             <a class="btn btn-sm btn-outline-primary" href="{{ c.get_absolute_url }}">Show all data</a>
              {% if request.user.is_staff %}<a class="btn btn-sm btn-outline-danger" href="{% url 'admin:consist_consist_change' c.pk %}">Edit</a>{% endif %}
            </div>
-            <div class="d-flex justify-content-between align-items-center">
-              <small class="text-muted">Updated {{ c.updated_time | date:"M d, Y H:m" }}</small>
-            </div>
          </div>
        </div>
      </div>
--- a/ram/portal/templates/page.html
+++ b/ram/portal/templates/page.html
@@ -10,11 +10,29 @@
          {% endfor %}
        </p>
        {% 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">
-          <img class="img-thumbnail" src="{{ t.image.url }}" alt="Rolling stock image">
+            <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>
+            </div>
+          </div>
        </div>
        {% endfor %}
        {% endblock %}
@@ -76,7 +94,7 @@
                      </tr>
                      <tr>
                        <th scope="row">Scale</th>
-                        <td><a href="{% url 'filtered' _filter="scale" search=rolling_stock.scale %}"><abbr title="{{ rolling_stock.scale.ratio }} - {{ rolling_stock.scale.gauge }}">{{ rolling_stock.scale }}</abbr></a></td>
+                        <td><a href="{% url 'filtered' _filter="scale" search=rolling_stock.scale %}"><abbr title="{{ rolling_stock.scale.ratio }} - {{ rolling_stock.scale.tracks }}">{{ rolling_stock.scale }}</abbr></a></td>
                      </tr>
                      <tr>
                        <th scope="row">SKU</th>
@@ -118,7 +136,7 @@
                      </tr>
                      <tr>
                        <th scope="row">Scale</th>
-                        <td><abbr title="{{ rolling_stock.scale.ratio }} - {{ rolling_stock.scale.gauge }}">{{ rolling_stock.scale }}</abbr></td>
+                        <td><abbr title="{{ rolling_stock.scale.ratio }} - {{ rolling_stock.scale.tracks }}">{{ rolling_stock.scale }}</abbr></td>
                      </tr>
                      <tr>
                        <th scope="row">SKU</th>
@@ -166,7 +184,7 @@
                    <tbody>
                      <tr>
                        <th width="35%" scope="row">Class</th>
-                        <td>{{ rolling_stock.rolling_class }}</td>
+                        <td>{{ rolling_stock.rolling_class.identifier }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Type</th>
--- a/ram/portal/templates/scales.html
+++ b/ram/portal/templates/scales.html
@@ -29,9 +29,13 @@
                  <th width="35%" scope="row">Gauge</th>
                  <td>{{ s.gauge }}</td>
                </tr>
+                <tr>
+                  <th width="35%" scope="row">Tracks</th>
+                  <td>{{ s.tracks }}</td>
+                </tr>
              </tbody>
            </table>
-            <div class="btn-group mb-4">
+            <div class="d-grid gap-2 mb-1 d-md-block">
              <a class="btn btn-sm btn-outline-primary" href="{% url 'filtered' _filter="scale" search=s %}">Show all rolling stock</a>
              {% if request.user.is_staff %}<a class="btn btn-sm btn-outline-danger" href="{% url 'admin:metadata_scale_change' s.pk %}">Edit</a>{% endif %}
            </div>
--- a/ram/portal/views.py
+++ b/ram/portal/views.py
@@ -38,7 +38,9 @@ class GetHome(View):

        paginator = Paginator(rolling_stock, site_conf.items_per_page)
        rolling_stock = paginator.get_page(page)
-        page_range = paginator.get_elided_page_range(rolling_stock.number)
+        page_range = paginator.get_elided_page_range(
+            rolling_stock.number, on_each_side=2, on_ends=1
+        )

        return render(
            request,
@@ -86,7 +88,9 @@ class GetHomeFiltered(View):

        paginator = Paginator(rolling_stock, site_conf.items_per_page)
        rolling_stock = paginator.get_page(page)
-        page_range = paginator.get_elided_page_range(rolling_stock.number)
+        page_range = paginator.get_elided_page_range(
+            rolling_stock.number, on_each_side=2, on_ends=1
+        )

        return rolling_stock, matches, page_range

@@ -166,7 +170,9 @@ class Consists(View):

        paginator = Paginator(consist, site_conf.items_per_page)
        consist = paginator.get_page(page)
-        page_range = paginator.get_elided_page_range(consist.number)
+        page_range = paginator.get_elided_page_range(
+            consist.number, on_each_side=2, on_ends=1
+        )

        return render(
            request,
@@ -186,7 +192,9 @@ class GetConsist(View):

        paginator = Paginator(rolling_stock, site_conf.items_per_page)
        rolling_stock = paginator.get_page(page)
-        page_range = paginator.get_elided_page_range(rolling_stock.number)
+        page_range = paginator.get_elided_page_range(
+            rolling_stock.number, on_each_side=2, on_ends=1
+        )

        return render(
            request,
@@ -206,7 +214,9 @@ class Companies(View):

        paginator = Paginator(company, site_conf.items_per_page)
        company = paginator.get_page(page)
-        page_range = paginator.get_elided_page_range(company.number)
+        page_range = paginator.get_elided_page_range(
+            company.number, on_each_side=2, on_ends=1
+        )

        return render(
            request,
@@ -222,7 +232,9 @@ class Scales(View):

        paginator = Paginator(scale, site_conf.items_per_page)
        scale = paginator.get_page(page)
-        page_range = paginator.get_elided_page_range(scale.number)
+        page_range = paginator.get_elided_page_range(
+            scale.number, on_each_side=2, on_ends=1
+        )

        return render(
            request,
--- a/ram/ram/init.py
+++ b/ram/ram/init.py
@@ -1,4 +1,4 @@
 from ram.utils import git_suffix

-__version__ = "0.0.8"
+__version__ = "0.0.12"
 __version__ += git_suffix(__file__)
Author	SHA1	Message	Date
Daniele Viganò	97254b302c	Fix a typo	2022-07-23 16:15:56 +02:00
Daniele Viganò	b8aa34ce1d	Add modal for pictures	2022-07-23 11:58:17 +02:00
Daniele Viganò	e023edbeeb	Add support for dark mode	2022-07-22 22:39:02 +02:00
Daniele Viganò	c9c8976c60	UX improvements	2022-07-21 23:01:34 +02:00
Daniele Viganò	5765472704	Fix to scale abbr	2022-07-21 22:11:17 +02:00
Daniele Viganò	4fb9d1903f	Reduce elided_page_range	2022-07-20 21:51:18 +02:00
Daniele Viganò	63379c9673	Expose tracks	2022-07-18 23:45:13 +02:00
Daniele Viganò	be6a685f55	Gauge vs track	2022-07-18 23:41:47 +02:00