9 changed files with 156 additions and 258 deletions
Split View
Diff Options
-
BINcustomize.dist/loading-logo.png
-
145customize.dist/loading.js
-
1customize.dist/login.js
-
21customize.dist/pages.js
-
73customize.dist/src/less2/loading.less
-
1customize.dist/src/less2/pages/page-login.less
-
1customize.dist/src/less2/pages/page-register.less
-
30www/common/common-interface.js
-
142www/common/loading.js
@ -0,0 +1,145 @@ |
|||
// dark #326599
|
|||
// light #4591c4
|
|||
define([], function () { |
|||
var loadingStyle = (function(){/* |
|||
#cp-loading { |
|||
transition: opacity 0.75s, visibility 0s 0.75s; |
|||
visibility: visible; |
|||
position: fixed; |
|||
z-index: 10000000; |
|||
top: 0px; |
|||
bottom: 0px; |
|||
left: 0px; |
|||
right: 0px; |
|||
background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%); |
|||
color: #fafafa; |
|||
font-size: 1.5em; |
|||
opacity: 1; |
|||
display: flex; |
|||
flex-flow: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
#cp-loading.cp-loading-hidden { |
|||
opacity: 0; |
|||
visibility: hidden; |
|||
} |
|||
#cp-loading .cp-loading-logo { |
|||
height: 300px; |
|||
width: 300px; |
|||
margin-top: 50px; |
|||
flex: 0 1 auto; |
|||
min-height: 0; |
|||
text-align: center; |
|||
} |
|||
#cp-loading .cp-loading-logo img { |
|||
max-width: 100%; |
|||
max-height: 100%; |
|||
} |
|||
#cp-loading .cp-loading-container { |
|||
width: 700px; |
|||
max-width: 90vw; |
|||
height: 500px; |
|||
max-height: calc(100vh - 20px); |
|||
margin: 50px; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
flex-flow: column; |
|||
justify-content: center; |
|||
justify-content: space-evenly; |
|||
align-items: center; |
|||
} |
|||
@media screen and (max-height: 800px) { |
|||
#cp-loading .cp-loading-container { |
|||
height: auto; |
|||
} |
|||
} |
|||
@media screen and (max-width: 600px) { |
|||
#cp-loading .cp-loading-container { |
|||
height: auto; |
|||
} |
|||
} |
|||
#cp-loading .cp-loading-cryptofist { |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
//height: 300px;
|
|||
max-width: 90vw; |
|||
max-height: 300px; |
|||
width: auto; |
|||
height: auto; |
|||
margin-bottom: 2em; |
|||
} |
|||
@media screen and (max-height: 450px) { |
|||
#cp-loading .cp-loading-cryptofist { |
|||
} |
|||
} |
|||
#cp-loading-message { |
|||
background: #FFF; |
|||
padding: 20px; |
|||
width: 100%; |
|||
color: #000; |
|||
text-align: center; |
|||
display: none; |
|||
} |
|||
#cp-loading .cp-loading-spinner-container { |
|||
position: relative; |
|||
height: 100px; |
|||
} |
|||
#cp-loading .cp-loading-spinner-container > div { |
|||
height: 100px; |
|||
} |
|||
#cp-loading-tip { |
|||
position: fixed; |
|||
z-index: 10000000; |
|||
top: 80%; |
|||
left: 0; |
|||
right: 0; |
|||
text-align: center; |
|||
transition: opacity 750ms; |
|||
transition-delay: 3000ms; |
|||
} |
|||
@media screen and (max-height: 600px) { |
|||
#cp-loading-tip { |
|||
display: none; |
|||
} |
|||
} |
|||
#cp-loading-tip span { |
|||
background: #222; |
|||
color: #fafafa; |
|||
text-align: center; |
|||
font-size: 1.5em; |
|||
opacity: 0.7; |
|||
font-family: 'Open Sans', 'Helvetica Neue', sans-serif; |
|||
padding: 15px; |
|||
max-width: 60%; |
|||
display: inline-block; |
|||
} |
|||
*/}).toString().slice(14, -3); |
|||
var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; }); |
|||
var elem = document.createElement('div'); |
|||
elem.setAttribute('id', 'cp-loading'); |
|||
elem.innerHTML = [ |
|||
'<style>', |
|||
loadingStyle, |
|||
'</style>', |
|||
'<div class="cp-loading-logo">', |
|||
'<img class="cp-loading-cryptofist" src="/customize/loading-logo.png?' + urlArgs + '">', |
|||
'</div>', |
|||
'<div class="cp-loading-container">', |
|||
'<div class="cp-loading-spinner-container">', |
|||
'<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>', |
|||
'</div>', |
|||
'<p id="cp-loading-message"></p>', |
|||
'</div>' |
|||
].join(''); |
|||
return function () { |
|||
var intr; |
|||
var append = function () { |
|||
if (!document.body) { return; } |
|||
clearInterval(intr); |
|||
document.body.appendChild(elem); |
|||
}; |
|||
intr = setInterval(append, 100); |
|||
append(); |
|||
}; |
|||
}); |
|||
@ -1,73 +0,0 @@ |
|||
/* |
|||
WARNING: THIS FILE DOES NOTHING |
|||
It exists only as a proposal of what CSS you should use in loading.js |
|||
The CSS inside of loading.js is precompiled in order to save 200ish milliseconds to the loading screen. |
|||
*/ |
|||
@import (once) "./include/colortheme-all.less"; |
|||
@import (once) "./include/browser.less"; |
|||
|
|||
#cp-loading { |
|||
transition: opacity 0.75s, visibility 0s 0.75s; |
|||
visibility: visible; |
|||
opacity: 1; |
|||
position: fixed; |
|||
z-index: 10000000; // #loading |
|||
top: 0px; |
|||
bottom: 0px; |
|||
left: 0px; |
|||
right: 0px; |
|||
background: @colortheme_loading-bg; |
|||
color: @colortheme_loading-color; |
|||
text-align: center; |
|||
font-size: 1.5em; |
|||
.cp-loading-container { |
|||
margin-top: 50vh; |
|||
transform: translateY(-50%); |
|||
} |
|||
.cp-loading-cryptofist { |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
height: 300px; |
|||
margin-bottom: 2em; |
|||
@media screen and (max-height: @browser_media-short-screen) { |
|||
display: none; |
|||
} |
|||
} |
|||
.cp-loading-spinner-container { |
|||
position: relative; |
|||
height: 100px; |
|||
> div { |
|||
height: 100px; |
|||
} |
|||
} |
|||
&.cp-loading-hidden { |
|||
opacity: 0; |
|||
visibility: hidden; |
|||
} |
|||
} |
|||
#cp-loading-tip { |
|||
position: fixed; |
|||
z-index: 10000000; // loading tip |
|||
top: 80%; |
|||
left: 0; |
|||
right: 0; |
|||
text-align: center; |
|||
|
|||
transition: opacity 750ms; |
|||
transition-delay: 3000ms; |
|||
@media screen and (max-height: @browser_media-medium-screen) { |
|||
display: none; |
|||
} |
|||
span { |
|||
background: @colortheme_loading-bg; |
|||
color: @colortheme_loading-color; |
|||
text-align: center; |
|||
font-size: 1.5em; |
|||
opacity: 0.7; |
|||
font-family: @colortheme_font; |
|||
padding: 15px; |
|||
max-width: 60%; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
|
|||
@ -1,141 +1,3 @@ |
|||
// dark #326599
|
|||
// light #4591c4
|
|||
define([], function () { |
|||
var loadingStyle = (function(){/* |
|||
#cp-loading { |
|||
transition: opacity 0.75s, visibility 0s 0.75s; |
|||
visibility: visible; |
|||
position: fixed; |
|||
z-index: 10000000; |
|||
top: 0px; |
|||
bottom: 0px; |
|||
left: 0px; |
|||
right: 0px; |
|||
background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%); |
|||
color: #fafafa; |
|||
font-size: 1.5em; |
|||
opacity: 1; |
|||
display: flex; |
|||
flex-flow: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
#cp-loading.cp-loading-hidden { |
|||
opacity: 0; |
|||
visibility: hidden; |
|||
} |
|||
#cp-loading .cp-loading-logo { |
|||
height: 300px; |
|||
width: 300px; |
|||
margin-top: 50px; |
|||
flex: 0 1 auto; |
|||
min-height: 0; |
|||
text-align: center; |
|||
} |
|||
#cp-loading .cp-loading-logo img { |
|||
max-width: 100%; |
|||
max-height: 100%; |
|||
} |
|||
#cp-loading .cp-loading-container { |
|||
width: 700px; |
|||
max-width: 90vw; |
|||
height: 500px; |
|||
max-height: calc(100vh - 20px); |
|||
margin: 50px; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
flex-flow: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
@media screen and (max-height: 800px) { |
|||
#cp-loading .cp-loading-container { |
|||
height: auto; |
|||
} |
|||
} |
|||
@media screen and (max-width: 600px) { |
|||
#cp-loading .cp-loading-container { |
|||
height: auto; |
|||
} |
|||
} |
|||
#cp-loading .cp-loading-cryptofist { |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
//height: 300px;
|
|||
max-width: 90vw; |
|||
max-height: 300px; |
|||
width: auto; |
|||
height: auto; |
|||
margin-bottom: 2em; |
|||
} |
|||
@media screen and (max-height: 450px) { |
|||
#cp-loading .cp-loading-cryptofist { |
|||
} |
|||
} |
|||
#cp-loading-message { |
|||
background: #FFF; |
|||
padding: 20px; |
|||
width: 100%; |
|||
color: #000; |
|||
display: none; |
|||
} |
|||
#cp-loading .cp-loading-spinner-container { |
|||
position: relative; |
|||
height: 100px; |
|||
} |
|||
#cp-loading .cp-loading-spinner-container > div { |
|||
height: 100px; |
|||
} |
|||
#cp-loading-tip { |
|||
position: fixed; |
|||
z-index: 10000000; |
|||
top: 80%; |
|||
left: 0; |
|||
right: 0; |
|||
text-align: center; |
|||
transition: opacity 750ms; |
|||
transition-delay: 3000ms; |
|||
} |
|||
@media screen and (max-height: 600px) { |
|||
#cp-loading-tip { |
|||
display: none; |
|||
} |
|||
} |
|||
#cp-loading-tip span { |
|||
background: #222; |
|||
color: #fafafa; |
|||
text-align: center; |
|||
font-size: 1.5em; |
|||
opacity: 0.7; |
|||
font-family: 'Open Sans', 'Helvetica Neue', sans-serif; |
|||
padding: 15px; |
|||
max-width: 60%; |
|||
display: inline-block; |
|||
} |
|||
*/}).toString().slice(14, -3); |
|||
var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; }); |
|||
var elem = document.createElement('div'); |
|||
elem.setAttribute('id', 'cp-loading'); |
|||
elem.innerHTML = [ |
|||
'<style>', |
|||
loadingStyle, |
|||
'</style>', |
|||
'<div class="cp-loading-logo">', |
|||
'<img class="cp-loading-cryptofist" src="/customize/loading-logo.png?' + urlArgs + '">', |
|||
'</div>', |
|||
'<div class="cp-loading-container">', |
|||
'<div class="cp-loading-spinner-container">', |
|||
'<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>', |
|||
'</div>', |
|||
'<p id="cp-loading-message"></p>', |
|||
'</div>' |
|||
].join(''); |
|||
var intr; |
|||
var append = function () { |
|||
if (!document.body) { return; } |
|||
clearInterval(intr); |
|||
document.body.appendChild(elem); |
|||
}; |
|||
intr = setInterval(append, 100); |
|||
append(); |
|||
require(['/customize/loading.js'], function (Loading) { |
|||
Loading(); |
|||
}); |
|||
Write
Preview
Loading…
Cancel
Save