Got rid of buggy yepnope spaghetti, however mobile detection really should be driven from the server.

This commit is contained in:
Sam 2013-12-13 15:17:05 +11:00
parent 1884bd959f
commit 8ccab6d140
3 changed files with 26 additions and 31 deletions

View File

@ -115,6 +115,12 @@ module ApplicationHelper
[asset_path("#{target}.css"), customization_disabled? ? nil : SiteCustomization.custom_stylesheet_path(session[:preview_style], target)].compact [asset_path("#{target}.css"), customization_disabled? ? nil : SiteCustomization.custom_stylesheet_path(session[:preview_style], target)].compact
end end
def stylesheet_links(target=:desktop)
stylesheet_filenames(target).map do |f|
"<link rel=\"stylesheet\" href=\"#{f}\" type=\"text/css\" media=\"screen\">"
end.join("\n")
end
def customization_disabled? def customization_disabled?
controller.class.name.split("::").first == "Admin" || session[:disable_customization] controller.class.name.split("::").first == "Admin" || session[:disable_customization]
end end

View File

@ -2,32 +2,16 @@
<script type="text/javascript"> <script type="text/javascript">
(function() { (function() {
var h = document.getElementsByTagName('html')[0], var h = document.getElementsByTagName('html')[0];
isMobileView = (localStorage && localStorage.mobileView) ? (localStorage.mobileView === 'true') : window.isMobileView = (localStorage && localStorage.mobileView) ? (localStorage.mobileView === 'true') :
Modernizr.mq("only screen and (max-width: 480px), only screen and (max-device-width: 480px)"); Modernizr.mq("only screen and (max-width: 480px), only screen and (max-device-width: 480px)");
h.className += (isMobileView ? ' mobile-view' : ' desktop-view'); h.className += (isMobileView ? ' mobile-view' : ' desktop-view');
Modernizr.load({ if(isMobileView) {
test: isMobileView, document.write(<%= stylesheet_links(:mobile).inspect.html_safe %>);
yep: <%= stylesheet_filenames(:mobile).inspect.html_safe %>,
nope: <%= stylesheet_filenames(:desktop).inspect.html_safe %>,
complete: function() {
// CSS file(s) have loaded.
$(function() {
setTimeout(function() {
// Use setTimeout to make this happen in the next event loop.
// Trying to avoid a FOUC (flash of unstyled content).
if (isMobileView) {
$('#custom-mobile-header').show();
} else { } else {
$('#custom-desktop-header').show(); document.write(<%= stylesheet_links(:desktop).inspect.html_safe %>);
} }
$('#js-app').attr('style', ''); // Show everything.
$(window).trigger('scroll.discourse-dock'); // Calc header div positions now that they're visible.
}, 1);
});
}
});
})(); })();
</script> </script>

View File

@ -31,14 +31,19 @@
<body class="css-loading"> <body class="css-loading">
<!--[if IE 9]><script type="text/javascript">ie = "new";</script><![endif]--> <!--[if IE 9]><script type="text/javascript">ie = "new";</script><![endif]-->
<div id="js-app" style="display: none;"> <div id="js-app">
<%- unless customization_disabled? %> <%- unless customization_disabled? %>
<div id='custom-desktop-header' style='display: none;'> <script>
<%= SiteCustomization.custom_header(session[:preview_style], :desktop) %> if(window.isMobile){
</div> document.write("<div id='custom-mobile-header'>");
<div id='custom-mobile-header' style='display: none;'> document.write(<%= SiteCustomization.custom_header(session[:preview_style], :mobile).inspect.gsub("<", '\x3c').html_safe %>);
<%= SiteCustomization.custom_header(session[:preview_style], :mobile) %> document.write("</div>");
</div> } else {
document.write("<div id='custom-desktop-header'>");
document.write(<%= SiteCustomization.custom_header(session[:preview_style], :desktop).inspect.gsub("<", '\x3c').html_safe %>);
document.write("</div>");
}
</script>
<%- end %> <%- end %>
<section id='main'> <section id='main'>