Fix page loader centering (#1802)

Affects issues:
- Fixed #1783

Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/Contributors.java

@@ -72,6 +72,7 @@ public class Contributors {
             new Contributor("QuakyCZ", LANG),
             new Contributor("MrFriggo", LANG),
             new Contributor("vacoup", CODE),
+            new Contributor("Kopo942", CODE),
     };
 
     private Contributors() {

Plan/common/src/main/resources/assets/plan/web/css/style.css

@@ -7,22 +7,25 @@
     text-align: center;
 }
 
+.loader-container {
+    position: relative;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
 .loader {
     display: inline-block;
     width: 2rem;
     height: 2rem;
-    position: absolute;
     border: 4px solid #368F17;
     border-radius: 5px;
-    top: 50%;
     background-color: #368F17;
     animation: loader 2s infinite ease;
 }
 
 .loader-text {
-    position: relative;
-    top: 55%;
-    left: 1rem;
+    margin-top: 0.5rem;
 }
 
 @keyframes loader {

Plan/common/src/main/resources/assets/plan/web/js/query.js

@@ -274,8 +274,10 @@ function runQuery() {
     if (timestamp) {
         document.querySelector('#content .tab').innerHTML =
             `<div class="page-loader">
+            <div class="loader-container">
             <span class="loader"></span>
             <p class="loader-text">Loading..</p>
+            </div>
         </div>`;
     } else {
         const icon = document.createElement('template');

Plan/common/src/main/resources/assets/plan/web/network.html

@@ -30,8 +30,10 @@
     const gmPieColors = [${gmPieColors}];
 </script>
 <div class="page-loader">
-    <span class="loader"></span>
-    <p class="loader-text">Please wait..</p>
+    <div class="loader-container">
+        <span class="loader"></span>
+        <p class="loader-text">Please wait..</p>
+    </div>
 </div>
 
 <!-- Page Wrapper -->

Plan/common/src/main/resources/assets/plan/web/player.html

@@ -30,8 +30,10 @@
     var gmPieColors = [${gmPieColors}];
 </script>
 <div class="page-loader">
-    <span class="loader"></span>
-    <p class="loader-text">Please wait..</p>
+    <div class="loader-container">
+        <span class="loader"></span>
+        <p class="loader-text">Please wait..</p>
+    </div>
 </div>
 
 <!-- Page Wrapper -->

Plan/common/src/main/resources/assets/plan/web/server.html

@@ -28,8 +28,10 @@
     var gmPieColors = [${gmPieColors}];
 </script>
 <div class="page-loader">
-    <span class="loader"></span>
-    <p class="loader-text">Please wait..</p>
+    <div class="loader-container">
+        <span class="loader"></span>
+        <p class="loader-text">Please wait..</p>
+    </div>
 </div>
 
 <!-- Page Wrapper -->