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 an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.