graphs: Add a reveal to zoom into graphs

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/modules/graphs/box.html b/src/templates/modules/graphs/box.html
index f5a82287aacb6ce26a8f5323719522b2e7c08aca..9127fd14475a5e519957669f745bf659fd0d7e1c 100644 (file)
--- a/src/templates/modules/graphs/box.html
+++ b/src/templates/modules/graphs/box.html
@@ -19,12 +19,24 @@
 <div class="tabs-content" data-tabs-content="graph-tabs">
        {% for i, interval in enumerate(intervals) %}
                <div class="tabs-panel {% if i == 0 %}is-active{% end %}" id="{{ interval }}">
-                       <img class="graph" src="{{ graph.make_image_url(interval=interval) }}"
-                               alt="{{ graph.title }}">
+                       <button data-open="graph-{{ interval }}">
+                               <img class="graph" src="{{ graph.make_image_url(interval=interval) }}"
+                                       alt="{{ graph.title }}">
+                       </button>
 
-                       <a class="button small expanded" href="{{ graph.make_image_url(interval=interval, format="pdf") }}">
-                               {{ _("Download") }}
-                       </a>
+                       <div class="large reveal" id="graph-{{ interval }}" data-reveal>
+                               <img class="graph" src="{{ graph.make_image_url(interval=interval) }}"
+                                       alt="{{ graph.title }}">
+
+                               <button class="close-button" data-close aria-label="Close modal" type="button">
+                                       <span aria-hidden="true">&times;</span>
+                               </button>
+
+                               <a class="button small expanded"
+                                               href="{{ graph.make_image_url(interval=interval, format="pdf") }}">
+                                       {{ _("Download") }}
+                               </a>
+                       </div>
                </div>
        {% end %}
 </div>