0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

fix #1812 (Loading screen reflection assumes a specific site logo ratio)

Browse source
This commit is contained in:
rolux 2013-08-14 16:18:58 +00:00
parent 7649be7783
commit b05d4c81da
1 changed files with 19 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
static/js/pandora.js
View file

@ -47,6 +47,8 @@ appPanel
&& !(Math.round(navigator.userAgent.match(/MSIE (\d+)/)[1]) >= 10), && !(Math.round(navigator.userAgent.match(/MSIE (\d+)/)[1]) >= 10),
isPrint = /^#print(\?.*?)?$/.test(document.location.hash), isPrint = /^#print(\?.*?)?$/.test(document.location.hash),
legacyThemes = {classic: 'oxlight', modern: 'oxdark'}, legacyThemes = {classic: 'oxlight', modern: 'oxdark'},
logoHeight,
logoWidth,
theme = getLocalStorage('Ox.theme') theme = getLocalStorage('Ox.theme')
&& JSON.parse(localStorage['Ox.theme']) || 'oxmedium'; && JSON.parse(localStorage['Ox.theme']) || 'oxmedium';
@ -82,26 +84,27 @@ appPanel
var images = {}; var images = {};
images.logo = document.createElement('img'); images.logo = document.createElement('img');
images.logo.onload = function() { images.logo.onload = function() {
var ratio = images.logo.width / images.logo.height, var ratio = images.logo.width / images.logo.height;
width = isEmbed || isPrint ? 96 : 320, logoWidth = isEmbed || isPrint ? 96 : 320;
height = width / ratio; logoHeight = Math.round(logoWidth / ratio);
console.log(images.logo.width, images.logo.height, '.....', logoHeight)
images.logo.style.position = 'absolute'; images.logo.style.position = 'absolute';
images.logo.style.left = 0; images.logo.style.left = 0;
images.logo.style.top = 0; images.logo.style.top = 0;
images.logo.style.right = 0; images.logo.style.right = 0;
images.logo.style.bottom = height + 'px'; images.logo.style.bottom = logoHeight + 'px';
images.logo.style.width = width + 'px'; images.logo.style.width = logoWidth + 'px';
images.logo.style.height = height + 'px'; images.logo.style.height = logoHeight + 'px';
images.logo.style.margin = 'auto'; images.logo.style.margin = 'auto';
if (!isMSIE) { if (!isMSIE) {
images.reflection = document.createElement('img'); images.reflection = document.createElement('img');
images.reflection.style.position = 'absolute'; images.reflection.style.position = 'absolute';
images.reflection.style.left = 0; images.reflection.style.left = 0;
images.reflection.style.top = height + 'px'; images.reflection.style.top = logoHeight + 'px';
images.reflection.style.right = 0; images.reflection.style.right = 0;
images.reflection.style.bottom = 0; images.reflection.style.bottom = 0;
images.reflection.style.width = width + 'px'; images.reflection.style.width = logoWidth + 'px';
images.reflection.style.height = height + 'px'; images.reflection.style.height = logoHeight + 'px';
images.reflection.style.margin = 'auto'; images.reflection.style.margin = 'auto';
images.reflection.style.MozTransform = 'scaleY(-1)'; images.reflection.style.MozTransform = 'scaleY(-1)';
images.reflection.style.MSTransform = 'scaleY(-1)'; images.reflection.style.MSTransform = 'scaleY(-1)';
@ -129,16 +132,17 @@ appPanel
function loadScreen(images) { function loadScreen(images) {
var gradient, loadingScreen;
if (!isMSIE) { if (!isMSIE) {
var gradient = document.createElement('div'); gradient = document.createElement('div');
gradient.style.position = 'absolute'; gradient.style.position = 'absolute';
gradient.style.left = 0; gradient.style.left = 0;
gradient.style.top = isEmbed || isPrint ? '48px' : '160px'; gradient.style.top = logoHeight + 'px';
gradient.style.right = 0; gradient.style.right = 0;
gradient.style.bottom = 0; gradient.style.bottom = 0;
// FIXME: should be 320 and 160 - the values below are temporary fixes for Chrome 26 // + 2 is a temporary fix for Chrome 26
gradient.style.width = isEmbed || isPrint ? '98px' : '322px'; gradient.style.width = logoWidth + 2 + 'px'
gradient.style.height = isEmbed || isPrint ? '50px' : '162px'; gradient.style.height = logoHeight + 2 + 'px';
gradient.style.margin = 'auto'; gradient.style.margin = 'auto';
['-moz-', '-ms-', '-o-', '-webkit-', ''].forEach(function(prefix) { ['-moz-', '-ms-', '-o-', '-webkit-', ''].forEach(function(prefix) {
gradient.style.background = theme == 'oxlight' ? prefix + 'linear-gradient(top, rgba(224, 224, 224, 0.75), rgba(224, 224, 224, 1), rgba(224, 224, 224, 1))' gradient.style.background = theme == 'oxlight' ? prefix + 'linear-gradient(top, rgba(224, 224, 224, 0.75), rgba(224, 224, 224, 1), rgba(224, 224, 224, 1))'
@ -147,7 +151,7 @@ appPanel
}); });
} }
var loadingScreen = document.createElement('div'); loadingScreen = document.createElement('div');
loadingScreen.setAttribute('id', 'loadingScreen'); loadingScreen.setAttribute('id', 'loadingScreen');
loadingScreen.className = 'OxScreen'; loadingScreen.className = 'OxScreen';
loadingScreen.style.position = 'absolute'; loadingScreen.style.position = 'absolute';