fix #1414: use table layout instead of columns

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@proxmox.com>
This commit is contained in:
Dominik Csapak 2017-06-14 09:22:23 +02:00 committed by Wolfgang Bumiller
parent 20fdfefad4
commit a237623964
4 changed files with 40 additions and 26 deletions

View File

@ -5,15 +5,23 @@ Ext.define('PVE.dc.Guests', {
title: gettext('Guests'), title: gettext('Guests'),
height: 200, height: 200,
layout: 'column', layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
},
bodyPadding: '0 20 20 20', bodyPadding: '0 20 20 20',
defaults: { defaults: {
columnWidth: 0.5,
xtype: 'box', xtype: 'box',
padding: '0 50 0 50', padding: '0 50 0 50',
style: { style: {
'text-align':'center' 'text-align':'center',
'line-height':'1.2'
} }
}, },
items: [{ items: [{
@ -88,6 +96,7 @@ Ext.define('PVE.dc.Guests', {
] ]
},{ },{
itemId: 'error', itemId: 'error',
colspan: 2,
data: { data: {
num: 0 num: 0
}, },

View File

@ -6,10 +6,13 @@ Ext.define('PVE.dc.Health', {
bodyPadding: '0 20 0 20', bodyPadding: '0 20 0 20',
height: 200, height: 200,
layout: 'column', layout: {
type: 'hbox',
align: 'stretch'
},
defaults: { defaults: {
columnWidth: 0.5, flex: 1,
xtype: 'box', xtype: 'box',
style: { style: {
'text-align':'center' 'text-align':'center'

View File

@ -27,10 +27,10 @@ Ext.define('PVE.dc.Summary', {
xtype: 'panel', xtype: 'panel',
height: 250, height: 250,
bodyPadding: '0 0 10 0', bodyPadding: '0 0 10 0',
layout: 'column', layout: 'hbox',
defaults: { defaults: {
xtype: 'pveGauge', xtype: 'pveGauge',
columnWidth: 1/3 flex: 1
}, },
items:[ items:[
{ {

View File

@ -5,18 +5,19 @@ Ext.define('PVE.node.StatusView', {
height: 300, height: 300,
bodyPadding: '20 15 20 15', bodyPadding: '20 15 20 15',
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
},
defaults: { defaults: {
xtype: 'pveInfoWidget', xtype: 'pveInfoWidget',
padding: '0 15 5 15', 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
}, },
items: [ items: [
@ -30,7 +31,8 @@ Ext.define('PVE.node.StatusView', {
{ {
itemId: 'wait', itemId: 'wait',
title: gettext('IO delay'), title: gettext('IO delay'),
valueField: 'wait' valueField: 'wait',
rowspan: 2
}, },
{ {
itemId: 'load', itemId: 'load',
@ -40,7 +42,7 @@ Ext.define('PVE.node.StatusView', {
}, },
{ {
xtype: 'box', xtype: 'box',
width: 400, colspan: 2,
padding: '0 0 20 0' padding: '0 0 20 0'
}, },
{ {
@ -77,11 +79,12 @@ Ext.define('PVE.node.StatusView', {
}, },
{ {
xtype: 'box', xtype: 'box',
width: 400, colspan: 2,
padding: '0 0 20 0' padding: '0 0 20 0'
}, },
{ {
itemId: 'cpus', itemId: 'cpus',
colspan: 2,
printBar: false, printBar: false,
title: gettext('CPU(s)'), title: gettext('CPU(s)'),
textField: 'cpuinfo', textField: 'cpuinfo',
@ -93,24 +96,23 @@ Ext.define('PVE.node.StatusView', {
gettext('Socket') gettext('Socket')
) + ")"; ) + ")";
}, },
value: '', value: ''
width: 730
}, },
{ {
itemId: 'kversion', itemId: 'kversion',
colspan: 2,
title: gettext('Kernel Version'), title: gettext('Kernel Version'),
printBar: false, printBar: false,
textField: 'kversion', textField: 'kversion',
value: '', value: ''
width: 730
}, },
{ {
itemId: 'version', itemId: 'version',
colspan: 2,
printBar: false, printBar: false,
title: gettext('PVE Manager Version'), title: gettext('PVE Manager Version'),
textField: 'pveversion', textField: 'pveversion',
value: '', value: ''
width: 730
} }
], ],