From mboxrd@z Thu Jan  1 00:00:00 1970
From: Leo-Andres Hofmann <hofmann@leo-andres.de>
To: development@lists.ipfire.org
Subject: [PATCH 2/3] rrdimage: Add CSS and Javascript to ipfire theme
Date: Thu, 01 Apr 2021 15:35:15 +0200
Message-ID: <20210401133516.1058-2-hofmann@leo-andres.de>
In-Reply-To: <20210401133516.1058-1-hofmann@leo-andres.de>
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="===============8571720400798496687=="
List-Id: <development.lists.ipfire.org>

--===============8571720400798496687==
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: quoted-printable

This patch adds styling for the new graph time range buttons
and loads the Javascript in the HTML head.

Signed-off-by: Leo-Andres Hofmann <hofmann(a)leo-andres.de>
---
 html/html/themes/ipfire/include/css/style.css | 37 +++++++++++++++++--
 html/html/themes/ipfire/include/functions.pl  |  1 +
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes=
/ipfire/include/css/style.css
index 9421fc111..10644a9f8 100644
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -328,7 +328,38 @@ table.fw-nat tbody tr td {
 	height: 2.25em;
 }
=20
-iframe.graph {
-	width: 100%;
-	min-height: 300px;
+/* RRD graph images */
+
+div.rrdimage > ul {
+	list-style-type: none;
+	margin: 0;
+	display: flex;
+	justify-content: center;
+}
+.rrdimage li:not(:first-child)::before {
+	content: "-";
+	padding: 0 0.3em;
+}
+
+.rrdimage button {
+	padding: 0.3em;
+	font-weight: 700;
+	color: #d90000; /* link color */
+	border: none;
+	background: none;
+	cursor: pointer;
+	text-decoration: underline;
+}
+.rrdimage button:focus {
+	outline: none;
+	box-shadow: none;
+}
+.rrdimage button.selected {
+	background-color: rgba(135, 203, 0, 0.2);
+}
+
+div.rrdimage > img {
+	box-sizing: border-box;
+	max-width: 100%;
+	min-height: 290px;
 }
diff --git a/html/html/themes/ipfire/include/functions.pl b/html/html/themes/=
ipfire/include/functions.pl
index 9aec77497..c76af336d 100644
--- a/html/html/themes/ipfire/include/functions.pl
+++ b/html/html/themes/ipfire/include/functions.pl
@@ -128,6 +128,7 @@ print <<END;
 	<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3DUTF-8"/>
 	<link rel=3D"shortcut icon" href=3D"/favicon.ico" />
 	<script type=3D"text/javascript" src=3D"/include/jquery.js"></script>
+	<script src=3D"/include/rrdimage.js"></script>
=20
 	<script type=3D"text/javascript">
 		function swapVisibility(id) {
--=20
2.27.0.windows.1


--===============8571720400798496687==--