Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Skeleton loader (fix less)

Browse source
This commit is contained in:
Julia Svinareva 2019-07-23 12:17:47 +03:00
parent 147c0a56e1
commit 3e5d4ff58f
11 changed files with 365 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
apps/documenteditor/mobile/resources/less/app-material.less
View file

@ -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;
}
}

2
apps/presentationeditor/mobile/index.html
View file

@ -79,7 +79,7 @@
}
.loadmask > .placeholder {
background: rgba(255, 255, 255, 0.2);
background: #f5f5f5;
width: 100%;
height: 100%;
padding-top: 56px;

47
apps/presentationeditor/mobile/resources/css/app-ios.css
View file

@ -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;
}

47
apps/presentationeditor/mobile/resources/css/app-material.css
View file

@ -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;
}

56
apps/presentationeditor/mobile/resources/less/app-ios.less
View file

@ -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;
}
}
}
}

56
apps/presentationeditor/mobile/resources/less/app-material.less
View file

@ -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;
}
}
}
}

1
apps/spreadsheeteditor/mobile/index.html
View file

@ -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;

29
apps/spreadsheeteditor/mobile/resources/css/app-ios.css
View file

@ -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;
}

29
apps/spreadsheeteditor/mobile/resources/css/app-material.css
View file

@ -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;
}

37
apps/spreadsheeteditor/mobile/resources/less/app-ios.less
View file

@ -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;
}
}
}

37
apps/spreadsheeteditor/mobile/resources/less/app-material.less
View file

@ -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;
}
}
}