github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-09-16 02:52:31 -04:00
Code Issues Projects Releases Packages Wiki Activity

Styling of loading screen.

Browse source
This commit is contained in:
Paulo Reis 2017-02-23 15:47:48 +00:00
parent 4700fa16d3
commit 7a1c06982e
2 changed files with 76 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
services/web/app/views/project/editor.pug
View file

@ -7,13 +7,18 @@ block vars
block content block content
.editor(ng-controller="IdeController").full-size .editor(ng-controller="IdeController").full-size
.loading-screen(ng-show="state.loading") .loading-screen(ng-if="state.loading")
.container .loading-screen-lion-container
h3 #{translate("loading")}... .loading-screen-lion(
.progress style="height: 20%;"
.progress-bar(style="width: 20%", ng-style="{'width': state.load_progress + '%'}") ng-style="{ 'height': state.load_progress + '%' }"
p.text-center.text-danger(ng-if="state.error").ng-cloak )
span(ng-bind-html="state.error") h3.loading-screen-label(ng-if="!state.error") #{translate("loading")}
span.loading-screen-ellip .
span.loading-screen-ellip .
span.loading-screen-ellip .
p.loading-screen-error(ng-if="state.error").ng-cloak
span(ng-bind-html="state.error")
include ./editor/feature-onboarding include ./editor/feature-onboarding

81
services/web/public/stylesheets/app/editor.less
View file

@ -14,6 +14,18 @@
@import "./editor/review-panel.less"; @import "./editor/review-panel.less";
@import "./editor/feature-onboarding.less"; @import "./editor/feature-onboarding.less";
@keyframes blink {
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
.full-size { .full-size {
position: absolute; position: absolute;
top: 0; top: 0;
@ -53,24 +65,59 @@
} }
.loading-screen { .loading-screen {
h3 { display: flex;
padding-top: 136px; flex-direction: column;
background-image: url(/img/lion-128.png); justify-content: center;
background-repeat: no-repeat; align-items: center;
background-position: top center; width: 100%;
} height: 100%;
.full-size; background-color: #FFF;
background-color: #fafafa;
.container {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 400px;
margin-left: -200px;
margin-top: -200px;
}
} }
.loading-screen-lion-container {
width: 15%;
min-width: 200px;
text-align: center;
}
.loading-screen-lion {
position: relative;
width: 100%;
padding-top: 86.2%;
height: 0;
background: url(/img/brand/lion-grey.svg) no-repeat bottom / 100%;
&::after {
content: '';
position: absolute;
height: inherit;
right: 0;
bottom: 0;
left: 0;
background: url(/img/brand/lion.svg) no-repeat bottom / 100%;
transition: height .5s;
}
}
.loading-screen-label {
margin: 0;
padding-top: 1em;
font-size: 2em;
color: @gray-dark;
}
.loading-screen-ellip {
animation: blink 1.4s both infinite;
&:nth-child(2) {
animation-delay: 0.2s;
}
&:nth-child(3) {
animation-delay: 0.4s;
}
}
.loading-screen-error {
margin: 0;
padding-top: 1em;
color: @state-danger-text;
}
.loading-panel { .loading-panel {
.full-size; .full-size;