add some support for unsupported browsers
This commit is contained in:
parent
e53fe8b09a
commit
0a778de247
2 changed files with 36 additions and 5 deletions
10
index.css
10
index.css
|
@ -2,7 +2,7 @@ body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animate, .loading {
|
.animate, .loading, .warning {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
}
|
}
|
||||||
|
@ -79,13 +79,17 @@ body {
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.screen {
|
.screen {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
width: 256px;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
body.OxThemeClassic,
|
body.OxThemeClassic,
|
||||||
.OxThemeClassic .screen {
|
.OxThemeClassic .screen {
|
||||||
background-color: rgb(240, 240, 240);
|
background-color: rgb(240, 240, 240);
|
||||||
|
@ -116,4 +120,4 @@ body.OxThemeModern,
|
||||||
}
|
}
|
||||||
.OxThemeModern .readme .item.selected {
|
.OxThemeModern .readme .item.selected {
|
||||||
background: rgb(32, 32, 32);
|
background: rgb(32, 32, 32);
|
||||||
}
|
}
|
||||||
|
|
31
index.js
31
index.js
|
@ -96,6 +96,11 @@ Ox.load(function() {
|
||||||
top: '8px',
|
top: '8px',
|
||||||
right: '8px'
|
right: '8px'
|
||||||
};
|
};
|
||||||
|
} else if (element == 'warning') {
|
||||||
|
css = {
|
||||||
|
left: center - 128 + 'px',
|
||||||
|
top: middle + 16 + 'px',
|
||||||
|
};
|
||||||
}
|
}
|
||||||
return css;
|
return css;
|
||||||
},
|
},
|
||||||
|
@ -122,7 +127,7 @@ Ox.load(function() {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
load: function() {
|
load: function(browserSupported) {
|
||||||
var url = app.url.get();
|
var url = app.url.get();
|
||||||
if (url) {
|
if (url) {
|
||||||
app.user({url: url})
|
app.user({url: url})
|
||||||
|
@ -139,7 +144,19 @@ Ox.load(function() {
|
||||||
app.$ui.loading.animate({opacity: 0}, 500, function() {
|
app.$ui.loading.animate({opacity: 0}, 500, function() {
|
||||||
app.$ui.loading.remove();
|
app.$ui.loading.remove();
|
||||||
});
|
});
|
||||||
if (!url) {
|
if (!browserSupported) {
|
||||||
|
app.$ui.warning = app.ui.warning()
|
||||||
|
.css(app.getCSS('warning'))
|
||||||
|
.appendTo(Ox.$body);
|
||||||
|
app.$ui.logo
|
||||||
|
.css({cursor: 'pointer'})
|
||||||
|
.one({
|
||||||
|
click: function() {
|
||||||
|
app.$ui.warning.remove();
|
||||||
|
app.load(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (!url) {
|
||||||
app.$ui.logo
|
app.$ui.logo
|
||||||
.css({cursor: 'pointer'})
|
.css({cursor: 'pointer'})
|
||||||
.bind({
|
.bind({
|
||||||
|
@ -443,6 +460,16 @@ Ox.load(function() {
|
||||||
app.setTheme(data.value);
|
app.setTheme(data.value);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
warning: function() {
|
||||||
|
return $('<div>')
|
||||||
|
.addClass('warning')
|
||||||
|
.html(
|
||||||
|
'Aw, snap! This website requires an up-to-date, HTML5-compliant web browser. '
|
||||||
|
+ 'It should work fine in current versions of Chrome, Firefox and Safari, '
|
||||||
|
+ 'or Internet Explorer with Chrome Frame installed. '
|
||||||
|
+ 'To proceed at your own risk, click on the logo above.'
|
||||||
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
url: {
|
url: {
|
||||||
|
|
Loading…
Reference in a new issue