[2/3] rrdimage: Add CSS and Javascript to ipfire theme
Commit Message
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>
---
html/html/themes/ipfire/include/css/style.css | 37 +++++++++++++++++--
html/html/themes/ipfire/include/functions.pl | 1 +
2 files changed, 35 insertions(+), 3 deletions(-)
@@ -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;
}
@@ -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) {