From: Thomas Lamprecht <t.lamprecht@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] applied: [PATCH 1/2] ui: dc/guests: avoid using <br> for layouting
Date: Mon, 5 Jul 2021 12:58:34 +0200 [thread overview]
Message-ID: <20210705105835.2546065-1-t.lamprecht@proxmox.com> (raw)
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
next reply other threads:[~2021-07-05 10:58 UTC|newest]
Thread overview: 2+ messages / expand[flat|nested] mbox.gz Atom feed top
2021-07-05 10:58 Thomas Lamprecht [this message]
2021-07-05 10:58 ` [pve-devel] applied: [PATCH 2/2] ui: dc/guests: set line-height again and increase font-size Thomas Lamprecht
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20210705105835.2546065-1-t.lamprecht@proxmox.com \
--to=t.lamprecht@proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox