diff --git a/customize.dist/index.html b/customize.dist/index.html index f1cf1b429..ca17aeb1f 100644 --- a/customize.dist/index.html +++ b/customize.dist/index.html @@ -6,6 +6,8 @@ + + diff --git a/customize.dist/pre-loading.js b/customize.dist/pre-loading.js new file mode 100644 index 000000000..3e7bc5b51 --- /dev/null +++ b/customize.dist/pre-loading.js @@ -0,0 +1,26 @@ +(function () { +var logoPath = '/customize/CryptPad_logo.svg'; +if (location.pathname === '/' || location.pathname === '/index.html') { + logoPath = '/customize/CryptPad_logo_hero.svg'; +} + +var elem = document.createElement('div'); +elem.setAttribute('id', 'placeholder'); +elem.innerHTML = [ + '
', + '', + '
', + '
', + '

Loading...

', + '
' +].join(''); + +document.addEventListener('DOMContentLoaded', function() { + document.body.appendChild(elem); + // fallback if CSS animations not available + setTimeout(() => { + document.querySelector('.placeholder-logo-container').style.opacity = 100; + document.querySelector('.placeholder-message-container').style.opacity = 100; + }, 3000); +}); +}()); diff --git a/customize.dist/src/pre-loading.css b/customize.dist/src/pre-loading.css new file mode 100644 index 000000000..bacb667fe --- /dev/null +++ b/customize.dist/src/pre-loading.css @@ -0,0 +1,99 @@ +@font-face { + font-family: 'Open Sans'; + src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot'); + src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), + url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.woff') format('woff'), + url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.ttf') format('truetype'), + url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg'); + font-weight: normal; + font-style: normal; +} + +#placeholder { + visibility: visible; + position: fixed; + z-index: -10; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + background-color: #EEEEEE; /* @cp_loading-bg */ + color: #424242; /* @cp_loading-fg */ + font-size: 1.3em; + line-height: 120%; + opacity: 1; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + font: 20px 'Open Sans', 'Helvetica Neue', sans-serif !important; +} +@media (prefers-color-scheme: dark) { + #placeholder { + background-color: #212121; /* @cp_loading-bg (dark) */ + color: #EEEEEE; /* @cp_loading-fg (dark) */ + } +} +#placeholder .placeholder-logo-container { + height: 300px; + width: 300px; + margin-top: 50px; + flex: 0 1 auto; + min-height: 0; + text-align: center; + opacity: 0; + animation: fadein 5s ease 2s forwards; +} +#placeholder .placeholder-logo-container img { + max-width: 100%; + max-height: 100%; +} +#placeholder .placeholder-message-container { + width: 700px; + max-width: 90vw; + height: 236px; + max-height: calc(100vh - 20px); + margin: 50px; + flex-shrink: 0; + display: flex; + flex-flow: column; + align-items: center; + opacity: 0; + animation: fadein 5s ease 2s forwards; +} +#placeholder .placeholder-logo { + margin-left: auto; + margin-right: auto; + max-width: 90vw; + max-height: 300px; + width: auto; + height: auto; + margin-bottom: 2em; +} + +@keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} + +@media screen and (max-width: 500px) { + #placeholder { + font-size: 16px !important; + } + #placeholder .placeholder-message-container { + height: 206px; + } +} +@media screen and (max-height: 700px) { + #placeholder { + font-size: 16px !important; + } + #placeholder .placeholder-message-container { + height: 206px; + } +} +@media screen and (max-height: 500px) { + #placeholder .placeholder-logo-container { + display: none; + } +} diff --git a/customize.dist/template.js b/customize.dist/template.js index a2b65cbec..fae7ca2bd 100644 --- a/customize.dist/template.js +++ b/customize.dist/template.js @@ -47,6 +47,8 @@ $(function () { ], function () { var $main = $(infoPage()); + $('#placeholder').remove(); + $body.append($main); if (/^\/register\//.test(pathname)) { diff --git a/www/admin/index.html b/www/admin/index.html index 96a3cce86..46d15f68c 100644 --- a/www/admin/index.html +++ b/www/admin/index.html @@ -5,6 +5,8 @@ + + diff --git a/www/admin/inner.html b/www/admin/inner.html index c4f3498e5..9fd8787ae 100644 --- a/www/admin/inner.html +++ b/www/admin/inner.html @@ -2,6 +2,8 @@ + +