mirror of
https://github.com/thelounge/thelounge
synced 2024-11-24 21:13:06 +00:00
Center loading screen
This commit is contained in:
Pavel Djundik
parent
9107f9e351
commit
276266e24f
7 changed files with 53 additions and 28 deletions
|
|
@ -1186,7 +1186,6 @@ kbd {
|
|||
overflow: hidden; /* Prevents Zalgo text to expand beyond messages */
|
||||
}
|
||||
|
||||
#loading a,
|
||||
#chat .special .time,
|
||||
#chat .special .from {
|
||||
display: none;
|
||||
|
|
@ -1506,9 +1505,11 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
|||
content: "Search Results";
|
||||
}
|
||||
|
||||
#loading {
|
||||
#loading.active {
|
||||
font-size: 14px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#loading p {
|
||||
|
|
@ -1517,11 +1518,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
|||
|
||||
#loading-slow,
|
||||
#loading-reload {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#loading-reload {
|
||||
margin-top: 15px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#loading summary {
|
||||
|
|
@ -1530,9 +1527,27 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
|||
}
|
||||
|
||||
#loading pre {
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#loading-reload-container,
|
||||
#loading-status-container {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#loading-reload-container {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.loading-logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sign-in label {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<svg id="Livello_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 412 276"><style>.st0{fill:#ff9e18}.st1{fill:#415364}</style><path class="st0" d="M314.5 75.6v63.7c0 .5-.3 1.1-.8 1.3l-56 31.6c-.5.3-1.1.3-1.6 0l-56.4-31.8c-.5-.3-.8-.8-.8-1.3V83.2c0-.5-.3-1.1-.8-1.3l-15.5-8.7c-1-.6-2.4.1-2.4 1.3v70.8c0 3.3 1.8 6.3 4.7 8L252 191c2.9 1.6 6.5 1.6 9.4 0l66.8-37.6c2.9-1.6 4.7-4.7 4.7-8V69.5c0-3.3-1.8-6.3-4.7-8L261.6 24c-2.9-1.6-6.5-1.6-9.4 0l-30.9 17.4c-1 .6-1 2.1 0 2.7l15.5 8.7c.5.3 1.1.3 1.6 0l17.8-10c.5-.3 1.1-.3 1.6 0l56.1 31.5c.3.2.6.7.6 1.3z"/><ellipse class="st1" cx="288.4" cy="107.7" rx="10.6" ry="10.4"/><ellipse class="st1" cx="254.6" cy="107.7" rx="10.6" ry="10.4"/><path class="st1" d="M96.7 139.2V75.5c0-.5.3-1.1.8-1.3l56-31.6c.5-.3 1.1-.3 1.6 0l56.4 31.8c.5.3.8.8.8 1.3v55.9c0 .5.3 1.1.8 1.3l15.5 8.7c1 .6 2.4-.1 2.4-1.3V69.6c0-3.3-1.8-6.3-4.7-8L159 23.9c-2.9-1.6-6.5-1.6-9.4 0L82.8 61.5c-2.9 1.6-4.7 4.7-4.7 8v75.8c0 3.3 1.8 6.3 4.7 8l66.8 37.6c2.9 1.6 6.5 1.6 9.4 0l30.9-17.4c1-.6 1-2.1 0-2.7l-15.5-8.7c-.5-.3-1.1-.3-1.6 0l-17.8 10c-.5.3-1.1.3-1.6 0l-56.1-31.5c-.3-.3-.6-.8-.6-1.4z"/><ellipse class="st0" cx="122.8" cy="107.1" rx="10.6" ry="10.4"/><ellipse class="st0" cx="156.6" cy="107.1" rx="10.6" ry="10.4"/><path class="st0" d="M21.5 218.9h13V253h9.8v-34.1h13v-8H21.5zm71.3 8.8H74v-16.8h-9.6v42.2H74v-17.5h18.8v17.5h9.5v-42.2h-9.5zm46.2-9.2v-7.6h-29.4v42.2H139v-7.6h-19.9v-10h18.6v-7.7h-18.6v-9.3z"/><path class="st1" d="M156 210.9h-9.8v42.2h28.4v-8H156zm55.5 2.6c-3.3-1.7-7.2-2.6-11.6-2.6-4.4 0-8.3.9-11.6 2.6-3.3 1.7-5.9 4.2-7.6 7.4-1.8 3.2-2.7 6.9-2.7 11.2 0 4.3.9 8.1 2.7 11.3 1.8 3.2 4.3 5.7 7.6 7.4 3.3 1.7 7.2 2.6 11.6 2.6 4.4 0 8.3-.9 11.6-2.6 3.3-1.7 5.8-4.2 7.6-7.4 1.8-3.2 2.6-7 2.6-11.3 0-4.3-.9-8-2.6-11.2-1.8-3.2-4.3-5.7-7.6-7.4zm0 18.5c0 4.4-1 7.9-3.1 10.2-2 2.3-4.9 3.5-8.5 3.5-3.6 0-6.5-1.2-8.5-3.5s-3.1-5.8-3.1-10.2c0-4.4 1-7.8 3.1-10.1 2-2.3 4.9-3.5 8.5-3.5 3.6 0 6.5 1.2 8.5 3.5 2.1 2.3 3.1 5.7 3.1 10.1zm44.2 3.8c0 3.2-.7 5.6-2.2 7.3-1.5 1.6-3.6 2.5-6.4 2.5-2.8 0-5-.8-6.5-2.5-1.5-1.6-2.3-4.1-2.3-7.3V211h-9.6v24.4c0 5.8 1.6 10.2 4.7 13.2s7.7 4.5 13.6 4.5c5.9 0 10.5-1.5 13.6-4.5 3.1-3 4.7-7.5 4.7-13.2V211h-9.7v24.8zm44.7 1l-20.8-25.9h-7.2v42.2h9.2v-26l20.7 25.9.1.1h7.3v-42.2h-9.3zm36.9-.4h8.2v8.4c-2.2.5-4.4.8-6.6.8-8.3 0-12.3-4.5-12.3-13.7 0-9 3.9-13.4 11.8-13.4 2.1 0 4.1.3 5.9.9 1.8.6 3.7 1.6 5.6 2.9l.3.2 3.2-6.9-.2-.1c-1.7-1.5-3.9-2.6-6.5-3.4-2.6-.8-5.5-1.2-8.5-1.2-4.3 0-8.1.9-11.3 2.6-3.2 1.7-5.7 4.2-7.5 7.3-1.8 3.1-2.6 6.9-2.6 11.1 0 4.4.9 8.2 2.6 11.3 1.8 3.1 4.3 5.6 7.6 7.3 3.3 1.7 7.2 2.5 11.6 2.5 2.9 0 5.7-.3 8.4-.8s5.2-1.3 7.2-2.2l.2-.1v-20.3h-17v6.8zm53.2-17.9v-7.6h-28.9v42.2h28.9v-7.6H371v-10h18.3v-7.7H371v-9.3z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 412 276"><style>.st0{fill:#ff9e18}.st1{fill:#415364}</style><path class="st0" d="M314.5 75.6v63.7c0 .5-.3 1.1-.8 1.3l-56 31.6c-.5.3-1.1.3-1.6 0l-56.4-31.8c-.5-.3-.8-.8-.8-1.3V83.2c0-.5-.3-1.1-.8-1.3l-15.5-8.7c-1-.6-2.4.1-2.4 1.3v70.8c0 3.3 1.8 6.3 4.7 8L252 191c2.9 1.6 6.5 1.6 9.4 0l66.8-37.6c2.9-1.6 4.7-4.7 4.7-8V69.5c0-3.3-1.8-6.3-4.7-8L261.6 24c-2.9-1.6-6.5-1.6-9.4 0l-30.9 17.4c-1 .6-1 2.1 0 2.7l15.5 8.7c.5.3 1.1.3 1.6 0l17.8-10c.5-.3 1.1-.3 1.6 0l56.1 31.5c.3.2.6.7.6 1.3z"/><ellipse class="st1" cx="288.4" cy="107.7" rx="10.6" ry="10.4"/><ellipse class="st1" cx="254.6" cy="107.7" rx="10.6" ry="10.4"/><path class="st1" d="M96.7 139.2V75.5c0-.5.3-1.1.8-1.3l56-31.6c.5-.3 1.1-.3 1.6 0l56.4 31.8c.5.3.8.8.8 1.3v55.9c0 .5.3 1.1.8 1.3l15.5 8.7c1 .6 2.4-.1 2.4-1.3V69.6c0-3.3-1.8-6.3-4.7-8L159 23.9c-2.9-1.6-6.5-1.6-9.4 0L82.8 61.5c-2.9 1.6-4.7 4.7-4.7 8v75.8c0 3.3 1.8 6.3 4.7 8l66.8 37.6c2.9 1.6 6.5 1.6 9.4 0l30.9-17.4c1-.6 1-2.1 0-2.7l-15.5-8.7c-.5-.3-1.1-.3-1.6 0l-17.8 10c-.5.3-1.1.3-1.6 0l-56.1-31.5c-.3-.3-.6-.8-.6-1.4z"/><ellipse class="st0" cx="122.8" cy="107.1" rx="10.6" ry="10.4"/><ellipse class="st0" cx="156.6" cy="107.1" rx="10.6" ry="10.4"/><path class="st0" d="M21.5 218.9h13V253h9.8v-34.1h13v-8H21.5zm71.3 8.8H74v-16.8h-9.6v42.2H74v-17.5h18.8v17.5h9.5v-42.2h-9.5zm46.2-9.2v-7.6h-29.4v42.2H139v-7.6h-19.9v-10h18.6v-7.7h-18.6v-9.3z"/><path class="st1" d="M156 210.9h-9.8v42.2h28.4v-8H156zm55.5 2.6c-3.3-1.7-7.2-2.6-11.6-2.6-4.4 0-8.3.9-11.6 2.6-3.3 1.7-5.9 4.2-7.6 7.4-1.8 3.2-2.7 6.9-2.7 11.2 0 4.3.9 8.1 2.7 11.3 1.8 3.2 4.3 5.7 7.6 7.4 3.3 1.7 7.2 2.6 11.6 2.6 4.4 0 8.3-.9 11.6-2.6 3.3-1.7 5.8-4.2 7.6-7.4 1.8-3.2 2.6-7 2.6-11.3 0-4.3-.9-8-2.6-11.2-1.8-3.2-4.3-5.7-7.6-7.4zm0 18.5c0 4.4-1 7.9-3.1 10.2-2 2.3-4.9 3.5-8.5 3.5-3.6 0-6.5-1.2-8.5-3.5s-3.1-5.8-3.1-10.2c0-4.4 1-7.8 3.1-10.1 2-2.3 4.9-3.5 8.5-3.5 3.6 0 6.5 1.2 8.5 3.5 2.1 2.3 3.1 5.7 3.1 10.1zm44.2 3.8c0 3.2-.7 5.6-2.2 7.3-1.5 1.6-3.6 2.5-6.4 2.5-2.8 0-5-.8-6.5-2.5-1.5-1.6-2.3-4.1-2.3-7.3V211h-9.6v24.4c0 5.8 1.6 10.2 4.7 13.2s7.7 4.5 13.6 4.5c5.9 0 10.5-1.5 13.6-4.5 3.1-3 4.7-7.5 4.7-13.2V211h-9.7v24.8zm44.7 1l-20.8-25.9h-7.2v42.2h9.2v-26l20.7 25.9.1.1h7.3v-42.2h-9.3zm36.9-.4h8.2v8.4c-2.2.5-4.4.8-6.6.8-8.3 0-12.3-4.5-12.3-13.7 0-9 3.9-13.4 11.8-13.4 2.1 0 4.1.3 5.9.9 1.8.6 3.7 1.6 5.6 2.9l.3.2 3.2-6.9-.2-.1c-1.7-1.5-3.9-2.6-6.5-3.4-2.6-.8-5.5-1.2-8.5-1.2-4.3 0-8.1.9-11.3 2.6-3.2 1.7-5.7 4.2-7.5 7.3-1.8 3.1-2.6 6.9-2.6 11.1 0 4.4.9 8.2 2.6 11.3 1.8 3.1 4.3 5.6 7.6 7.3 3.3 1.7 7.2 2.5 11.6 2.5 2.9 0 5.7-.3 8.4-.8s5.2-1.3 7.2-2.2l.2-.1v-20.3h-17v6.8zm53.2-17.9v-7.6h-28.9v42.2h28.9v-7.6H371v-10h18.3v-7.7H371v-9.3z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
1
client/img/logo-vertical-transparent-dark.svg
Normal file
1
client/img/logo-vertical-transparent-dark.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 412 276"><style>.st0{fill:#ff9e18}.st1{fill:#fff}</style><path class="st0" d="M314.5 75.6v63.7c0 .5-.3 1.1-.8 1.3l-56 31.6c-.5.3-1.1.3-1.6 0l-56.4-31.8c-.5-.3-.8-.8-.8-1.3V83.2c0-.5-.3-1.1-.8-1.3l-15.5-8.7c-1-.6-2.4.1-2.4 1.3v70.8c0 3.3 1.8 6.3 4.7 8L252 191c2.9 1.6 6.5 1.6 9.4 0l66.8-37.6c2.9-1.6 4.7-4.7 4.7-8V69.5c0-3.3-1.8-6.3-4.7-8L261.6 24c-2.9-1.6-6.5-1.6-9.4 0l-30.9 17.4c-1 .6-1 2.1 0 2.7l15.5 8.7c.5.3 1.1.3 1.6 0l17.8-10c.5-.3 1.1-.3 1.6 0l56.1 31.5c.3.2.6.7.6 1.3z"/><ellipse class="st1" cx="288.4" cy="107.7" rx="10.6" ry="10.4"/><ellipse class="st1" cx="254.6" cy="107.7" rx="10.6" ry="10.4"/><path class="st1" d="M96.7 139.2V75.5c0-.5.3-1.1.8-1.3l56-31.6c.5-.3 1.1-.3 1.6 0l56.4 31.8c.5.3.8.8.8 1.3v55.9c0 .5.3 1.1.8 1.3l15.5 8.7c1 .6 2.4-.1 2.4-1.3V69.6c0-3.3-1.8-6.3-4.7-8L159 23.9c-2.9-1.6-6.5-1.6-9.4 0L82.8 61.5c-2.9 1.6-4.7 4.7-4.7 8v75.8c0 3.3 1.8 6.3 4.7 8l66.8 37.6c2.9 1.6 6.5 1.6 9.4 0l30.9-17.4c1-.6 1-2.1 0-2.7l-15.5-8.7c-.5-.3-1.1-.3-1.6 0l-17.8 10c-.5.3-1.1.3-1.6 0l-56.1-31.5c-.3-.3-.6-.8-.6-1.4z"/><ellipse class="st0" cx="122.8" cy="107.1" rx="10.6" ry="10.4"/><ellipse class="st0" cx="156.6" cy="107.1" rx="10.6" ry="10.4"/><path class="st0" d="M21.5 218.9h13V253h9.8v-34.1h13v-8H21.5zm71.3 8.8H74v-16.8h-9.6v42.2H74v-17.5h18.8v17.5h9.5v-42.2h-9.5zm46.2-9.2v-7.6h-29.4v42.2H139v-7.6h-19.9v-10h18.6v-7.7h-18.6v-9.3z"/><path class="st1" d="M156 210.9h-9.8v42.2h28.4v-8H156zm55.5 2.6c-3.3-1.7-7.2-2.6-11.6-2.6-4.4 0-8.3.9-11.6 2.6-3.3 1.7-5.9 4.2-7.6 7.4-1.8 3.2-2.7 6.9-2.7 11.2 0 4.3.9 8.1 2.7 11.3 1.8 3.2 4.3 5.7 7.6 7.4 3.3 1.7 7.2 2.6 11.6 2.6 4.4 0 8.3-.9 11.6-2.6 3.3-1.7 5.8-4.2 7.6-7.4 1.8-3.2 2.6-7 2.6-11.3 0-4.3-.9-8-2.6-11.2-1.8-3.2-4.3-5.7-7.6-7.4zm0 18.5c0 4.4-1 7.9-3.1 10.2-2 2.3-4.9 3.5-8.5 3.5-3.6 0-6.5-1.2-8.5-3.5s-3.1-5.8-3.1-10.2c0-4.4 1-7.8 3.1-10.1 2-2.3 4.9-3.5 8.5-3.5 3.6 0 6.5 1.2 8.5 3.5 2.1 2.3 3.1 5.7 3.1 10.1zm44.2 3.8c0 3.2-.7 5.6-2.2 7.3-1.5 1.6-3.6 2.5-6.4 2.5-2.8 0-5-.8-6.5-2.5-1.5-1.6-2.3-4.1-2.3-7.3V211h-9.6v24.4c0 5.8 1.6 10.2 4.7 13.2s7.7 4.5 13.6 4.5c5.9 0 10.5-1.5 13.6-4.5 3.1-3 4.7-7.5 4.7-13.2V211h-9.7v24.8zm44.7 1l-20.8-25.9h-7.2v42.2h9.2v-26l20.7 25.9.1.1h7.3v-42.2h-9.3zm36.9-.4h8.2v8.4c-2.2.5-4.4.8-6.6.8-8.3 0-12.3-4.5-12.3-13.7 0-9 3.9-13.4 11.8-13.4 2.1 0 4.1.3 5.9.9 1.8.6 3.7 1.6 5.6 2.9l.3.2 3.2-6.9-.2-.1c-1.7-1.5-3.9-2.6-6.5-3.4-2.6-.8-5.5-1.2-8.5-1.2-4.3 0-8.1.9-11.3 2.6-3.2 1.7-5.7 4.2-7.5 7.3-1.8 3.1-2.6 6.9-2.6 11.1 0 4.4.9 8.2 2.6 11.3 1.8 3.1 4.3 5.6 7.6 7.3 3.3 1.7 7.2 2.5 11.6 2.5 2.9 0 5.7-.3 8.4-.8s5.2-1.3 7.2-2.2l.2-.1v-20.3h-17v6.8zm53.2-17.9v-7.6h-28.9v42.2h28.9v-7.6H371v-10h18.3v-7.7H371v-9.3z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -49,22 +49,16 @@
|
|||
<div id="main">
|
||||
<div id="windows">
|
||||
<div id="loading" class="window active">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<h1 class="title" id="loading-title">The Lounge is loading…</h1>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<p id="loading-page-message">Loading the app… <a href="http://enable-javascript.com/" target="_blank" rel="noopener">Make sure to have JavaScript enabled.</a></p>
|
||||
<p id="loading-slow">
|
||||
This is taking longer than it should, there might be
|
||||
connectivity issues.
|
||||
</p>
|
||||
<button id="loading-reload" class="btn">Reload page</button>
|
||||
<script async src="js/loading-error-handlers.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loading-status-container">
|
||||
<img src="img/logo-vertical-transparent-bg.svg" class="loading-logo-bright" alt="The Lounge" width="256" height="170">
|
||||
<img src="img/logo-vertical-transparent-dark.svg" class="loading-logo-dark" alt="The Lounge" width="256" height="170">
|
||||
<p id="loading-page-message"><a href="https://enable-javascript.com/" target="_blank" rel="noopener">Your JavaScript must be enabled.</a></p>
|
||||
</div>
|
||||
<div id="loading-reload-container">
|
||||
<p id="loading-slow">This is taking longer than it should, there might be connectivity issues.</p>
|
||||
<button id="loading-reload" class="btn">Reload page</button>
|
||||
</div>
|
||||
<script async src="js/loading-error-handlers.js"></script>
|
||||
</div>
|
||||
<div id="chat-container" class="window">
|
||||
<div id="chat"></div>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,13 @@
|
|||
*/
|
||||
|
||||
(function() {
|
||||
document.getElementById("loading-page-message").textContent = "Loading the app…";
|
||||
|
||||
var displayReload = function displayReload() {
|
||||
var loadingReload = document.getElementById("loading-reload");
|
||||
|
||||
if (loadingReload) {
|
||||
loadingReload.style.display = "block";
|
||||
loadingReload.style.visibility = "visible";
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -25,7 +27,7 @@
|
|||
// 5s. Wrap everything in this block to make sure nothing happens if the
|
||||
// element does not exist (i.e. page has loaded).
|
||||
if (loadingSlow) {
|
||||
loadingSlow.style.display = "block";
|
||||
loadingSlow.style.visibility = "visible";
|
||||
displayReload();
|
||||
}
|
||||
}, 5000);
|
||||
|
|
@ -35,9 +37,6 @@
|
|||
});
|
||||
|
||||
window.g_LoungeErrorHandler = function LoungeErrorHandler(e) {
|
||||
var title = document.getElementById("loading-title");
|
||||
title.textContent = "An error has occured";
|
||||
|
||||
var message = document.getElementById("loading-page-message");
|
||||
message.textContent = "An error has occured that prevented the client from loading correctly.";
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,14 @@ body {
|
|||
color: #ccc;
|
||||
}
|
||||
|
||||
.loading-logo-bright {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-logo-dark {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#main,
|
||||
#chat .sidebar,
|
||||
#windows .chan,
|
||||
|
|
|
|||
|
|
@ -23,6 +23,14 @@ body {
|
|||
color: #dcdccc;
|
||||
}
|
||||
|
||||
.loading-logo-bright {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-logo-dark {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#main,
|
||||
#chat .sidebar,
|
||||
#windows .chan,
|
||||
|
|
|
|||
Loading…
Reference in a new issue