From patchwork Thu Apr 1 13:35:15 2021 Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit X-Patchwork-Submitter: Leo-Andres Hofmann X-Patchwork-Id: 4012 Return-Path: Received: from mail01.ipfire.org (mail01.haj.ipfire.org [172.28.1.202]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature ECDSA (P-384) client-signature ECDSA (P-384)) (Client CN "mail01.haj.ipfire.org", Issuer "R3" (verified OK)) by web04.haj.ipfire.org (Postfix) with ESMTPS id 4FB41w0wqPz3x1r for ; Thu, 1 Apr 2021 13:35:32 +0000 (UTC) Received: from mail02.haj.ipfire.org (mail02.haj.ipfire.org [172.28.1.201]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature ECDSA (P-384) server-digest SHA384 client-signature ECDSA (P-384) client-digest SHA384) (Client CN "mail02.haj.ipfire.org", Issuer "R3" (verified OK)) by mail01.ipfire.org (Postfix) with ESMTPS id 4FB41t3JB0z1T5; Thu, 1 Apr 2021 13:35:30 +0000 (UTC) Received: from mail02.haj.ipfire.org (localhost [127.0.0.1]) by mail02.haj.ipfire.org (Postfix) with ESMTP id 4FB41t23zkz2xfL; Thu, 1 Apr 2021 13:35:30 +0000 (UTC) Received: from mail01.ipfire.org (mail01.haj.ipfire.org [172.28.1.202]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature ECDSA (P-384) client-signature ECDSA (P-384)) (Client CN "mail01.haj.ipfire.org", Issuer "R3" (verified OK)) by mail02.haj.ipfire.org (Postfix) with ESMTPS id 4FB41s682Rz2xPx for ; Thu, 1 Apr 2021 13:35:29 +0000 (UTC) Received: from arche.uberspace.de (arche.uberspace.de [185.26.156.147]) (using TLSv1.2 with cipher ECDHE-ECDSA-AES256-GCM-SHA384 (256/256 bits)) (Client did not present a certificate) by mail01.ipfire.org (Postfix) with ESMTPS id 4FB41s2hlyz1Kf for ; Thu, 1 Apr 2021 13:35:29 +0000 (UTC) Received: (qmail 10548 invoked from network); 1 Apr 2021 13:35:28 -0000 Received: from localhost (HELO localhost) (127.0.0.1) by arche.uberspace.de with SMTP; 1 Apr 2021 13:35:28 -0000 From: Leo-Andres Hofmann To: development@lists.ipfire.org Subject: [PATCH 2/3] rrdimage: Add CSS and Javascript to ipfire theme Date: Thu, 1 Apr 2021 15:35:15 +0200 Message-Id: <20210401133516.1058-2-hofmann@leo-andres.de> X-Mailer: git-send-email 2.27.0.windows.1 In-Reply-To: <20210401133516.1058-1-hofmann@leo-andres.de> References: <20210401133516.1058-1-hofmann@leo-andres.de> MIME-Version: 1.0 ARC-Message-Signature: i=1; a=rsa-sha256; c=relaxed/relaxed; d=lists.ipfire.org; s=202003rsa; t=1617284129; h=from:from:reply-to:subject:subject:date:date:message-id:message-id: to:to:cc:mime-version:mime-version: content-transfer-encoding:content-transfer-encoding: in-reply-to:in-reply-to:references:references; bh=JZ3199Oim4TujbIaQQlExZPppn3zTktIB8zkjvvK3yM=; b=RZ45LrJRtckHfnnMZpX8H59I+PIVdK+3iaR5qq6bwWD8J2rhlgfAS9p6McBqqSVwaF95qC wbHRRUixH2qme60A2/3DyRspblT12uhiKSSeTMTn7a+3FO0YbGdGoGChcV7x+grTd1L6uF PJCbR3VVfK7h27sCqvlPxh0fhojDgOgDwDL0gbAE9ETvxurGsk8k/bF+K7Vld3w4lt+C1d fH+Mxv2vbF9a4rSoHTPuo59ShBm3J4EeU6KpuXb5SeIP+sPT050Kj+9jleSlLf325zZSHA 4kL0GFxTJZlhRFG1AqQYLmnogb5aTXJtQAxXO70zTKOP73cBefpyfsY35nZhcg== ARC-Seal: i=1; s=202003rsa; d=lists.ipfire.org; t=1617284129; a=rsa-sha256; cv=none; b=YzocF/gOYzHhD0LAYKzWIMlvtmTKmFYbFIoQQyMuKGE/BkxKyhgsVMT7FOEfmCYRyDFP6p Bb3wzcfnqWfZauaI842mc8soXwvsIOwLmaJVTLmapkdR0FW+zM4SS6pWNJHXY2EyEhJAUz sOpGH4640fYuI2Y//20ejKIjI6e9claB3UiM5m8eG7TlTvW03b/5qTCOO9u9klWo6m0Hji q5fTWryX12RlUMZ47vwDyYKF2rekaiqu29LX0+9DxZWosKUOcYYTT15JN4UxAGHwiQdcVT 3UgkzWmPYtZ4LUhzPKWmX+AJJrEVfzgd9/Oq9NWNsML+vDkQ8yBVR7eIwMNtnw== ARC-Authentication-Results: i=1; mail01.ipfire.org; dkim=none; spf=pass (mail01.ipfire.org: domain of hofmann@leo-andres.de designates 185.26.156.147 as permitted sender) smtp.mailfrom=hofmann@leo-andres.de X-Rspamd-Queue-Id: 4FB41s2hlyz1Kf Authentication-Results: mail01.ipfire.org; dkim=none; dmarc=none; spf=pass (mail01.ipfire.org: domain of hofmann@leo-andres.de designates 185.26.156.147 as permitted sender) smtp.mailfrom=hofmann@leo-andres.de X-Rspamd-Server: mail01.haj.ipfire.org X-Spamd-Result: default: False [2.96 / 11.00]; RCVD_TLS_LAST(0.00)[]; ARC_NA(0.00)[]; R_SPF_ALLOW(-0.20)[+mx]; FROM_HAS_DN(0.00)[]; R_MISSING_CHARSET(2.50)[]; TO_MATCH_ENVRCPT_ALL(0.00)[]; TO_DN_NONE(0.00)[]; BROKEN_CONTENT_TYPE(1.50)[]; RCPT_COUNT_ONE(0.00)[1]; ARC_SIGNED(0.00)[lists.ipfire.org:s=202003rsa:i=1]; IP_REPUTATION_HAM(-2.04)[asn: 205766(-0.29), country: DE(-0.01), ip: 185.26.156.147(-0.73)]; MID_CONTAINS_FROM(1.00)[]; MIME_HTML_ONLY(0.20)[]; DMARC_NA(0.00)[leo-andres.de]; FROM_EQ_ENVFROM(0.00)[]; R_DKIM_NA(0.00)[]; MIME_TRACE(0.00)[0:~]; ASN(0.00)[asn:205766, ipnet:185.26.156.0/24, country:DE]; RCVD_COUNT_TWO(0.00)[2] X-BeenThere: development@lists.ipfire.org X-Mailman-Version: 2.1.29 Precedence: list List-Id: IPFire development talk List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: development-bounces@lists.ipfire.org Sender: "Development" 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 --- 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 < +