MSIE 10 supports gradients and loading but requires height: 'auto' to get image scaling right

This commit is contained in:
j 2013-08-08 12:31:35 +00:00
parent 48985985bf
commit 62af7f05a5
5 changed files with 20 additions and 11 deletions

View file

@ -24,11 +24,14 @@ pandora.ui.home = function() {
right: 0, right: 0,
bottom: 0, bottom: 0,
width: '320px', width: '320px',
height: 'auto',
margin: 'auto', margin: 'auto',
opacity: 0, opacity: 0,
MozTransform: 'scaleY(-1)', MozTransform: 'scaleY(-1)',
MsTransform: 'scaleY(-1)',
OTransform: 'scaleY(-1)', OTransform: 'scaleY(-1)',
WebkitTransform: 'scaleY(-1)' WebkitTransform: 'scaleY(-1)',
transform: 'scaleY(-1)'
}) })
.appendTo(that), .appendTo(that),
@ -60,6 +63,7 @@ pandora.ui.home = function() {
right: 0, right: 0,
bottom: '160px', bottom: '160px',
width: window.innerWidth + 'px', width: window.innerWidth + 'px',
height: 'auto',
margin: 'auto', margin: 'auto',
cursor: 'pointer' cursor: 'pointer'
}) })

View file

@ -37,8 +37,10 @@ pandora.ui.home = function() {
right: 0, right: 0,
bottom: 0, bottom: 0,
width: '320px', width: '320px',
height: 'auto',
margin: '0 auto 0 auto', margin: '0 auto 0 auto',
MozTransform: 'scaleY(-1)', MozTransform: 'scaleY(-1)',
MsTransform: 'scaleY(-1)',
OTransform: 'scaleY(-1)', OTransform: 'scaleY(-1)',
WebkitTransform: 'scaleY(-1)' WebkitTransform: 'scaleY(-1)'
}) })
@ -72,6 +74,7 @@ pandora.ui.home = function() {
left: 0, left: 0,
right: 0, right: 0,
width: '320px', width: '320px',
height: 'auto',
margin: '0 auto 0 auto', margin: '0 auto 0 auto',
cursor: 'pointer' cursor: 'pointer'
}) })

View file

@ -43,7 +43,8 @@ appPanel
enableDebugMode = getLocalStorage('pandora.enableDebugMode'), enableDebugMode = getLocalStorage('pandora.enableDebugMode'),
enableEventLogging = getLocalStorage('pandora.enableEventLogging'), enableEventLogging = getLocalStorage('pandora.enableEventLogging'),
isEmbed = /^#embed(\?.*?)?$/.test(document.location.hash), isEmbed = /^#embed(\?.*?)?$/.test(document.location.hash),
isMSIE = /MSIE/.test(navigator.userAgent), isMSIE = /MSIE/.test(navigator.userAgent)
&& !(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'},
theme = getLocalStorage('Ox.theme') theme = getLocalStorage('Ox.theme')
@ -106,6 +107,7 @@ appPanel
images.reflection.style.MSTransform = 'scaleY(-1)'; images.reflection.style.MSTransform = 'scaleY(-1)';
images.reflection.style.OTransform = 'scaleY(-1)'; images.reflection.style.OTransform = 'scaleY(-1)';
images.reflection.style.WebkitTransform = 'scaleY(-1)'; images.reflection.style.WebkitTransform = 'scaleY(-1)';
images.reflection.style.transform = 'scaleY(-1)';
images.reflection.src = '/static/png/logo.png'; images.reflection.src = '/static/png/logo.png';
} }
images.loadingIcon = document.createElement('img'); images.loadingIcon = document.createElement('img');
@ -138,15 +140,12 @@ appPanel
gradient.style.width = isEmbed || isPrint ? '98px' : '322px'; gradient.style.width = isEmbed || isPrint ? '98px' : '322px';
gradient.style.height = isEmbed || isPrint ? '50px' : '162px'; gradient.style.height = isEmbed || isPrint ? '50px' : '162px';
gradient.style.margin = 'auto'; gradient.style.margin = 'auto';
gradient.style.background = theme == 'oxlight' ? '-moz-linear-gradient(top, rgba(224, 224, 224, 0.75), rgba(224, 224, 224, 1), rgba(224, 224, 224, 1))' ['-moz-', '-ms-', '-o-', '-webkit-', ''].forEach(function(prefix) {
: theme == 'oxmedium' ? '-moz-linear-gradient(top, rgba(144, 144, 144, 0.75), rgba(144, 144, 144, 1), rgba(144, 144, 144, 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))'
: '-moz-linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))'; : theme == 'oxmedium' ? prefix + 'linear-gradient(top, rgba(144, 144, 144, 0.75), rgba(144, 144, 144, 1), rgba(144, 144, 144, 1))'
gradient.style.background = theme == 'oxlight' ? '-o-linear-gradient(top, rgba(224, 224, 224, 0.75), rgba(224, 224, 224, 1), rgba(224, 224, 224, 1))' : prefix + 'linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))';
: theme == 'oxmedium' ? '-o-linear-gradient(top, rgba(144, 144, 144, 0.75), rgba(144, 144, 144, 1), rgba(144, 144, 144, 1))'
: '-o-linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))'; });
gradient.style.background = theme == 'oxlight' ? '-webkit-linear-gradient(top, rgba(224, 224, 224, 0.75), rgba(224, 224, 224, 1), rgba(224, 224, 224, 1))'
: theme == 'oxmedium' ? '-webkit-linear-gradient(top, rgba(144, 144, 144, 0.75), rgba(144, 144, 144, 1), rgba(144, 144, 144, 1))'
: '-webkit-linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))';
} }
var loadingScreen = document.createElement('div'); var loadingScreen = document.createElement('div');
loadingScreen.setAttribute('id', 'loadingScreen'); loadingScreen.setAttribute('id', 'loadingScreen');
@ -489,6 +488,7 @@ appPanel
loadingIcon.style.MSTransform = css; loadingIcon.style.MSTransform = css;
loadingIcon.style.OTransform = css; loadingIcon.style.OTransform = css;
loadingIcon.style.WebkitTransform = css; loadingIcon.style.WebkitTransform = css;
loadingIcon.style.transform = css;
}, 83); }, 83);
} }

View file

@ -118,6 +118,7 @@ pandora.ui.siteDialog = function(section) {
}) })
.css({ .css({
width: '256px', width: '256px',
height: 'auto',
marginTop: id == 'software' ? '-16px' : 0 marginTop: id == 'software' ? '-16px' : 0
}) })
), ),

View file

@ -86,6 +86,7 @@ pandora.ui.siteDialog = function(section) {
}) })
.css({ .css({
width: '256px', width: '256px',
height: 'auto',
marginTop: id == 'software' ? '-16px' : 0 marginTop: id == 'software' ? '-16px' : 0
}) })
), ),