From 59603b550e936c99b0eecb2809d2a5bb7f377b97 Mon Sep 17 00:00:00 2001
From: David Richardson <david.richardson@enquora.com>
Date: Fri, 20 Nov 2020 00:22:45 -0700
Subject: [PATCH] =?UTF-8?q?Fixed:=20"Loading=E2=80=A6"=20animation=20using?=
 =?UTF-8?q?=20modern=20layout=20(#2953)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Correct vertical alignment in all modern browsers. IE no longer a target.
---
 .../Templates/Application/index-debug.html      | 17 +++++++++++------
 .../Resources/Templates/Application/index.html  | 17 +++++++++++------
 .../Templates/NibApplication/index-debug.html   | 17 +++++++++++------
 .../Templates/NibApplication/index.html         | 17 +++++++++++------
 .../Templates/ThemeDescriptor/index-debug.html  | 17 +++++++++++------
 .../Templates/ThemeDescriptor/index.html        | 17 +++++++++++------
 6 files changed, 66 insertions(+), 36 deletions(-)

diff --git a/Tools/capp/Resources/Templates/Application/index-debug.html b/Tools/capp/Resources/Templates/Application/index-debug.html
index a36b1d3b9..cb501bdb7 100644
--- a/Tools/capp/Resources/Templates/Application/index-debug.html
+++ b/Tools/capp/Resources/Templates/Application/index-debug.html
@@ -61,10 +61,12 @@
 
             var loadingHTML =
                     '<div id="loading">' +
-                    '    <div id="loading-text">Loading...</div>' +
-                    '    <div id="progress-indicator">' +
-                    '        <span id="progress-bar" style="width:0%"></span>' +
-                    '    </div>' +
+	                '    <div style="flex-grow: 35"></div>' +
+	                '    <div id="loading-text">Loading...</div>' +
+	                '    <div id="progress-indicator">' +
+	                '        <span id="progress-bar" style="width:0%"></span>' +
+	                '    </div>' +
+	                '    <div style="flex-grow: 65"></div>' +
                     '</div>';
         </script>
 
@@ -131,8 +133,11 @@
             }
 
             #loading {
-                position: relative;
-                top: 35%;
+                height: 100%;
+                display:flex;
+                flex-direction:column;
+                flex-wrap:nowrap;
+                justify-content: space-evenly;
             }
 
             #loading-text {
diff --git a/Tools/capp/Resources/Templates/Application/index.html b/Tools/capp/Resources/Templates/Application/index.html
index ac42c98a7..4e9eec1d1 100644
--- a/Tools/capp/Resources/Templates/Application/index.html
+++ b/Tools/capp/Resources/Templates/Application/index.html
@@ -53,10 +53,12 @@
 
             var loadingHTML =
                     '<div id="loading">' +
-                    '    <div id="loading-text">Loading...</div>' +
-                    '    <div id="progress-indicator">' +
-                    '        <span id="progress-bar" style="width:0%"></span>' +
-                    '    </div>' +
+	                '    <div style="flex-grow: 35"></div>' +
+	                '    <div id="loading-text">Loading...</div>' +
+	                '    <div id="progress-indicator">' +
+	                '        <span id="progress-bar" style="width:0%"></span>' +
+	                '    </div>' +
+	                '    <div style="flex-grow: 65"></div>' +
                     '</div>';
         </script>
 
@@ -93,8 +95,11 @@
             }
 
             #loading {
-                position: relative;
-                top: 35%;
+                height: 100%;
+                display:flex;
+                flex-direction:column;
+                flex-wrap:nowrap;
+                justify-content: space-evenly;
             }
 
             #loading-text {
diff --git a/Tools/capp/Resources/Templates/NibApplication/index-debug.html b/Tools/capp/Resources/Templates/NibApplication/index-debug.html
index 02c62149a..a2eb2c2f8 100644
--- a/Tools/capp/Resources/Templates/NibApplication/index-debug.html
+++ b/Tools/capp/Resources/Templates/NibApplication/index-debug.html
@@ -61,10 +61,12 @@
 
             var loadingHTML =
                     '<div id="loading">' +
-                    '    <div id="loading-text">Loading...</div>' +
-                    '    <div id="progress-indicator">' +
-                    '        <span id="progress-bar" style="width:0%"></span>' +
-                    '    </div>' +
+	                '    <div style="flex-grow: 35"></div>' +
+	                '    <div id="loading-text">Loading...</div>' +
+	                '    <div id="progress-indicator">' +
+	                '        <span id="progress-bar" style="width:0%"></span>' +
+	                '    </div>' +
+	                '    <div style="flex-grow: 65"></div>' +
                     '</div>';
         </script>
 
@@ -131,8 +133,11 @@
             }
 
             #loading {
-                position: relative;
-                top: 35%;
+                height: 100%;
+                display:flex;
+                flex-direction:column;
+                flex-wrap:nowrap;
+                justify-content: space-evenly;
             }
 
             #loading-text {
diff --git a/Tools/capp/Resources/Templates/NibApplication/index.html b/Tools/capp/Resources/Templates/NibApplication/index.html
index 30125b9a4..b206065d7 100644
--- a/Tools/capp/Resources/Templates/NibApplication/index.html
+++ b/Tools/capp/Resources/Templates/NibApplication/index.html
@@ -53,10 +53,12 @@
 
             var loadingHTML =
                     '<div id="loading">' +
-                    '    <div id="loading-text">Loading...</div>' +
-                    '    <div id="progress-indicator">' +
-                    '        <span id="progress-bar" style="width:0%"></span>' +
-                    '    </div>' +
+	                '    <div style="flex-grow: 35"></div>' +
+	                '    <div id="loading-text">Loading...</div>' +
+	                '    <div id="progress-indicator">' +
+	                '        <span id="progress-bar" style="width:0%"></span>' +
+	                '    </div>' +
+	                '    <div style="flex-grow: 65"></div>' +
                     '</div>';
         </script>
 
@@ -93,8 +95,11 @@
             }
 
             #loading {
-                position: relative;
-                top: 35%;
+                height: 100%;
+                display:flex;
+                flex-direction:column;
+                flex-wrap:nowrap;
+                justify-content: space-evenly;
             }
 
             #loading-text {
diff --git a/Tools/capp/Resources/Templates/ThemeDescriptor/index-debug.html b/Tools/capp/Resources/Templates/ThemeDescriptor/index-debug.html
index 62f3d10d8..202a7b240 100644
--- a/Tools/capp/Resources/Templates/ThemeDescriptor/index-debug.html
+++ b/Tools/capp/Resources/Templates/ThemeDescriptor/index-debug.html
@@ -61,10 +61,12 @@
 
             var loadingHTML =
                     '<div id="loading">' +
-                    '    <div id="loading-text">Loading...</div>' +
-                    '    <div id="progress-indicator">' +
-                    '        <span id="progress-bar" style="width:0%"></span>' +
-                    '    </div>' +
+	                '    <div style="flex-grow: 35"></div>' +
+	                '    <div id="loading-text">Loading...</div>' +
+	                '    <div id="progress-indicator">' +
+	                '        <span id="progress-bar" style="width:0%"></span>' +
+	                '    </div>' +
+	                '    <div style="flex-grow: 65"></div>' +
                     '</div>';
         </script>
 
@@ -131,8 +133,11 @@
             }
 
             #loading {
-                position: relative;
-                top: 35%;
+                height: 100%;
+                display:flex;
+                flex-direction:column;
+                flex-wrap:nowrap;
+                justify-content: space-evenly;
             }
 
             #loading-text {
diff --git a/Tools/capp/Resources/Templates/ThemeDescriptor/index.html b/Tools/capp/Resources/Templates/ThemeDescriptor/index.html
index 203de81b1..ba4e33317 100644
--- a/Tools/capp/Resources/Templates/ThemeDescriptor/index.html
+++ b/Tools/capp/Resources/Templates/ThemeDescriptor/index.html
@@ -53,10 +53,12 @@
 
             var loadingHTML =
                     '<div id="loading">' +
-                    '    <div id="loading-text">Loading...</div>' +
-                    '    <div id="progress-indicator">' +
-                    '        <span id="progress-bar" style="width:0%"></span>' +
-                    '    </div>' +
+	                '    <div style="flex-grow: 35"></div>' +
+	                '    <div id="loading-text">Loading...</div>' +
+	                '    <div id="progress-indicator">' +
+	                '        <span id="progress-bar" style="width:0%"></span>' +
+	                '    </div>' +
+	                '    <div style="flex-grow: 65"></div>' +
                     '</div>';
         </script>
 
@@ -93,8 +95,11 @@
             }
 
             #loading {
-                position: relative;
-                top: 35%;
+                height: 100%;
+                display:flex;
+                flex-direction:column;
+                flex-wrap:nowrap;
+                justify-content: space-evenly;
             }
 
             #loading-text {