mirror of
https://git.proxmox.com/git/pve-manager
synced 2025-08-08 12:56:48 +00:00
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:
parent
6b30714119
commit
f9a7d55d14
@ -32,31 +32,40 @@ Ext.define('PVE.dc.Guests', {
|
|||||||
stopped: 0,
|
stopped: 0,
|
||||||
template: 0,
|
template: 0,
|
||||||
},
|
},
|
||||||
|
cls: 'centered-flex-column',
|
||||||
tpl: [
|
tpl: [
|
||||||
'<h3>' + gettext("Virtual Machines") + '</h3>',
|
'<h3>' + gettext("Virtual Machines") + '</h3>',
|
||||||
|
'<div>',
|
||||||
'<div class="left-aligned">',
|
'<div class="left-aligned">',
|
||||||
'<i class="good fa fa-fw fa-play-circle"> </i>',
|
'<i class="good fa fa-fw fa-play-circle"> </i>',
|
||||||
gettext('Running'),
|
gettext('Running'),
|
||||||
'</div>',
|
'</div>',
|
||||||
'<div class="right-aligned">{running}</div><br />',
|
'<div class="right-aligned">{running}</div>',
|
||||||
|
'</div>',
|
||||||
'<tpl if="paused > 0">',
|
'<tpl if="paused > 0">',
|
||||||
|
'<div>',
|
||||||
'<div class="left-aligned">',
|
'<div class="left-aligned">',
|
||||||
'<i class="warning fa fa-fw fa-pause-circle"> </i>',
|
'<i class="warning fa fa-fw fa-pause-circle"> </i>',
|
||||||
gettext('Paused'),
|
gettext('Paused'),
|
||||||
'</div>',
|
'</div>',
|
||||||
'<div class="right-aligned">{paused}</div><br />',
|
'<div class="right-aligned">{paused}</div>',
|
||||||
|
'</div>',
|
||||||
'</tpl>',
|
'</tpl>',
|
||||||
|
'<div>',
|
||||||
'<div class="left-aligned">',
|
'<div class="left-aligned">',
|
||||||
'<i class="faded fa fa-fw fa-stop-circle"> </i>',
|
'<i class="faded fa fa-fw fa-stop-circle"> </i>',
|
||||||
gettext('Stopped'),
|
gettext('Stopped'),
|
||||||
'</div>',
|
'</div>',
|
||||||
'<div class="right-aligned">{stopped}</div><br />',
|
'<div class="right-aligned">{stopped}</div>',
|
||||||
|
'</div>',
|
||||||
'<tpl if="template > 0">',
|
'<tpl if="template > 0">',
|
||||||
|
'<div>',
|
||||||
'<div class="left-aligned">',
|
'<div class="left-aligned">',
|
||||||
'<i class="fa fa-fw fa-circle-o"> </i>',
|
'<i class="fa fa-fw fa-circle-o"> </i>',
|
||||||
gettext('Templates'),
|
gettext('Templates'),
|
||||||
'</div>',
|
'</div>',
|
||||||
'<div class="right-aligned">{template}</div>',
|
'<div class="right-aligned">{template}</div>',
|
||||||
|
'</div>',
|
||||||
'</tpl>',
|
'</tpl>',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@ -68,31 +77,40 @@ Ext.define('PVE.dc.Guests', {
|
|||||||
stopped: 0,
|
stopped: 0,
|
||||||
template: 0,
|
template: 0,
|
||||||
},
|
},
|
||||||
|
cls: 'centered-flex-column',
|
||||||
tpl: [
|
tpl: [
|
||||||
'<h3>' + gettext("LXC Container") + '</h3>',
|
'<h3>' + gettext("LXC Container") + '</h3>',
|
||||||
|
'<div>',
|
||||||
'<div class="left-aligned">',
|
'<div class="left-aligned">',
|
||||||
'<i class="good fa fa-fw fa-play-circle"> </i>',
|
'<i class="good fa fa-fw fa-play-circle"> </i>',
|
||||||
gettext('Running'),
|
gettext('Running'),
|
||||||
'</div>',
|
'</div>',
|
||||||
'<div class="right-aligned">{running}</div><br />',
|
'<div class="right-aligned">{running}</div>',
|
||||||
|
'</div>',
|
||||||
'<tpl if="paused > 0">',
|
'<tpl if="paused > 0">',
|
||||||
|
'<div>',
|
||||||
'<div class="left-aligned">',
|
'<div class="left-aligned">',
|
||||||
'<i class="warning fa fa-fw fa-pause-circle"> </i>',
|
'<i class="warning fa fa-fw fa-pause-circle"> </i>',
|
||||||
gettext('Paused'),
|
gettext('Paused'),
|
||||||
'</div>',
|
'</div>',
|
||||||
'<div class="right-aligned">{paused}</div><br />',
|
'<div class="right-aligned">{paused}</div>',
|
||||||
|
'</div>',
|
||||||
'</tpl>',
|
'</tpl>',
|
||||||
|
'<div>',
|
||||||
'<div class="left-aligned">',
|
'<div class="left-aligned">',
|
||||||
'<i class="faded fa fa-fw fa-stop-circle"> </i>',
|
'<i class="faded fa fa-fw fa-stop-circle"> </i>',
|
||||||
gettext('Stopped'),
|
gettext('Stopped'),
|
||||||
'</div>',
|
'</div>',
|
||||||
'<div class="right-aligned">{stopped}</div><br />',
|
'<div class="right-aligned">{stopped}</div>',
|
||||||
|
'</div>',
|
||||||
'<tpl if="template > 0">',
|
'<tpl if="template > 0">',
|
||||||
|
'<div>',
|
||||||
'<div class="left-aligned">',
|
'<div class="left-aligned">',
|
||||||
'<i class="fa fa-fw fa-circle-o"> </i>',
|
'<i class="fa fa-fw fa-circle-o"> </i>',
|
||||||
gettext('Templates'),
|
gettext('Templates'),
|
||||||
'</div>',
|
'</div>',
|
||||||
'<div class="right-aligned">{template}</div>',
|
'<div class="right-aligned">{template}</div>',
|
||||||
|
'</div>',
|
||||||
'</tpl>',
|
'</tpl>',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user