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(-)
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; }
-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="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) {