* [pve-devel] applied: [PATCH 1/2] ui: dc/guests: avoid using <br> for layouting
@ 2021-07-05 10:58 Thomas Lamprecht
2021-07-05 10:58 ` [pve-devel] applied: [PATCH 2/2] ui: dc/guests: set line-height again and increase font-size Thomas Lamprecht
0 siblings, 1 reply; 2+ messages in thread
From: Thomas Lamprecht @ 2021-07-05 10:58 UTC (permalink / raw)
To: pve-devel
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>
---
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
^ permalink raw reply [flat|nested] 2+ messages in thread
* [pve-devel] applied: [PATCH 2/2] ui: dc/guests: set line-height again and increase font-size
2021-07-05 10:58 [pve-devel] applied: [PATCH 1/2] ui: dc/guests: avoid using <br> for layouting Thomas Lamprecht
@ 2021-07-05 10:58 ` Thomas Lamprecht
0 siblings, 0 replies; 2+ messages in thread
From: Thomas Lamprecht @ 2021-07-05 10:58 UTC (permalink / raw)
To: pve-devel
the 14px over 13px is not much, but as that is the font-size intended
for font-awesome it makes it all look nicer together
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
www/manager6/dc/Guests.js | 2 ++
1 file changed, 2 insertions(+)
diff --git a/www/manager6/dc/Guests.js b/www/manager6/dc/Guests.js
index c17843e1..45ea6e04 100644
--- a/www/manager6/dc/Guests.js
+++ b/www/manager6/dc/Guests.js
@@ -21,6 +21,8 @@ Ext.define('PVE.dc.Guests', {
padding: '0 50 0 50',
style: {
'text-align': 'center',
+ 'line-height': '1.5em',
+ 'font-size': '14px',
},
},
items: [
--
2.30.2
^ permalink raw reply [flat|nested] 2+ messages in thread
end of thread, other threads:[~2021-07-05 10:59 UTC | newest]
Thread overview: 2+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2021-07-05 10:58 [pve-devel] applied: [PATCH 1/2] ui: dc/guests: avoid using <br> for layouting Thomas Lamprecht
2021-07-05 10:58 ` [pve-devel] applied: [PATCH 2/2] ui: dc/guests: set line-height again and increase font-size Thomas Lamprecht
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox