[pve-devel] [PATCH manager] fix #1414: use table layout instead of columns

[Dominik Csapak]

columns with fixed widths do not resize correctly in chrome when
resizing or having a different dpi scaling

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/dc/Guests.js       | 15 ++++++++++++---
 www/manager6/dc/Health.js       |  7 +++++--
 www/manager6/dc/Summary.js      |  4 ++--
 www/manager6/node/StatusView.js | 40 +++++++++++++++++++++-------------------
 4 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/www/manager6/dc/Guests.js b/www/manager6/dc/Guests.js
index c0b8023e..56c37e62 100644
--- a/www/manager6/dc/Guests.js
+++ b/www/manager6/dc/Guests.js
@@ -5,15 +5,23 @@ Ext.define('PVE.dc.Guests', {
 
     title: gettext('Guests'),
     height: 200,
-    layout: 'column',
+    layout: {
+	type: 'table',
+	columns: 2,
+	tableAttrs: {
+	    style: {
+		width: '100%'
+	    }
+	}
+    },
     bodyPadding: '0 20 20 20',
 
     defaults: {
-	columnWidth: 0.5,
 	xtype: 'box',
 	padding: '0 50 0 50',
 	style: {
-	    'text-align':'center'
+	    'text-align':'center',
+	    'line-height':'1.2'
 	}
     },
     items: [{
@@ -88,6 +96,7 @@ Ext.define('PVE.dc.Guests', {
 	]
     },{
 	itemId: 'error',
+	colspan: 2,
 	data: {
 	    num: 0
 	},
diff --git a/www/manager6/dc/Health.js b/www/manager6/dc/Health.js
index 61bee69a..a0ac7f14 100644
--- a/www/manager6/dc/Health.js
+++ b/www/manager6/dc/Health.js
@@ -6,10 +6,13 @@ Ext.define('PVE.dc.Health', {
 
     bodyPadding: '0 20 0 20',
     height: 200,
-    layout: 'column',
+    layout: {
+	type: 'hbox',
+	align: 'stretch'
+    },
 
     defaults: {
-	columnWidth: 0.5,
+	flex: 1,
 	xtype: 'box',
 	style: {
 	    'text-align':'center'
diff --git a/www/manager6/dc/Summary.js b/www/manager6/dc/Summary.js
index 041c9143..f93cc950 100644
--- a/www/manager6/dc/Summary.js
+++ b/www/manager6/dc/Summary.js
@@ -27,10 +27,10 @@ Ext.define('PVE.dc.Summary', {
 	    xtype: 'panel',
 	    height: 250,
 	    bodyPadding: '0 0 10 0',
-	    layout: 'column',
+	    layout: 'hbox',
 	    defaults: {
 		xtype: 'pveGauge',
-		columnWidth: 1/3
+		flex: 1
 	    },
 	    items:[
 		{
diff --git a/www/manager6/node/StatusView.js b/www/manager6/node/StatusView.js
index bf59a4de..69932ca1 100644
--- a/www/manager6/node/StatusView.js
+++ b/www/manager6/node/StatusView.js
@@ -5,18 +5,19 @@ Ext.define('PVE.node.StatusView', {
     height: 300,
     bodyPadding: '20 15 20 15',
 
+    layout: {
+	type: 'table',
+	columns: 2,
+	tableAttrs: {
+	    style: {
+		width: '100%'
+	    }
+	}
+    },
+
     defaults: {
 	xtype: 'pveInfoWidget',
-	padding: '0 15 5 15',
-	// default available width on 1920x1080 is
-	// 1545, so we have for one column
-	// ~770px
-	// -10 for padding
-	// -2 for border
-	// -30 for inner padding
-	// = 728px
-	// = 364px per column inside statuspanel
-	width: 364
+	padding: '0 15 5 15'
     },
 
     items: [
@@ -30,7 +31,8 @@ Ext.define('PVE.node.StatusView', {
 	{
 	    itemId: 'wait',
 	    title: gettext('IO delay'),
-	    valueField: 'wait'
+	    valueField: 'wait',
+	    rowspan: 2
 	},
 	{
 	    itemId: 'load',
@@ -40,7 +42,7 @@ Ext.define('PVE.node.StatusView', {
 	},
 	{
 	    xtype: 'box',
-	    width: 400,
+	    colspan: 2,
 	    padding: '0 0 20 0'
 	},
 	{
@@ -77,11 +79,12 @@ Ext.define('PVE.node.StatusView', {
 	},
 	{
 	    xtype: 'box',
-	    width: 400,
+	    colspan: 2,
 	    padding: '0 0 20 0'
 	},
 	{
 	    itemId: 'cpus',
+	    colspan: 2,
 	    printBar: false,
 	    title: gettext('CPU(s)'),
 	    textField: 'cpuinfo',
@@ -93,24 +96,23 @@ Ext.define('PVE.node.StatusView', {
 		    gettext('Socket')
 		) + ")";
 	    },
-	    value: '',
-	    width: 730
+	    value: ''
 	},
 	{
 	    itemId: 'kversion',
+	    colspan: 2,
 	    title: gettext('Kernel Version'),
 	    printBar: false,
 	    textField: 'kversion',
-	    value: '',
-	    width: 730
+	    value: ''
 	},
 	{
 	    itemId: 'version',
+	    colspan: 2,
 	    printBar: false,
 	    title: gettext('PVE Manager Version'),
 	    textField: 'pveversion',
-	    value: '',
-	    width: 730
+	    value: ''
 	}
     ],
 
-- 
2.11.0