From 3e5d4ff58fabdd03458415d827d6fbe42cccb050 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 23 Jul 2019 12:17:47 +0300 Subject: [PATCH] Skeleton loader (fix less) --- .../mobile/resources/less/app-material.less | 25 +++++++++ apps/presentationeditor/mobile/index.html | 2 +- .../mobile/resources/css/app-ios.css | 47 ++++++++++++++++ .../mobile/resources/css/app-material.css | 47 ++++++++++++++++ .../mobile/resources/less/app-ios.less | 56 +++++++++++++++++++ .../mobile/resources/less/app-material.less | 56 +++++++++++++++++++ apps/spreadsheeteditor/mobile/index.html | 1 + .../mobile/resources/css/app-ios.css | 29 ++++++++++ .../mobile/resources/css/app-material.css | 29 ++++++++++ .../mobile/resources/less/app-ios.less | 37 ++++++++++++ .../mobile/resources/less/app-material.less | 37 ++++++++++++ 11 files changed, 365 insertions(+), 1 deletion(-) diff --git a/apps/documenteditor/mobile/resources/less/app-material.less b/apps/documenteditor/mobile/resources/less/app-material.less index 54e5c2199..d39835fa7 100644 --- a/apps/documenteditor/mobile/resources/less/app-material.less +++ b/apps/documenteditor/mobile/resources/less/app-material.less @@ -255,4 +255,29 @@ input, textarea { ul:before { content: none; } +} + +// Skeleton of document + +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 10; + + > .line { + height: 15px; + margin: 30px; + background: #e2e2e2; + overflow: hidden; + position: relative; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/index.html b/apps/presentationeditor/mobile/index.html index 313d4fc12..1e561ca77 100644 --- a/apps/presentationeditor/mobile/index.html +++ b/apps/presentationeditor/mobile/index.html @@ -79,7 +79,7 @@ } .loadmask > .placeholder { - background: rgba(255, 255, 255, 0.2); + background: #f5f5f5; width: 100%; height: 100%; padding-top: 56px; diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css index 793548ff6..f8ccf98a9 100644 --- a/apps/presentationeditor/mobile/resources/css/app-ios.css +++ b/apps/presentationeditor/mobile/resources/css/app-ios.css @@ -6896,3 +6896,50 @@ html.pixel-ratio-3 .numbers li { #user-list ul:before { content: none; } +.doc-placeholder { + background: #f5f5f5; + width: 100%; + height: 100%; + left: 0; + top: 0; + bottom: 0; + right: 0; + position: absolute; + padding-top: 12px; +} +.doc-placeholder .slide-h { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + width: 90%; + margin: 15px auto; +} +.doc-placeholder .slide-v { + display: flex; + position: relative; + flex-direction: column; + padding-bottom: 56.1333%; +} +.doc-placeholder .slide-container { + position: absolute; + height: 100%; + width: 100%; + background: #fbfbfb; + border: 1px solid #dfdfdf; + display: grid; + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; +} +.doc-placeholder .slide-container > .line { + height: 40%; + margin: auto 60px; + border-radius: 6px; + background: #f5f5f5; +} +.doc-placeholder .slide-container > .line:nth-child(1) { + height: 50%; + margin: auto 35px; +} diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css index 39ffc9763..ea40db6e0 100644 --- a/apps/presentationeditor/mobile/resources/css/app-material.css +++ b/apps/presentationeditor/mobile/resources/css/app-material.css @@ -6724,3 +6724,50 @@ html.pixel-ratio-3 .numbers li { #user-list ul:before { content: none; } +.doc-placeholder { + background: #f5f5f5; + width: 100%; + height: 100%; + left: 0; + top: 0; + bottom: 0; + right: 0; + position: absolute; + padding-top: 22px; +} +.doc-placeholder .slide-h { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + width: 90%; + margin: 15px auto; +} +.doc-placeholder .slide-v { + display: flex; + position: relative; + flex-direction: column; + padding-bottom: 56.1333%; +} +.doc-placeholder .slide-container { + position: absolute; + height: 100%; + width: 100%; + background: #fbfbfb; + border: 1px solid #dfdfdf; + display: grid; + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; +} +.doc-placeholder .slide-container > .line { + height: 40%; + margin: auto 60px; + border-radius: 6px; + background: #f5f5f5; +} +.doc-placeholder .slide-container > .line:nth-child(1) { + height: 50%; + margin: auto 35px; +} diff --git a/apps/presentationeditor/mobile/resources/less/app-ios.less b/apps/presentationeditor/mobile/resources/less/app-ios.less index 2ac567445..1a6054b97 100644 --- a/apps/presentationeditor/mobile/resources/less/app-ios.less +++ b/apps/presentationeditor/mobile/resources/less/app-ios.less @@ -273,4 +273,60 @@ input, textarea { ul:before { content: none; } +} + +// Skeleton of document + +.doc-placeholder { + background: #f5f5f5; + width: 100%; + height: 100%; + left: 0; + top: 0; + bottom: 0; + right: 0; + position: absolute; + padding-top: 12px; + + .slide-h { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + width: 90%; + margin: 15px auto; + } + + .slide-v { + display: flex; + position: relative; + flex-direction: column; + padding-bottom: 56.1333%; + } + + .slide-container { + position: absolute; + height: 100%; + width: 100%; + background: #fbfbfb; + border: 1px solid #dfdfdf; + display: grid; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + + > .line { + height: 40%; + margin: auto 60px; + border-radius: 6px; + background: #f5f5f5; + + &:nth-child(1) { + height: 50%; + margin: auto 35px; + } + } + } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/resources/less/app-material.less b/apps/presentationeditor/mobile/resources/less/app-material.less index 604bfa755..58bd3f23a 100644 --- a/apps/presentationeditor/mobile/resources/less/app-material.less +++ b/apps/presentationeditor/mobile/resources/less/app-material.less @@ -260,4 +260,60 @@ input, textarea { ul:before { content: none; } +} + +// Skeleton of document + +.doc-placeholder { + background: #f5f5f5; + width: 100%; + height: 100%; + left: 0; + top: 0; + bottom: 0; + right: 0; + position: absolute; + padding-top: 22px; + + .slide-h { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + width: 90%; + margin: 15px auto; + } + + .slide-v { + display: flex; + position: relative; + flex-direction: column; + padding-bottom: 56.1333%; + } + + .slide-container { + position: absolute; + height: 100%; + width: 100%; + background: #fbfbfb; + border: 1px solid #dfdfdf; + display: grid; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + + > .line { + height: 40%; + margin: auto 60px; + border-radius: 6px; + background: #f5f5f5; + + &:nth-child(1) { + height: 50%; + margin: auto 35px; + } + } + } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/index.html b/apps/spreadsheeteditor/mobile/index.html index 77a2b2e56..683514306 100644 --- a/apps/spreadsheeteditor/mobile/index.html +++ b/apps/spreadsheeteditor/mobile/index.html @@ -103,6 +103,7 @@ } .loadmask > .placeholder > .columns:first-child { + position: absolute; background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0; background-size: 20px 20px; width: 35px; diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css index 0adba5b26..972d80f78 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css @@ -7460,3 +7460,32 @@ html.pixel-ratio-3 .cell-styles.dataview .row li { .lang-flag.es-MX { background-position: -16px -192px; } +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + border: 1px solid #dfdfdf; + white-space: nowrap; + padding-top: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.doc-placeholder > .columns { + width: 100%; + height: 100%; + display: inline-block; + background: linear-gradient(90deg, #d5d5d5 0px, rgba(0, 0, 0, 0) 1px) 0 0, linear-gradient(rgba(0, 255, 0, 0) 19px, #d5d5d5 20px) 0 0, linear-gradient(#f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x; + background-size: 80px 20px; + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; +} +.doc-placeholder > .columns:first-child { + background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0; + background-size: 20px 20px; + width: 35px; +} diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css index f4134c4ed..e81c01687 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css @@ -7330,3 +7330,32 @@ html.pixel-ratio-3 .cell-styles.dataview .row li { .lang-flag.es-MX { background-position: -16px -192px; } +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + border: 1px solid #dfdfdf; + white-space: nowrap; + padding-top: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.doc-placeholder > .columns { + width: 100%; + height: 100%; + display: inline-block; + background: linear-gradient(90deg, #d5d5d5 0px, rgba(0, 0, 0, 0) 1px) 0 0, linear-gradient(rgba(0, 255, 0, 0) 19px, #d5d5d5 20px) 0 0, linear-gradient(#f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x; + background-size: 80px 20px; + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; +} +.doc-placeholder > .columns:first-child { + background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0; + background-size: 20px 20px; + width: 35px; +} diff --git a/apps/spreadsheeteditor/mobile/resources/less/app-ios.less b/apps/spreadsheeteditor/mobile/resources/less/app-ios.less index c255df6f4..458767033 100644 --- a/apps/spreadsheeteditor/mobile/resources/less/app-ios.less +++ b/apps/spreadsheeteditor/mobile/resources/less/app-ios.less @@ -318,4 +318,41 @@ input, textarea { &.zh, &.zh-CN {background-position: -32px -180px;} &.ja, &.ja-JP {background-position: 0 -192px;} &.es-MX {background-position: -16px -192px;} +} + +// Skeleton of workbook + +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + border: 1px solid #dfdfdf; + white-space: nowrap; + padding-top: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + > .columns { + width: 100%; + height: 100%; + display: inline-block; + background: linear-gradient(90deg, #d5d5d5 0px, rgba(0,0,0,0) 1px) 0 0, + linear-gradient(rgba(0,255,0,0) 19px, #d5d5d5 20px) 0 0, + linear-gradient( #f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x; + background-size: 80px 20px; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + + &:first-child { + background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0; + background-size: 20px 20px; + width: 35px; + } + } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/resources/less/app-material.less b/apps/spreadsheeteditor/mobile/resources/less/app-material.less index 8ec1cb479..4f2e38a50 100644 --- a/apps/spreadsheeteditor/mobile/resources/less/app-material.less +++ b/apps/spreadsheeteditor/mobile/resources/less/app-material.less @@ -305,4 +305,41 @@ input, textarea { &.zh, &.zh-CN {background-position: -32px -180px;} &.ja, &.ja-JP {background-position: 0 -192px;} &.es-MX {background-position: -16px -192px;} +} + +// Skeleton of workbook + +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + border: 1px solid #dfdfdf; + white-space: nowrap; + padding-top: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + > .columns { + width: 100%; + height: 100%; + display: inline-block; + background: linear-gradient(90deg, #d5d5d5 0px, rgba(0,0,0,0) 1px) 0 0, + linear-gradient(rgba(0,255,0,0) 19px, #d5d5d5 20px) 0 0, + linear-gradient( #f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x; + background-size: 80px 20px; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + + &:first-child { + background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0; + background-size: 20px 20px; + width: 35px; + } + } } \ No newline at end of file