github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05: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

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

@ -7,12 +7,17 @@ block vars
block content
.editor(ng-controller="IdeController").full-size
.loading-screen(ng-show="state.loading")
.container
h3 #{translate("loading")}...
.progress
.progress-bar(style="width: 20%", ng-style="{'width': state.load_progress + '%'}")
p.text-center.text-danger(ng-if="state.error").ng-cloak
.loading-screen(ng-if="state.loading")
.loading-screen-lion-container
.loading-screen-lion(
style="height: 20%;"
ng-style="{ 'height': state.load_progress + '%' }"
)
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

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

@ -14,6 +14,18 @@
@import "./editor/review-panel.less";
@import "./editor/feature-onboarding.less";
@keyframes blink {
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
.full-size {
position: absolute;
top: 0;
@ -53,24 +65,59 @@
}
.loading-screen {
h3 {
padding-top: 136px;
background-image: url(/img/lion-128.png);
background-repeat: no-repeat;
background-position: top center;
}
.full-size;
background-color: #fafafa;
.container {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 400px;
margin-left: -200px;
margin-top: -200px;
}
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #FFF;
}
.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 {
.full-size;