Fix loading page styling

This commit is contained in:
Jérémie Astori 2019-02-15 01:40:42 -05:00
parent 013129da1f
commit 2657332919
No known key found for this signature in database
GPG key ID: B9A4F245CD67BDE8
3 changed files with 23 additions and 15 deletions

View file

@ -888,8 +888,7 @@ background on hover (unless active) */
line-height: 1.5;
}
#loading,
#windows .window {
.window {
background: var(--window-bg-color);
display: none;
overflow-y: auto;
@ -899,7 +898,7 @@ background on hover (unless active) */
}
#chat .chan,
#windows .window {
.window {
/* flexbox does not seem to scroll without doing this */
position: absolute;
bottom: 0;
@ -1619,9 +1618,17 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#loading {
font-size: 14px;
z-index: 1;
height: 100%;
}
#loading .window {
height: initial;
display: flex;
flex-direction: column;
bottom: 5px;
left: 5px;
right: 5px;
top: 5px;
}
#loading p {

View file

@ -49,16 +49,18 @@
</head>
<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
<div id="loading">
<div id="loading-status-container">
<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" 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 class="window">
<div id="loading-status-container">
<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" 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="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="viewport"></div>

View file

@ -6,7 +6,7 @@
padding-left: 0;
}
#windows .window {
.window {
border-radius: 5px;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
@ -17,7 +17,6 @@
padding: 0;
}
#viewport #loading,
#viewport #sign-in {
margin-left: 0;
}