proxmox-mirrors/pve-manager
1
0
Fork 0
mirror of https://git.proxmox.com/git/pve-manager synced 2025-08-08 12:56:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 52 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
www/manager6/dc/Guests.js
View File

@ -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 class="left-aligned">', '<div>',
'<i class="good fa fa-fw fa-play-circle">&nbsp;</i>', '<div class="left-aligned">',
gettext('Running'), '<i class="good fa fa-fw fa-play-circle">&nbsp;</i>',
gettext('Running'),
'</div>',
'<div class="right-aligned">{running}</div>',
'</div>', '</div>',
'<div class="right-aligned">{running}</div><br />',
'<tpl if="paused &gt; 0">', '<tpl if="paused &gt; 0">',
'<div class="left-aligned">', '<div>',
'<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>', '<div class="left-aligned">',
gettext('Paused'), '<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>',
gettext('Paused'),
'</div>',
'<div class="right-aligned">{paused}</div>',
'</div>', '</div>',
'<div class="right-aligned">{paused}</div><br />',
'</tpl>', '</tpl>',
'<div class="left-aligned">', '<div>',
'<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 class="left-aligned">', '<div class="left-aligned">',
'<i class="fa fa-fw fa-circle-o">&nbsp;</i>', '<i class="faded fa fa-fw fa-stop-circle">&nbsp;</i>',
gettext('Templates'), 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>',
'<div class="right-aligned">{template}</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 class="left-aligned">', '<div>',
'<i class="good fa fa-fw fa-play-circle">&nbsp;</i>', '<div class="left-aligned">',
gettext('Running'), '<i class="good fa fa-fw fa-play-circle">&nbsp;</i>',
gettext('Running'),
'</div>',
'<div class="right-aligned">{running}</div>',
'</div>', '</div>',
'<div class="right-aligned">{running}</div><br />',
'<tpl if="paused &gt; 0">', '<tpl if="paused &gt; 0">',
'<div class="left-aligned">', '<div>',
'<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>', '<div class="left-aligned">',
gettext('Paused'), '<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>',
gettext('Paused'),
'</div>',
'<div class="right-aligned">{paused}</div>',
'</div>', '</div>',
'<div class="right-aligned">{paused}</div><br />',
'</tpl>', '</tpl>',
'<div class="left-aligned">', '<div>',
'<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 class="left-aligned">', '<div class="left-aligned">',
'<i class="fa fa-fw fa-circle-o">&nbsp;</i>', '<i class="faded fa fa-fw fa-stop-circle">&nbsp;</i>',
gettext('Templates'), 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>',
'<div class="right-aligned">{template}</div>',
'</tpl>', '</tpl>',
], ],
}, },