From f717150c8a93006d65e26808ed84f1852357b609 Mon Sep 17 00:00:00 2001 From: Jordi Albert <63541019+jarg1023@users.noreply.github.com> Date: Wed, 20 Jul 2022 09:27:54 +0200 Subject: [PATCH] #15 | Improve loader UI for better UX --- msp/msp/doctype/it_object/it_object.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/msp/msp/doctype/it_object/it_object.js b/msp/msp/doctype/it_object/it_object.js index 00431a7..44fb617 100644 --- a/msp/msp/doctype/it_object/it_object.js +++ b/msp/msp/doctype/it_object/it_object.js @@ -14,7 +14,8 @@ frappe.ui.form.on('IT Object', { --uib-line-weight: 5px; position: relative; - margin: 6rem auto; + margin: 0 auto; + top: 45%; display: flex; align-items: center; justify-content: center; @@ -59,6 +60,17 @@ frappe.ui.form.on('IT Object', { `; const container = document.getElementById('oitc-output'); + + // Set width and height to
parent element and to
grandparent element so relative width and height with % works greate + container.parentElement.parentElement.style.width = '100%'; + container.parentElement.parentElement.style.height = '100%'; + container.parentElement.style.width = '100%'; + container.parentElement.style.height = '90%'; + + // Set this styles to showcase where the information will appear + container.style.width = '100%'; + container.style.height = '100%'; + container.style.background = 'rgba(212, 204, 203, 0.4)'; container.innerHTML = loader; frm.call('get_oitc_host_status_data', {})