From 62af7f05a5cc5935e852239bac4bfe1d7bd72fa6 Mon Sep 17 00:00:00 2001 From: j <0x006A@0x2620.org> Date: Thu, 8 Aug 2013 12:31:35 +0000 Subject: [PATCH] MSIE 10 supports gradients and loading but requires height: 'auto' to get image scaling right --- static/js/home.0xdb.js | 6 +++++- static/js/home.padma.js | 3 +++ static/js/pandora.js | 20 ++++++++++---------- static/js/siteDialog.0xdb.js | 1 + static/js/siteDialog.js | 1 + 5 files changed, 20 insertions(+), 11 deletions(-) diff --git a/static/js/home.0xdb.js b/static/js/home.0xdb.js index 546b6b2a..1614b692 100644 --- a/static/js/home.0xdb.js +++ b/static/js/home.0xdb.js @@ -24,11 +24,14 @@ pandora.ui.home = function() { right: 0, bottom: 0, width: '320px', + height: 'auto', margin: 'auto', opacity: 0, MozTransform: 'scaleY(-1)', + MsTransform: 'scaleY(-1)', OTransform: 'scaleY(-1)', - WebkitTransform: 'scaleY(-1)' + WebkitTransform: 'scaleY(-1)', + transform: 'scaleY(-1)' }) .appendTo(that), @@ -60,6 +63,7 @@ pandora.ui.home = function() { right: 0, bottom: '160px', width: window.innerWidth + 'px', + height: 'auto', margin: 'auto', cursor: 'pointer' }) diff --git a/static/js/home.padma.js b/static/js/home.padma.js index 6221cb25..9f285afc 100644 --- a/static/js/home.padma.js +++ b/static/js/home.padma.js @@ -37,8 +37,10 @@ pandora.ui.home = function() { right: 0, bottom: 0, width: '320px', + height: 'auto', margin: '0 auto 0 auto', MozTransform: 'scaleY(-1)', + MsTransform: 'scaleY(-1)', OTransform: 'scaleY(-1)', WebkitTransform: 'scaleY(-1)' }) @@ -72,6 +74,7 @@ pandora.ui.home = function() { left: 0, right: 0, width: '320px', + height: 'auto', margin: '0 auto 0 auto', cursor: 'pointer' }) diff --git a/static/js/pandora.js b/static/js/pandora.js index 4d6754d4..5038c01c 100644 --- a/static/js/pandora.js +++ b/static/js/pandora.js @@ -43,7 +43,8 @@ appPanel enableDebugMode = getLocalStorage('pandora.enableDebugMode'), enableEventLogging = getLocalStorage('pandora.enableEventLogging'), 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), legacyThemes = {classic: 'oxlight', modern: 'oxdark'}, theme = getLocalStorage('Ox.theme') @@ -106,6 +107,7 @@ appPanel images.reflection.style.MSTransform = 'scaleY(-1)'; images.reflection.style.OTransform = 'scaleY(-1)'; images.reflection.style.WebkitTransform = 'scaleY(-1)'; + images.reflection.style.transform = 'scaleY(-1)'; images.reflection.src = '/static/png/logo.png'; } images.loadingIcon = document.createElement('img'); @@ -138,15 +140,12 @@ appPanel gradient.style.width = isEmbed || isPrint ? '98px' : '322px'; gradient.style.height = isEmbed || isPrint ? '50px' : '162px'; 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))' - : theme == 'oxmedium' ? '-moz-linear-gradient(top, rgba(144, 144, 144, 0.75), rgba(144, 144, 144, 1), rgba(144, 144, 144, 1))' - : '-moz-linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 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))' - : 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))'; + ['-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))' + : theme == 'oxmedium' ? prefix + 'linear-gradient(top, rgba(144, 144, 144, 0.75), rgba(144, 144, 144, 1), rgba(144, 144, 144, 1))' + : prefix + 'linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))'; + + }); } var loadingScreen = document.createElement('div'); loadingScreen.setAttribute('id', 'loadingScreen'); @@ -489,6 +488,7 @@ appPanel loadingIcon.style.MSTransform = css; loadingIcon.style.OTransform = css; loadingIcon.style.WebkitTransform = css; + loadingIcon.style.transform = css; }, 83); } diff --git a/static/js/siteDialog.0xdb.js b/static/js/siteDialog.0xdb.js index 041198d4..8884ca0a 100644 --- a/static/js/siteDialog.0xdb.js +++ b/static/js/siteDialog.0xdb.js @@ -118,6 +118,7 @@ pandora.ui.siteDialog = function(section) { }) .css({ width: '256px', + height: 'auto', marginTop: id == 'software' ? '-16px' : 0 }) ), diff --git a/static/js/siteDialog.js b/static/js/siteDialog.js index c74b65d9..d2089340 100644 --- a/static/js/siteDialog.js +++ b/static/js/siteDialog.js @@ -86,6 +86,7 @@ pandora.ui.siteDialog = function(section) { }) .css({ width: '256px', + height: 'auto', marginTop: id == 'software' ? '-16px' : 0 }) ),