github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 13:53:45 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Prevent overlap between splash loader and splash text on some browsers (#17340)

Browse Source 
Context: https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/23?u=johani

Not all browsers respect padding on absolute elements.

There are no visual/function changes. This PR just changes the implementation to prevent the overlap on some browsers.
This commit is contained in:
Joe 2022-07-05 22:41:43 +08:00 committed by GitHub
parent 2a7fb4bf3a
commit 4acf2394e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/views/common/_discourse_splash.html.erb
View File

@ -24,8 +24,7 @@
height: 100vh; height: 100vh;
} }
#d-splash .preloader-text { #d-splash .preloader-text-wrapper {
padding-top: 4em;
position: absolute; position: absolute;
opacity: 0; opacity: 0;
animation: fade-in 0.5s ease-in-out; animation: fade-in 0.5s ease-in-out;
@ -35,11 +34,14 @@
color: var(--primary); color: var(--primary);
} }
#d-splash .preloader-text {
padding-top: 4em;
}
#d-splash .preloader-text:after { #d-splash .preloader-text:after {
animation: loading-text 3s infinite; animation: loading-text 3s infinite;
content: ""; content: "";
position: absolute; position: absolute;
top: 4em;
margin: 0 0.1em; margin: 0 0.1em;
left: 100%; left: 100%;
} }
@ -80,8 +82,8 @@
alt="<%=SiteSetting.title%>" alt="<%=SiteSetting.title%>"
/> />
<div class="preloader-text"> <div class="preloader-text-wrapper">
<span> <%= I18n.t("js.preloader_text") %> </span> <div class="preloader-text"><%= I18n.t("js.preloader_text") %></div>
</div> </div>
<noscript> <noscript>