From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 1 Dec 2021 22:34:21 +0000 (+0000)
Subject: graphs: Add a reveal to zoom into graphs
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=a5918d78c0b83855ae8b0d26bf1bc1abe4ba9918;p=people%2Fms%2Fwestferry.git

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 f5a8228..9127fd1 100644
--- 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>