From e783d3fbc481b5d30326efd6c18591eb5efa4f59 Mon Sep 17 00:00:00 2001
From: Julia Svinareva <julia.svinaryova@onlyoffice.com>
Date: Thu, 16 Jan 2020 16:08:20 +0300
Subject: [PATCH] [mobile] Fix skeleton

---
 apps/documenteditor/mobile/index.html         |  4 +++-
 apps/documenteditor/mobile/index.html.deploy  |  2 ++
 apps/presentationeditor/mobile/index.html     | 21 +++++++++++++++----
 .../mobile/index.html.deploy                  | 21 +++++++++++++++----
 apps/spreadsheeteditor/mobile/index.html      | 20 +++++++++++++++---
 .../mobile/index.html.deploy                  | 21 +++++++++++++++----
 6 files changed, 73 insertions(+), 16 deletions(-)

diff --git a/apps/documenteditor/mobile/index.html b/apps/documenteditor/mobile/index.html
index 883e6db5f..2655ae04c 100644
--- a/apps/documenteditor/mobile/index.html
+++ b/apps/documenteditor/mobile/index.html
@@ -52,9 +52,10 @@
 
             .loadmask > .brendpanel .loading-logo {
                 max-width: 200px;
-                height: 26px;
+                height: 20px;
                 margin: 0 auto;
                 margin-top: 12px;
+                line-height: 14px;
             }
 
             .loadmask > .brendpanel .loading-logo > img {
@@ -76,6 +77,7 @@
 
             .loadmask > .brendpanel.android .circle {
                 margin-bottom: 12px;
+                background: rgba(255, 255, 255, 0.2);
             }
 
             .loadmask > .placeholder {
diff --git a/apps/documenteditor/mobile/index.html.deploy b/apps/documenteditor/mobile/index.html.deploy
index 9b273e9cf..793a47b48 100644
--- a/apps/documenteditor/mobile/index.html.deploy
+++ b/apps/documenteditor/mobile/index.html.deploy
@@ -54,6 +54,7 @@
                 height: 20px;
                 margin: 0 auto;
                 margin-top: 12px;
+                line-height: 14px;
             }
 
             .loadmask > .brendpanel .loading-logo > img {
@@ -75,6 +76,7 @@
 
             .loadmask > .brendpanel.android .circle {
                 margin-bottom: 12px;
+                background: rgba(255, 255, 255, 0.2);
             }
 
             .loadmask > .placeholder {
diff --git a/apps/presentationeditor/mobile/index.html b/apps/presentationeditor/mobile/index.html
index 887eed3a4..89dce081e 100644
--- a/apps/presentationeditor/mobile/index.html
+++ b/apps/presentationeditor/mobile/index.html
@@ -46,7 +46,7 @@
 
             .loadmask > .brendpanel > div {
                 display: flex;
-                align-items: center;
+                align-items: flex-start;
                 height: 100%;
             }
 
@@ -54,6 +54,8 @@
                 max-width: 200px;
                 height: 20px;
                 margin: 0 auto;
+                margin-top: 12px;
+                line-height: 14px;
             }
 
             .loadmask > .brendpanel .loading-logo > img {
@@ -64,11 +66,17 @@
             }
 
             .loadmask > .brendpanel .circle {
-                vertical-align: middle;
                 width: 28px;
                 height: 28px;
                 border-radius: 14px;
-                margin: 4px 10px;
+                margin: 0 16px;
+                margin-bottom: 10px;
+                align-self: flex-end;
+                background: rgba(255, 255, 255, 0.3);
+            }
+
+            .loadmask > .brendpanel.android .circle {
+                margin-bottom: 12px;
                 background: rgba(255, 255, 255, 0.2);
             }
 
@@ -156,7 +164,7 @@
             <div>
                 <div class="circle"></div>
                 <div class="loading-logo">
-                    <img src="../../common/mobile/resources/img/header/header-logo.png">
+                    <img src="">
                 </div>
                 <div class="circle"></div>
             </div>
@@ -199,6 +207,10 @@
             var params = getUrlParams(),
                 lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
                 logo = /*params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : */null;
+            var logoOO = null;
+            if (!logo) {
+                logoOO = /Android/.test(navigator.userAgent) ? "../../common/mobile/resources/img/header/header-logo-android.png" : "../../common/mobile/resources/img/header/header-logo-ios.png";
+            }
 
                 window.frameEditorId = params["frameEditorId"];
 
@@ -211,6 +223,7 @@
                 var elem = document.querySelector('.loading-logo img');
                 if (elem) {
                     logo && (elem.setAttribute('src', logo));
+                    logoOO && (elem.setAttribute('src', logoOO));
                     elem.style.opacity = 1;
                 }
             }
diff --git a/apps/presentationeditor/mobile/index.html.deploy b/apps/presentationeditor/mobile/index.html.deploy
index 0678ff9ba..a8e5cb353 100644
--- a/apps/presentationeditor/mobile/index.html.deploy
+++ b/apps/presentationeditor/mobile/index.html.deploy
@@ -45,7 +45,7 @@
 
             .loadmask > .brendpanel > div {
                 display: flex;
-                align-items: center;
+                align-items: flex-start;
                 height: 100%;
             }
 
@@ -53,6 +53,8 @@
                 max-width: 200px;
                 height: 20px;
                 margin: 0 auto;
+                margin-top: 12px;
+                line-height: 14px;
             }
 
             .loadmask > .brendpanel .loading-logo > img {
@@ -63,11 +65,17 @@
             }
 
             .loadmask > .brendpanel .circle {
-                vertical-align: middle;
                 width: 28px;
                 height: 28px;
                 border-radius: 14px;
-                margin: 4px 10px;
+                margin: 0 16px;
+                margin-bottom: 10px;
+                align-self: flex-end;
+                background: rgba(255, 255, 255, 0.3);
+            }
+
+            .loadmask > .brendpanel.android .circle {
+                margin-bottom: 12px;
                 background: rgba(255, 255, 255, 0.2);
             }
 
@@ -155,7 +163,7 @@
                 <div>
                     <div class="circle"></div>
                     <div class="loading-logo">
-                        <img src="../../../apps/presentationeditor/mobile/resources/img/header/header-logo.png">
+                        <img src="">
                     </div>
                     <div class="circle"></div>
                 </div>
@@ -211,6 +219,10 @@
             var params = getUrlParams(),
                 lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
                 logo = /*params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : */null;
+            var logoOO = null;
+            if (!logo) {
+                logoOO = /Android/.test(navigator.userAgent) ? "../../common/mobile/resources/img/header/header-logo-android.png" : "../../common/mobile/resources/img/header/header-logo-ios.png";
+            }
 
                 window.frameEditorId = params["frameEditorId"];
 
@@ -223,6 +235,7 @@
                 var elem = document.querySelector('.loading-logo img');
                 if (elem) {
                     logo && (elem.setAttribute('src', logo));
+                    logoOO && (elem.setAttribute('src', logoOO));
                     elem.style.opacity = 1;
                 }
             }
diff --git a/apps/spreadsheeteditor/mobile/index.html b/apps/spreadsheeteditor/mobile/index.html
index 955412762..b06109480 100644
--- a/apps/spreadsheeteditor/mobile/index.html
+++ b/apps/spreadsheeteditor/mobile/index.html
@@ -47,7 +47,7 @@
 
             .loadmask > .brendpanel > div {
                 display: flex;
-                align-items: center;
+                align-items: flex-start;
                 height: 100%;
             }
 
@@ -55,6 +55,8 @@
                 max-width: 200px;
                 height: 20px;
                 margin: 0 auto;
+                margin-top: 12px;
+                line-height: 14px;
             }
 
             .loadmask > .brendpanel .loading-logo > img {
@@ -69,7 +71,14 @@
                 width: 28px;
                 height: 28px;
                 border-radius: 14px;
-                margin: 4px 10px;
+                margin: 0 16px;
+                margin-bottom: 10px;
+                align-self: flex-end;
+                background: rgba(255, 255, 255, 0.3);
+            }
+
+            .loadmask > .brendpanel.android .circle {
+                margin-bottom: 12px;
                 background: rgba(255, 255, 255, 0.2);
             }
 
@@ -137,7 +146,7 @@
             <div>
                 <div class="circle"></div>
                 <div class="loading-logo">
-                    <img src="../../common/mobile/resources/img/header/header-logo.png">
+                    <img src="">
                 </div>
                 <div class="circle"></div>
             </div>
@@ -173,6 +182,10 @@
             var params = getUrlParams(),
                 lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
                 logo = /*params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : */null;
+            var logoOO = null;
+            if (!logo) {
+                logoOO = /Android/.test(navigator.userAgent) ? "../../common/mobile/resources/img/header/header-logo-android.png" : "../../common/mobile/resources/img/header/header-logo-ios.png";
+            }
 
                 window.frameEditorId = params["frameEditorId"];
 
@@ -185,6 +198,7 @@
                 var elem = document.querySelector('.loading-logo img');
                 if (elem) {
                     logo && (elem.setAttribute('src', logo));
+                    logoOO && (elem.setAttribute('src', logoOO));
                     elem.style.opacity = 1;
                 }
             }
diff --git a/apps/spreadsheeteditor/mobile/index.html.deploy b/apps/spreadsheeteditor/mobile/index.html.deploy
index 599885acd..9ba16329d 100644
--- a/apps/spreadsheeteditor/mobile/index.html.deploy
+++ b/apps/spreadsheeteditor/mobile/index.html.deploy
@@ -43,7 +43,7 @@
 
             .loadmask > .brendpanel > div {
                 display: flex;
-                align-items: center;
+                align-items: flex-start;
                 height: 100%;
             }
 
@@ -51,6 +51,8 @@
                 max-width: 200px;
                 height: 20px;
                 margin: 0 auto;
+                margin-top: 12px;
+                line-height: 14px;
             }
 
             .loadmask > .brendpanel .loading-logo > img {
@@ -61,11 +63,17 @@
             }
 
             .loadmask > .brendpanel .circle {
-                vertical-align: middle;
                 width: 28px;
                 height: 28px;
                 border-radius: 14px;
-                margin: 4px 10px;
+                margin: 0 16px;
+                margin-bottom: 10px;
+                align-self: flex-end;
+                background: rgba(255, 255, 255, 0.3);
+            }
+
+            .loadmask > .brendpanel.android .circle {
+                margin-bottom: 12px;
                 background: rgba(255, 255, 255, 0.2);
             }
 
@@ -133,7 +141,7 @@
                 <div>
                     <div class="circle"></div>
                     <div class="loading-logo">
-                        <img src="../../../apps/spreadsheeteditor/mobile/resources/img/header/header-logo.png">
+                        <img src="">
                     </div>
                     <div class="circle"></div>
                 </div>
@@ -182,6 +190,10 @@
             var params = getUrlParams(),
                 lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
                 logo = /*params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : */null;
+            var logoOO = null;
+            if (!logo) {
+                logoOO = /Android/.test(navigator.userAgent) ? "../../common/mobile/resources/img/header/header-logo-android.png" : "../../common/mobile/resources/img/header/header-logo-ios.png";
+            }
 
                 window.frameEditorId = params["frameEditorId"];
 
@@ -194,6 +206,7 @@
                 var elem = document.querySelector('.loading-logo img');
                 if (elem) {
                     logo && (elem.setAttribute('src', logo));
+                    logoOO && (elem.setAttribute('src', logoOO));
                     elem.style.opacity = 1;
                 }
             }