9 changed files with 156 additions and 258 deletions
Unified 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