ui: dc/guests: avoid using <br> for layouting

use a flex box with centered columns instead, that needs adding a div
per row, but that's IMO actually making it more clear what a row is
anyway.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
This commit is contained in:
Thomas Lamprecht 2021-07-05 12:55:39 +02:00
parent 6b30714119
commit f9a7d55d14

View File

@ -32,31 +32,40 @@ Ext.define('PVE.dc.Guests', {
stopped: 0,
template: 0,
},
cls: 'centered-flex-column',
tpl: [
'<h3>' + gettext("Virtual Machines") + '</h3>',
'<div class="left-aligned">',
'<i class="good fa fa-fw fa-play-circle">&nbsp;</i>',
gettext('Running'),
'<div>',
'<div class="left-aligned">',
'<i class="good fa fa-fw fa-play-circle">&nbsp;</i>',
gettext('Running'),
'</div>',
'<div class="right-aligned">{running}</div>',
'</div>',
'<div class="right-aligned">{running}</div><br />',
'<tpl if="paused &gt; 0">',
'<div class="left-aligned">',
'<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>',
gettext('Paused'),
'<div>',
'<div class="left-aligned">',
'<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>',
gettext('Paused'),
'</div>',
'<div class="right-aligned">{paused}</div>',
'</div>',
'<div class="right-aligned">{paused}</div><br />',
'</tpl>',
'<div class="left-aligned">',
'<i class="faded fa fa-fw fa-stop-circle">&nbsp;</i>',
gettext('Stopped'),
'</div>',
'<div class="right-aligned">{stopped}</div><br />',
'<tpl if="template &gt; 0">',
'<div>',
'<div class="left-aligned">',
'<i class="fa fa-fw fa-circle-o">&nbsp;</i>',
gettext('Templates'),
'<i class="faded fa fa-fw fa-stop-circle">&nbsp;</i>',
gettext('Stopped'),
'</div>',
'<div class="right-aligned">{stopped}</div>',
'</div>',
'<tpl if="template &gt; 0">',
'<div>',
'<div class="left-aligned">',
'<i class="fa fa-fw fa-circle-o">&nbsp;</i>',
gettext('Templates'),
'</div>',
'<div class="right-aligned">{template}</div>',
'</div>',
'<div class="right-aligned">{template}</div>',
'</tpl>',
],
},
@ -68,31 +77,40 @@ Ext.define('PVE.dc.Guests', {
stopped: 0,
template: 0,
},
cls: 'centered-flex-column',
tpl: [
'<h3>' + gettext("LXC Container") + '</h3>',
'<div class="left-aligned">',
'<i class="good fa fa-fw fa-play-circle">&nbsp;</i>',
gettext('Running'),
'<div>',
'<div class="left-aligned">',
'<i class="good fa fa-fw fa-play-circle">&nbsp;</i>',
gettext('Running'),
'</div>',
'<div class="right-aligned">{running}</div>',
'</div>',
'<div class="right-aligned">{running}</div><br />',
'<tpl if="paused &gt; 0">',
'<div class="left-aligned">',
'<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>',
gettext('Paused'),
'<div>',
'<div class="left-aligned">',
'<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>',
gettext('Paused'),
'</div>',
'<div class="right-aligned">{paused}</div>',
'</div>',
'<div class="right-aligned">{paused}</div><br />',
'</tpl>',
'<div class="left-aligned">',
'<i class="faded fa fa-fw fa-stop-circle">&nbsp;</i>',
gettext('Stopped'),
'</div>',
'<div class="right-aligned">{stopped}</div><br />',
'<tpl if="template &gt; 0">',
'<div>',
'<div class="left-aligned">',
'<i class="fa fa-fw fa-circle-o">&nbsp;</i>',
gettext('Templates'),
'<i class="faded fa fa-fw fa-stop-circle">&nbsp;</i>',
gettext('Stopped'),
'</div>',
'<div class="right-aligned">{stopped}</div>',
'</div>',
'<tpl if="template &gt; 0">',
'<div>',
'<div class="left-aligned">',
'<i class="fa fa-fw fa-circle-o">&nbsp;</i>',
gettext('Templates'),
'</div>',
'<div class="right-aligned">{template}</div>',
'</div>',
'<div class="right-aligned">{template}</div>',
'</tpl>',
],
},