Add support for dark mode

UX improvements
Fix to scale abbr
2025-08-07 06:37:50 +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 · 2022-07-20 21:51:18 +02:00
8 changed files with 56 additions and 37 deletions
--- 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>
-        {% include 'includes/login.html' %}
+          <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
@@ -2,13 +2,14 @@
 {% load markdown %}

      {% block header %}
-        <h1 class="fw-light">{{ consist }}</h1>
-        {% if consist.tags.all %}
-        <p><small>Tags:</small>
-          {% 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>
+      <h1 class="fw-light">{{ consist }}</h1>
+      {% if consist.tags.all %}
+      <p><small>Tags:</small>
+        {% 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 %}
@@ -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,6 +10,7 @@
          {% 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 %}
@@ -76,7 +77,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 +119,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 +167,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
@@ -35,7 +35,7 @@
                </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.9"
+__version__ = "0.0.11"
 __version__ += git_suffix(__file__)
Author	SHA1	Message	Date
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