From 276266e24f7a4e8a6e5d24b1e2e305694971731b Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Sat, 28 Oct 2017 23:50:57 +0300 Subject: [PATCH] Center loading screen --- client/css/style.css | 29 ++++++++++++++----- client/img/logo-vertical-transparent-bg.svg | 2 +- client/img/logo-vertical-transparent-dark.svg | 1 + client/index.html.tpl | 24 ++++++--------- client/js/loading-error-handlers.js | 9 +++--- client/themes/morning.css | 8 +++++ client/themes/zenburn.css | 8 +++++ 7 files changed, 53 insertions(+), 28 deletions(-) create mode 100644 client/img/logo-vertical-transparent-dark.svg diff --git a/client/css/style.css b/client/css/style.css index 3c39434a..a2179f44 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -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; diff --git a/client/img/logo-vertical-transparent-bg.svg b/client/img/logo-vertical-transparent-bg.svg index b92728a7..56025dc6 100644 --- a/client/img/logo-vertical-transparent-bg.svg +++ b/client/img/logo-vertical-transparent-bg.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/client/img/logo-vertical-transparent-dark.svg b/client/img/logo-vertical-transparent-dark.svg new file mode 100644 index 00000000..6b8e39e9 --- /dev/null +++ b/client/img/logo-vertical-transparent-dark.svg @@ -0,0 +1 @@ + diff --git a/client/index.html.tpl b/client/index.html.tpl index 8132f366..e3ac9621 100644 --- a/client/index.html.tpl +++ b/client/index.html.tpl @@ -49,22 +49,16 @@
-
-
-
-

The Lounge is loading…

-
-
-

Loading the app… Make sure to have JavaScript enabled.

-

- This is taking longer than it should, there might be - connectivity issues. -

- - -
-
+ +
+

This is taking longer than it should, there might be connectivity issues.

+ +
+
diff --git a/client/js/loading-error-handlers.js b/client/js/loading-error-handlers.js index 66b9f2b4..6c291316 100644 --- a/client/js/loading-error-handlers.js +++ b/client/js/loading-error-handlers.js @@ -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."; diff --git a/client/themes/morning.css b/client/themes/morning.css index 0e01a6ac..8f5db662 100644 --- a/client/themes/morning.css +++ b/client/themes/morning.css @@ -22,6 +22,14 @@ body { color: #ccc; } +.loading-logo-bright { + display: none; +} + +.loading-logo-dark { + display: inline-block; +} + #main, #chat .sidebar, #windows .chan, diff --git a/client/themes/zenburn.css b/client/themes/zenburn.css index 62cf36ad..3eb02766 100644 --- a/client/themes/zenburn.css +++ b/client/themes/zenburn.css @@ -23,6 +23,14 @@ body { color: #dcdccc; } +.loading-logo-bright { + display: none; +} + +.loading-logo-dark { + display: inline-block; +} + #main, #chat .sidebar, #windows .chan,