[pve-devel] applied: [PATCH 1/2] ui: dc/guests: avoid using <br> for layouting

[Thomas Lamprecht]

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 at proxmox.com>
---

best viewed with -w

 www/manager6/dc/Guests.js | 82 ++++++++++++++++++++++++---------------
 1 file changed, 50 insertions(+), 32 deletions(-)

diff --git a/www/manager6/dc/Guests.js b/www/manager6/dc/Guests.js
index df233b6d..c17843e1 100644
--- a/www/manager6/dc/Guests.js
+++ b/www/manager6/dc/Guests.js
@@ -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"> </i>',
-		    gettext('Running'),
+		'<div>',
+		    '<div class="left-aligned">',
+			'<i class="good fa fa-fw fa-play-circle"> </i>',
+			gettext('Running'),
+		    '</div>',
+		    '<div class="right-aligned">{running}</div>',
 		'</div>',
-		'<div class="right-aligned">{running}</div><br />',
 		'<tpl if="paused > 0">',
-		    '<div class="left-aligned">',
-			'<i class="warning fa fa-fw fa-pause-circle"> </i>',
-			gettext('Paused'),
+		    '<div>',
+			'<div class="left-aligned">',
+			    '<i class="warning fa fa-fw fa-pause-circle"> </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"> </i>',
-		    gettext('Stopped'),
+		'<div>',
+		    '<div class="left-aligned">',
+			'<i class="faded fa fa-fw fa-stop-circle"> </i>',
+			gettext('Stopped'),
+		    '</div>',
+		    '<div class="right-aligned">{stopped}</div>',
 		'</div>',
-		'<div class="right-aligned">{stopped}</div><br />',
 		'<tpl if="template > 0">',
-		    '<div class="left-aligned">',
-			'<i class="fa fa-fw fa-circle-o"> </i>',
-			gettext('Templates'),
+		    '<div>',
+			'<div class="left-aligned">',
+			    '<i class="fa fa-fw fa-circle-o"> </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"> </i>',
-		    gettext('Running'),
+		'<div>',
+		    '<div class="left-aligned">',
+			'<i class="good fa fa-fw fa-play-circle"> </i>',
+			gettext('Running'),
+		    '</div>',
+		    '<div class="right-aligned">{running}</div>',
 		'</div>',
-		'<div class="right-aligned">{running}</div><br />',
 		'<tpl if="paused > 0">',
-		    '<div class="left-aligned">',
-			'<i class="warning fa fa-fw fa-pause-circle"> </i>',
-			gettext('Paused'),
+		    '<div>',
+			'<div class="left-aligned">',
+			    '<i class="warning fa fa-fw fa-pause-circle"> </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"> </i>',
-		    gettext('Stopped'),
+		'<div>',
+		    '<div class="left-aligned">',
+			'<i class="faded fa fa-fw fa-stop-circle"> </i>',
+			gettext('Stopped'),
+		    '</div>',
+		    '<div class="right-aligned">{stopped}</div>',
 		'</div>',
-		'<div class="right-aligned">{stopped}</div><br />',
 		'<tpl if="template > 0">',
-		    '<div class="left-aligned">',
-			'<i class="fa fa-fw fa-circle-o"> </i>',
-			gettext('Templates'),
+		    '<div>',
+			'<div class="left-aligned">',
+			    '<i class="fa fa-fw fa-circle-o"> </i>',
+			    gettext('Templates'),
+			'</div>',
+			'<div class="right-aligned">{template}</div>',
 		    '</div>',
-		    '<div class="right-aligned">{template}</div>',
 		'</tpl>',
 	    ],
 	},
-- 
2.30.2