mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-27 02:59:21 +03:00
Better boot response by splitting and embedding boot css/html into index.html
This commit is contained in:
djmaze
parent
f2d194947d
commit
45aaa17219
12 changed files with 142 additions and 153 deletions
57
dev/Styles/@Boot.css
Normal file
57
dev/Styles/@Boot.css
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
html, body {
|
||||
background-color: #eee;
|
||||
font-family: "DejaVu Sans", Verdana, Geneva, "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #aaa;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#rl-content, #rl-loading-error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rl-loading, #rl-loading-error {
|
||||
font-size: 30px;
|
||||
line-height: 130%;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.e-spinner {
|
||||
margin: 5px auto 0;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.e-spinner .e-bounce {
|
||||
animation: bouncedelay 1.4s infinite ease-in-out;
|
||||
background-color: #333;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
|
||||
display: inline-block;
|
||||
height: 15px;
|
||||
margin: 0 5px;
|
||||
width: 15px;
|
||||
/* Prevent first frame from flickering when animation starts */
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.e-spinner .bounce1 {
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.e-spinner .bounce2 {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@keyframes bouncedelay {
|
||||
0%, 80%, 100% { transform: scale(0.0); }
|
||||
40% { transform: scale(1.0); }
|
||||
}
|
||||
|
|
@ -40,10 +40,6 @@ html.rl-started-trigger.no-mobile .b-login-content .loginFormWrapper {
|
|||
opacity: 0.7;
|
||||
}*/
|
||||
|
||||
#rl-loading {
|
||||
transition: opacity 0.5s linear;
|
||||
}
|
||||
|
||||
html.rl-started-delay {
|
||||
|
||||
#rl-left {
|
||||
|
|
|
|||
|
|
@ -419,29 +419,6 @@ html.rl-ctrl-key-pressed {
|
|||
}
|
||||
}
|
||||
|
||||
#rl-loading, #rl-loading-error {
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
line-height: 130%;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
margin: 0;
|
||||
margin-top: -60px;
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#rl-loading-error {
|
||||
background-image: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rl-app{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rl-content-show {
|
||||
display: block !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -152,10 +152,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.e-spinner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.e-mobile-switcher {
|
||||
margin-top: 8px;
|
||||
color: #333;
|
||||
|
|
@ -187,43 +183,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
html {
|
||||
|
||||
.e-spinner {
|
||||
display: block;
|
||||
margin: 5px auto 0;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.e-spinner .e-bounce {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #ddd;
|
||||
margin: 0 5px;
|
||||
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
|
||||
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
animation: bouncedelay 1.4s infinite ease-in-out;
|
||||
/* Prevent first frame from flickering when animation starts */
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.e-spinner .bounce1 {
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.e-spinner .bounce2 {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bouncedelay {
|
||||
0%, 80%, 100% { transform: scale(0.0); }
|
||||
40% { transform: scale(1.0); }
|
||||
}
|
||||
|
||||
.command.command-disabled.hide-on-disabled-command {
|
||||
display:none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
.progressjs-inner {
|
||||
width: 0;
|
||||
}
|
||||
.progressjs-progress {
|
||||
z-index: 9999999;
|
||||
}
|
||||
|
||||
.progressjs-theme-rainloop {
|
||||
.progressjs {
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -13,17 +6,17 @@
|
|||
z-index: 2000;
|
||||
}
|
||||
|
||||
.progressjs-theme-rainloop .progressjs-inner {
|
||||
|
||||
.progressjs-inner {
|
||||
background-color: #939595;
|
||||
position: relative;
|
||||
z-index: 2000;
|
||||
height: 3px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: width .5s;
|
||||
width: 0;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.progressjs-theme-rainloop .progressjs-percent {
|
||||
.progressjs-percent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -31,10 +24,10 @@
|
|||
bottom: 0;
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
|
||||
background-size: 32px 32px;
|
||||
animation: simple-pace-stripe-animation 500ms linear infinite;
|
||||
animation: simple-pace-stripe-animation 500ms linear infinite;
|
||||
}
|
||||
|
||||
@keyframes simple-pace-stripe-animation {
|
||||
0% { transform: none; transform: none; }
|
||||
100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
|
||||
0% { transform: none; }
|
||||
100% { transform: translate(-32px, 0); }
|
||||
}
|
||||
|
|
|
|||
66
dev/boot.js
66
dev/boot.js
|
|
@ -78,9 +78,7 @@ const
|
|||
script.onload = () => resolve();
|
||||
script.onerror = () => reject(new Error(src));
|
||||
script.src = src;
|
||||
// script.type = 'text/javascript';
|
||||
doc.head.append(script);
|
||||
// doc.body.append(element);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -97,17 +95,16 @@ const
|
|||
}
|
||||
};
|
||||
|
||||
let container = doc.createElement('div'),
|
||||
progress = container.appendChild(doc.createElement("div")),
|
||||
if (!navigator || !navigator.cookieEnabled) {
|
||||
doc.location.replace('./?/NoCookie');
|
||||
}
|
||||
|
||||
let container = doc.querySelector('.progressjs'),
|
||||
progress = doc.querySelector('.progressjs-inner'),
|
||||
|
||||
RL_APP_DATA_STORAGE = {};
|
||||
|
||||
container.className = 'progressjs-progress progressjs-theme-rainloop';
|
||||
progress.className = "progressjs-inner";
|
||||
progress.appendChild(doc.createElement('div')).className = "progressjs-percent";
|
||||
|
||||
p.set(1);
|
||||
doc.body.append(container);
|
||||
|
||||
Storage('local');
|
||||
Storage('session');
|
||||
|
|
@ -170,25 +167,11 @@ win.__initAppData = appData => {
|
|||
rl.hash.set();
|
||||
|
||||
if (appData) {
|
||||
const css = appData.IncludeCss,
|
||||
theme = appData.NewThemeLink,
|
||||
description= appData.LoadingDescriptionEsc || '',
|
||||
oE = doc.getElementById('rl-loading'),
|
||||
oElDesc = doc.getElementById('rl-loading-desc');
|
||||
|
||||
if (theme) {
|
||||
(doc.getElementById('app-theme-link') || {}).href = theme;
|
||||
if (appData.NewThemeLink) {
|
||||
(doc.getElementById('app-theme-link') || {}).href = appData.NewThemeLink;
|
||||
}
|
||||
|
||||
css && writeCSS(css);
|
||||
|
||||
if (oElDesc && description) {
|
||||
oElDesc.innerHTML = description;
|
||||
}
|
||||
if (oE && oE.style) {
|
||||
oE.style.opacity = 0;
|
||||
setTimeout(() => oE.style.opacity = 1, 300);
|
||||
}
|
||||
appData.IncludeCss && writeCSS(appData.IncludeCss);
|
||||
}
|
||||
|
||||
if (
|
||||
|
|
@ -246,32 +229,11 @@ win.__initAppData = appData => {
|
|||
}
|
||||
};
|
||||
|
||||
if (!navigator || !navigator.cookieEnabled) {
|
||||
doc.location.replace('./?/NoCookie');
|
||||
}
|
||||
|
||||
writeCSS('#rl-content{display:none;}.internal-hiddden{display:none !important;}');
|
||||
|
||||
if (app) {
|
||||
app.innerHTML = '<div id="rl-loading" class="thm-loading" style="opacity:0">\
|
||||
<div id="rl-loading-desc"></div>\
|
||||
<div class="e-spinner">\
|
||||
<div class="e-bounce bounce1"></div>\
|
||||
<div class="e-bounce bounce2"></div>\
|
||||
<div class="e-bounce bounce3"></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="rl-loading-error" class="thm-loading">An error occurred.<br/>Please refresh the page and try again.</div>\
|
||||
<div id="rl-content">\
|
||||
<div id="rl-popups"></div>\
|
||||
<div id="rl-center">\
|
||||
<div id="rl-top"></div>\
|
||||
<div id="rl-left"></div>\
|
||||
<div id="rl-right"></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="rl-templates"></div>\
|
||||
<div id="rl-hidden"></div>'.replace(/[\r\n\t]+/g, '');
|
||||
['app-css','app-theme-link'].forEach(css => {
|
||||
css = doc.getElementById(css);
|
||||
css.href = css.dataset.href;
|
||||
});
|
||||
|
||||
loadScript('./?/'
|
||||
+ (options.admin ? 'Admin' : '')
|
||||
|
|
@ -285,4 +247,4 @@ if (app) {
|
|||
+ '/').then(() => {});
|
||||
}
|
||||
|
||||
})(window);
|
||||
})(this);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue