Remove white space

[jimr1]

SYSTEM INFORMATION
OS type and version	Ubuntu Linux 22.04.4
Webmin version	2.111
Virtualmin version	7.10.0
Theme version	21.10:10
Package updates	All installed packages are up to date

I altered the size of the charts trying to get more on the screen in one go

however the container size for the charts appears fixed at 110px in the class .piechart changing the height rule in that class to fit-content fixes the problem when you are using small pie charts but they over bleed the display if you revert to 192 for the chart height

but as you can does not fix the chart label position

[stefan1959]

I had a play, the margin seem to be the issue
make margin-botton: 0;

[jimr1]

Unfortunately it’s a bit more complex than that, i have changed the class and disabled the inline css using !important on the properties of the class, but it does like there is some html work to do wherever that is stored. I’ll have a look for it

[stefan1959]

I actually don’t mind that look, the theme should really adjust for the change in size, maybe use a calc in the css

[jimr1]

What size charts are you using ?

[stefan1959]

110 I think I used.

[jimr1]

I’m using smaller and the problem gets worse the smaller the chart gets

[stefan1959]

Yeah, I tried 90 but the label starts getting to big.

[jimr1]

This was the bestI came up with

[Ilia]

I think we should consider completely removing the option to control pie chart size. Having it just causes more hassle.

Nevertheless, you can manually override the height of the element using theme configuration and a CSS extension, like this:

.piechart {
    height: 75px;
}

[shoulders]

And html if you use jQuery as I have done.

[Ilia]

I don’t follow.

[shoulders]

I was pointing out that for specific customisation to the theme that are particular to one users needs that he could use CSS and jQuery to alter every aspect of the theme. jQuery could be used to directly alter the html and CSS does what it does.

Also I like you can use jQuery for your own stuff in the theme.

[jimr1]

@Ilia

I think we should consider completely removing the option to control pie chart size.

In the end I switched the charts off as they are replicated in the slider which still didn’t give me the space I needed so have hidden the system-info div again for the same reason it’s replicated in the slider. Is there any way to remove accordions from the dashboard but still retain them in the slider ?

[Ilia]

@jimr1

Is there any way to remove accordions from the dashboard but still retain them in the slider ?

Using same theme CSS extension, I think.

[Ilia]

@shoulders

jQuery could be used to directly alter the html and CSS does what it does.

You would need to use the theme API to properly interact with dynamic page updates to alter HTML:

API

[popmay]

I pulled a lot of space from the list below the charts with this code in theme extensions. It could still use work. The piechart theme configuration windows put values in inline css. So can be overridden in Theme Extensions.

/* dashboard - overrides Diameter of charts inline field - removes space */
.piechart {
  margin-top: 0px;
  margin-bottom: 0px;
  width: 110px !important;
  height: 110px !important;
}
.piechart canvas {
  height: 110px !important;
  width: 110px !important;
}
.piechart .percent {
  font-size: 1.9em !important;
  top: 24px !important;
  left: 38px !important;
}
.piechart .label {
  font-size: 8px !important;
  right: -94px !important;
  bottom: -70px !important;
}
/* dashboard - status area - under piecharts */
#system-status .table > thead > tr > td, 
#system-status .table > tbody > tr > td, 
#system-status .table > tfoot > tr > td {
  line-height: 14px;
  font-size: 11px;
  }
#system-status table tr td, 
#content #system-status table tr td {
  padding: 3px 5px 3px 5px !important;
 }
#system-status .table.margined-top-25 {
  margin-top: 10px !important;
 }

/* dashboard - expandable categories - bottom */
.panel-heading {
  padding: 1px 15px 1px 15px;
  }
#extended_sysinfo-1 .panel-title {
  line-height: 18px;
  font-size: 13px !important;
  }
  
/* right sidebar tabs - match left sidebar font size  */
#right-side-tabs.right-side-tabs ul.nav.nav-tabs{
  font-size: 14px !important;
}

[jimr1]

Ok I’ll have a look