rrdimage: Add CSS and Javascript to ipfire theme

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@leo-andres.de>
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index 9421fc111ea612c59c4e59c36e5bc775cc0211ea..10644a9f822d8c0bd026a2d5c921ea992924a13b 100644 (file)
--- 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;
 }
 
-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 9aec77497b886941de0a8213d8408f5c1a38e360..c76af336d3479b2be497ca8e9ea731ad639145da 100644 (file)
--- 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="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="shortcut icon" href="/favicon.ico" />
        <script type="text/javascript" src="/include/jquery.js"></script>
+       <script src="/include/rrdimage.js"></script>
 
        <script type="text/javascript">
                function swapVisibility(id) {