RRD graphs: Remove padding around graph images

Message ID 20210711182213.34-1-hofmann@leo-andres.de
State Accepted
Commit 3cc3edeca4254b8bdff0f45c707f65d4f8f757a2
Headers
Series RRD graphs: Remove padding around graph images |

Commit Message

Leo-Andres Hofmann July 11, 2021, 6:22 p.m. UTC
  The images inherited padding from the general design and
have been resized to fit the layout, resulting in blurred graphs.
This removes the padding and shows the graphs in full size.

Fixes: #12657

Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
---
 html/html/themes/ipfire/include/css/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
  

Comments

Michael Tremer July 14, 2021, 4:31 p.m. UTC | #1
Hello,

This looks like a valid fix:

Reviewed-by: Michael Tremer <michael.tremer@ipfire.org>

Would it be a good consideration to render the graphs in SVG format instead? That way they could never be blurry because it is a vector graphic.

Best,
-Michael

> On 11 Jul 2021, at 19:22, Leo-Andres Hofmann <hofmann@leo-andres.de> wrote:
> 
> The images inherited padding from the general design and
> have been resized to fit the layout, resulting in blurred graphs.
> This removes the padding and shows the graphs in full size.
> 
> Fixes: #12657
> 
> Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
> ---
> html/html/themes/ipfire/include/css/style.css | 2 +-
> 1 file changed, 1 insertion(+), 1 deletion(-)
> 
> diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
> index 2c727a770..b92f476c4 100644
> --- a/html/html/themes/ipfire/include/css/style.css
> +++ b/html/html/themes/ipfire/include/css/style.css
> @@ -359,7 +359,7 @@ div.rrdimage > ul {
> }
> 
> div.rrdimage > img {
> -	box-sizing: border-box;
> +	padding: 0;
> 	max-width: 100%;
> 	min-height: 290px;
> }
> -- 
> 2.27.0.windows.1
>
  
Leo-Andres Hofmann July 14, 2021, 8:31 p.m. UTC | #2
Hi Michael,

thank you for reviewing this. I think that's a good idea, I'll give it a try.

Regards
Leo

Am 14.07.2021 um 18:31 schrieb Michael Tremer:
> Hello,
>
> This looks like a valid fix:
>
> Reviewed-by: Michael Tremer <michael.tremer@ipfire.org>
>
> Would it be a good consideration to render the graphs in SVG format instead? That way they could never be blurry because it is a vector graphic.
>
> Best,
> -Michael
>
>> On 11 Jul 2021, at 19:22, Leo-Andres Hofmann <hofmann@leo-andres.de> wrote:
>>
>> The images inherited padding from the general design and
>> have been resized to fit the layout, resulting in blurred graphs.
>> This removes the padding and shows the graphs in full size.
>>
>> Fixes: #12657
>>
>> Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
>> ---
>> html/html/themes/ipfire/include/css/style.css | 2 +-
>> 1 file changed, 1 insertion(+), 1 deletion(-)
>>
>> diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
>> index 2c727a770..b92f476c4 100644
>> --- a/html/html/themes/ipfire/include/css/style.css
>> +++ b/html/html/themes/ipfire/include/css/style.css
>> @@ -359,7 +359,7 @@ div.rrdimage > ul {
>> }
>>
>> div.rrdimage > img {
>> -	box-sizing: border-box;
>> +	padding: 0;
>> 	max-width: 100%;
>> 	min-height: 290px;
>> }
>> -- 
>> 2.27.0.windows.1
>>
  

Patch

diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index 2c727a770..b92f476c4 100644
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -359,7 +359,7 @@  div.rrdimage > ul {
 }
 
 div.rrdimage > img {
-	box-sizing: border-box;
+	padding: 0;
 	max-width: 100%;
 	min-height: 290px;
 }