Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

minor: Introduce color logo on loading page. 

With a few small styling tweaks from tabbott.

Fixes #18890.
This commit is contained in:
nooblag 2021-06-25 12:39:29 +10:00 committed by Tim Abbott
parent ac568d303c
commit 3d66914cca
1 changed files with 40 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
templates/zerver/app/index.html
View File

@ -12,6 +12,7 @@
<link href="/static/images/logo/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed" />
<style>
#app-loading {
font-size: 16px;
background-color: hsl(0, 0%, 100%);
position: fixed;
height: 100%;
@ -21,7 +22,28 @@
left: 0px;
z-index: 9001;
}
#app-loading-middle-content, #app-loading-bottom-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 10px;
}
#app-loading-logo {
width: 96px;
height: 96px;
margin: 0 auto 24px;
}
#app-loading-middle-content h3 {
text-align: center;
}
#app-loading-bottom-content {
top: unset;
bottom: 20px;
}
body.night-mode #app-loading {
background-color: hsl(212, 28%, 18%);
}
</style>
{% endblock %}
@ -30,16 +52,23 @@
</div>
<div id="app-loading">
<h3>{{ _('Loading...') }}</h3>
<p>{% trans %}If this message does not go away, please wait a couple seconds and <a id="reload-lnk">reload</a> the page.{% endtrans %}</p>
<script nonce="{{ csp_nonce }}">
document.addEventListener('DOMContentLoaded', function () {
function reload() {
location.reload(true);
}
document.getElementById('reload-lnk').addEventListener('click', reload);
});
</script>
<div id="app-loading-middle-content">
<div id="app-loading-logo">
<img src="/static/images/logo/zulip-icon-circle.svg" />
</div>
<h3>{{ _('Loading...') }}</h3>
</div>
<div id="app-loading-bottom-content">
<p>{% trans %}If this message does not go away, please wait a couple seconds and <a id="reload-lnk">reload</a> the page.{% endtrans %}</p>
<script nonce="{{ csp_nonce }}">
document.addEventListener('DOMContentLoaded', function () {
function reload() {
location.reload(true);
}
document.getElementById('reload-lnk').addEventListener('click', reload);
});
</script>
</div>
</div>
<div class="subscriptions">