Fix a typo

Add modal for pictures
Add support for dark mode
2025-08-07 06:37:50 +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
3 changed files with 37 additions and 6 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>
@@ -176,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/page.html
+++ b/ram/portal/templates/page.html
@@ -15,7 +15,24 @@
        {% 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 %}
--- a/ram/ram/init.py
+++ b/ram/ram/init.py
@@ -1,4 +1,4 @@
 from ram.utils import git_suffix

-__version__ = "0.0.10"
+__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