Redo placeholder before loading screens for inner and outer
This commit is contained in:
parent
4b7e1b0757
commit
edaa8e1d9e
|
@ -8,7 +8,7 @@
|
||||||
<link rel="icon" type="image/png" href="/customize/favicon/main-favicon.png" id="favicon"/>
|
<link rel="icon" type="image/png" href="/customize/favicon/main-favicon.png" id="favicon"/>
|
||||||
<script src="/customize/pre-loading.js"></script>
|
<script src="/customize/pre-loading.js"></script>
|
||||||
<script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
<script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||||
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
<link href="/customize/src/pre-loading.css" rel="stylesheet" type="text/css">
|
||||||
</head>
|
</head>
|
||||||
<body class="html">
|
<body class="html">
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|
|
@ -1,11 +1,7 @@
|
||||||
var logoPath = (/^\/(|index\.html)$/g.test(location.pathname)) ? '/customize/CryptPad_logo_grey.svg': '/customize/CryptPad_logo.svg';
|
var logoPath = '/customize/CryptPad_logo.svg';
|
||||||
|
|
||||||
var logoPath2 = '/customize/CryptPad_logo.svg';
|
|
||||||
if (location.pathname == '/' || location.pathname == '/index.html') {
|
if (location.pathname == '/' || location.pathname == '/index.html') {
|
||||||
logoPath2 = '/customize/CryptPad_logo_grey.svg';
|
logoPath = '/customize/CryptPad_logo_hero.svg';
|
||||||
}
|
}
|
||||||
// XXX rewrite 'CryptPad_logo_grey' by 'CryptPad_logo_hero'
|
|
||||||
// Choose between logoPath & logoPath2 OR do a separate "pre-loading" script for main page (customize/index.html)
|
|
||||||
|
|
||||||
var elem = document.createElement('div');
|
var elem = document.createElement('div');
|
||||||
elem.setAttribute('id', 'placeholder');
|
elem.setAttribute('id', 'placeholder');
|
||||||
|
|
|
@ -18,88 +18,3 @@ iframe-placeholder, #sbox-iframe, #sbox-secure-iframe {
|
||||||
padding:0;
|
padding:0;
|
||||||
overflow:hidden;
|
overflow:hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@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: -1;
|
|
||||||
top: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
right: 0px;
|
|
||||||
background-color: #EEEEEE; /* Hardcoded, really? @cp_loading-bg before */
|
|
||||||
color: #424242; /* @cp_loading-fg before (colortheme.less) */
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
#placeholder .placeholder-logo-container {
|
|
||||||
height: 300px;
|
|
||||||
width: 300px;
|
|
||||||
margin-top: 50px;
|
|
||||||
flex: 0 1 auto;
|
|
||||||
min-height: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#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;
|
|
||||||
}
|
|
||||||
#placeholder .placeholder-logo {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
max-width: 90vw;
|
|
||||||
max-height: 300px;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -0,0 +1,90 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
#placeholder .placeholder-logo {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 90vw;
|
||||||
|
max-height: 300px;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -47,8 +47,7 @@ $(function () {
|
||||||
], function () {
|
], function () {
|
||||||
var $main = $(infoPage());
|
var $main = $(infoPage());
|
||||||
|
|
||||||
// Clean placeholder
|
$('#placeholder').remove();
|
||||||
document.querySelector('#placeholder').remove();
|
|
||||||
|
|
||||||
$body.append($main);
|
$body.append($main);
|
||||||
|
|
||||||
|
|
|
@ -984,6 +984,9 @@ define([
|
||||||
Loading();
|
Loading();
|
||||||
todo();
|
todo();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Remove the inner placeholder (iframe)
|
||||||
|
$('#placeholder').remove();
|
||||||
};
|
};
|
||||||
UI.updateLoadingProgress = function (data) {
|
UI.updateLoadingProgress = function (data) {
|
||||||
if (window.CryptPad_updateLoadingProgress) {
|
if (window.CryptPad_updateLoadingProgress) {
|
||||||
|
|
|
@ -228,12 +228,6 @@ define([
|
||||||
// Answer with the requested data
|
// Answer with the requested data
|
||||||
postMsg(JSON.stringify({ txid: data.txid, cache: cache, localStore: localStore, language: Cryptpad.getLanguage() }));
|
postMsg(JSON.stringify({ txid: data.txid, cache: cache, localStore: localStore, language: Cryptpad.getLanguage() }));
|
||||||
|
|
||||||
// Remove the placeholder once iframe overwrites it for sure
|
|
||||||
setTimeout(function() {
|
|
||||||
document.querySelector('#placeholder').remove();
|
|
||||||
console.log('Pre-loading placeholder removed');
|
|
||||||
}, (5 * 1000));
|
|
||||||
|
|
||||||
// Then start the channel
|
// Then start the channel
|
||||||
window.addEventListener('message', function (msg) {
|
window.addEventListener('message', function (msg) {
|
||||||
if (msg.source !== iframe) { return; }
|
if (msg.source !== iframe) { return; }
|
||||||
|
@ -1960,6 +1954,9 @@ define([
|
||||||
rtConfig = rtConfig || {};
|
rtConfig = rtConfig || {};
|
||||||
rtStarted = true;
|
rtStarted = true;
|
||||||
|
|
||||||
|
// Remove the outer placeholder once iframe overwrites it for sure
|
||||||
|
document.querySelector('#placeholder').remove();
|
||||||
|
|
||||||
var replaceHash = function (hash) {
|
var replaceHash = function (hash) {
|
||||||
// The pad has just been created but is not stored yet. We'll switch
|
// The pad has just been created but is not stored yet. We'll switch
|
||||||
// to hidden hash once the pad is stored
|
// to hidden hash once the pad is stored
|
||||||
|
@ -2196,3 +2193,4 @@ define([
|
||||||
|
|
||||||
return common;
|
return common;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -7,7 +7,9 @@
|
||||||
<meta name="referrer" content="no-referrer" />
|
<meta name="referrer" content="no-referrer" />
|
||||||
<script src="/customize/pre-loading.js"></script>
|
<script src="/customize/pre-loading.js"></script>
|
||||||
<script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
<script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||||
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
<link href="/customize/src/pre-loading.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<iframe-placeholder>
|
<iframe-placeholder>
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,9 @@
|
||||||
<html class="cp-app-noscroll cp-app-print">
|
<html class="cp-app-noscroll cp-app-print">
|
||||||
<head>
|
<head>
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||||
|
<script src="/customize/pre-loading.js"></script>
|
||||||
<script async data-bootload="/pad/inner.js" data-main="/common/sframe-boot.js?ver=1.11" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
<script async data-bootload="/pad/inner.js" data-main="/common/sframe-boot.js?ver=1.11" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||||
|
<link href="/customize/src/pre-loading.css" rel="stylesheet" type="text/css">
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
|
Loading…
Reference in New Issue