I'm using different css.scss files for 2 pages in my rails app.
The issue is, when i'm going from one to another, new page weirldy obtain all styles from the previous one, until browser is refreshed.
Here is the code of one page:
<head>
<%= metamagic title: "Sample title", description: "Sample description", keywords: %w(key1 key2 key3) %>
<%= stylesheet_link_tag "posts", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
And if commenting out the javascript_include_tag, everything works just fine
Are there any suggestions to deal with that problem?
Thank you for your time)
The likely cause is turbolinks. If you have separate layouts on different pages, you will need to disable turbolinks on links that should cause a change in layout. Add a data-no-turbolink attribute to these links:
= link_to 'should change layouts', some_path, data: { no_turbolink: true }
This will force the full page to be loaded instead of just the content portion of the page.
Related
I am using BundleTransformer to bundle and minify JS/CSS in a legacy ASP.NET WebForms app. However, I'd like to disable bundling if <compilation debug="true"> in Web.config.
Current Behavior: If debug=true, resources are still bundled together, but nothing is minified.
Desired Behavior: Bundling and minification only occur if debug=false. Otherwise, references to the individual scripts and stylesheets are rendered in the HTML.
Is this possible?
Below is an example of how I currently create one of the bundles:
BundleConfig.cs
var jsMinifier = new BundleTransformer.JsMin.Minifiers.CrockfordJsMinifier();
var customJsTransformer = new BundleTransformer.Core.Transformers.ScriptTransformer(jsMinifier);
var CustomJsBundle = new BundleTransformer.Core.Bundles.CustomScriptBundle("~/bundles/CustomJsBundle");
foreach (var item in jsFiles)
{
CustomJsBundle.Include(item);
}
CustomJsBundle.Transforms.Clear();
CustomJsBundle.Transforms.Add(customJsTransformer);
BundleTable.Bundles.Add(CustomJsBundle);
Navigation.master
<%# Master Language="C#" CodeFile="Navigation.master.cs" Inherits="Main_Nav" %>
<%# Import Namespace= "System.Web.Optimization" %>
<html>
<head runat="server">
<%= Scripts.Render("~/bundles/CustomJsBundle") %>
<!-- if debug=true, I'd like the server to just render references to the individual script files
instead of the bundle -->
</head>
<body>
<!-- other markup -->
</body>
</html>
The Scripts.Render call in Navigation.master always displays a bundle, even if debug is true. I'd like it to render the bundle only if debug is false. Otherwise, I'd like script tags to each individual script file rendered instead for debugging purposes.
I solved this for now by using the RenderFormat method when in DEBUG mode. Otherwise, I use the usual Render method.
For example, in my Navigation.master:
<% #if DEBUG %>
<%= Scripts.RenderFormat("<script src='{0}'/></script>", "~/bundles/CustomJsBundle") %>
<% #else %>
<%= Scripts.Render("~/bundles/CustomJsBundle") %>
<% #endif %>
This has the desired effect of:
In DEBUG mode, render script tags with the individual files.
Otherwise, a single script tag with the bundle is rendered.
I'm not sure if there is a better way to do this, but if so, please comment or submit an answer. I tried other potential solutions, such as setting EnableOptimizations to false, and clearing the BundleTable, but this is the only solution that has worked.
I'd like to add a way for users to specify a few colors to be used on the site rather than the base ones from my core CSS. I've accomplished this via the code below, however it is not working in my Heroku hosted production environment, specifically the one with a custom domain and DNS routed through Cloudflare (i.e. it works on my-app.herokuapp.com but not www.my-custom-domain.com). If I open the custom CSS file directly in my browser (via the page source) and refresh it then the CSS is reflected on the site. Is this a Heroku limitation? Cloudflare? Is my approach less than ideal?
views/layouts/application.html.erb:
<html>
<head>
...
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => 'reload' %>
<% if the user is signed in and has selected custom colors %>
<%= stylesheet_link_tag(application_custom_colors_path(format: :css), media: 'all', 'data-turbolinks-track' => 'reload' ) %>
<% end %>
...
</head>
</html>
application_controller.rb
def custom_colors
#color1 = current_user.color1
#color2 = current_user.color2
respond_to do |format|
format.css
end
end
views/application/custom_colors.css.erb
body {
color: <%= #color1 %>;
}
As I said above, this works on my local machine and deployed to Heroku using their standard my-app.herokuapp.com domain, however it ceases to work when using a custom domain via Cloudflare. Any guidance is much appreciated.
page source:
<link rel="stylesheet" media="all" href="/assets/application-3fac9a8b9a23a84ee912eb6f5438eff5514038c3646ef0a547ebb512994b6ca4.css" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/application/custom_colors.css" data-turbolinks-track="reload" />
Turns out Cloudflare caches all static content with certain extensions, including CSS and Javascript, by default. To get around this I added a Page Rule in my Cloudflare account to bypass the caching of www.mycustomdomain.com/application/custom_colors.css. More info here.
There are several pages generated from a same layout.rhtml. Besides a global css file, each page also has its own css file, say page1.css, page2.css corresponding to page1.rhtml, page2.rhtml. Is there any way to seletively load the css files in rhtml?
Thanks in advance.
Define a instance variable in controller for which css to load. lets say we will use stylefile variable in controller like this:
#stylefile = "page1.css"
Now write following code where you load css file.
<%= stylesheet_link_tag #stylefile %>
Similarly change filename in controller for page2.
If i understood correctly,you can just include them with stylesheet_link_tag like this
<%= stylesheet_link_tag 'page1' %>
<%= stylesheet_link_tag 'page2' %>
in the .rhtml files.
I currently have a website with a typical homepage that uses it's own css file and then the rest of the site using one other css file. Could anyone advise on the best way to tailor my Rails app to meet these requirements?
I currently have a welcome controller with a welcome css file but not sure how to link all my other controllers to a main css file.
Thanks
Just put all your css files in
app/assets/stylesheets
then in the views use:
<%= stylesheet_link_tag "the_css_file_name_with_no_extension" %>
Actually, css files and assets in general don't get associated with controllers, but with views.
I suggest you have a read to:
http://guides.rubyonrails.org/layouts_and_rendering.html
If you want to use your controllers, you can define a global variable, and use it to conditionally include different stylesheets in your application.html.erb.
Something like:
app/views/layouts/application.html.erb
<% if #css = "main" %>
<%= stylesheet_link_tag "main" %>
<% else %>
<%= stylesheet_link_tag "application" %>
<% end%>
where #css is set to "main" in your main controller.
I am creating an application where I am having many views but they all have to use a single css...
I placed my css code in assests\stylesheets\application.css
and in my view head part I am adding:
<%= stylesheet_link_tag 'application.css' %>
but stil it is not working
Try using:
<%= stylesheet_link_tag 'application' %>
Note the lack of .css
See this answer https://stackoverflow.com/a/10492888/950890