I'm running Rails3 with twitter-bootstrap-rails. I have 2 different layouts "application.html.erb" and "backend.html.erb". Unfortunately, when using the backend layout I still get all the bootstrap_and_overrides.css.less styles overriding the defaults. I would like to only use a separate overrides file so the layout is different than my application layout.
Any suggestion on how best to do this?
The only way I can think to do this is to not require the override file in my application.css file (as suggested in the bootstrap readme) and instead require it in a CSS file that I only load in the application.html.erb file.
I didn't see that the application layout actually specified the application.css file. I modified that line to read:
<%= stylesheet_link_tag "backend", :media => "all" %>
And then created a backend.css file that did not reference the entire tree nor the original overrides file.
Now I have a generic layout that can be customized through the backend.css or my new bootstrap_and_overrides_backend.css.less file.
Related
So vue-cli 3 will automatically inject all the links to asset files in the HTML file. It includes the assets with the preload and prefetch attributes as well.
I want to use my own HTML template and insert these same assets into it with the preload and prefetch attributes.
I have done this in the past by using something like this example, but it doesn't include the preload and prefetch attributes.
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="{% static '<%= htmlWebpackPlugin.files.chunks[chunk].entry %>' %}"></script>
<% } %>
I've looked at all the info available inside the htmlWebpackPlugin object but I don't see anything in there that I can use to determine if the asset should use prefetch or preload and with the as=script.
How can I do this? Obviously vue-cli 3 is doing it, but I'm not sure how.
I understand you want to use your own template, tho I'd advise against it. 'Rabbit Hole' doesn't begin to describe messing with it. Rather, I'd customize the plugins to get the correct resources rendered how you like. Customization to preload/prefetch has been discussed at length here on the Vue CLI GitHub page
Using vue.config.js you should be able to chainWebpack to add specific options to to the PreloadPlugin (this plugin is used to manage both preload and prefetch tag injection in index.html) More info and examples on how to chain webpack is here.
I am working with an app with Active Admin and needed to select multiple values from a select input, I have added the Select2 gem which adds all the relevant the JS and CSS with no issues but for some reason the select boxes seem to change their appearance slightly but not to the ful Select2 appearance, upon inspection the JS doesn't look like its added all the correct classes...... any ideas?
Here is my code:
active_admin.css.scss
//= require select2
#import "active_admin/mixins";
#import "active_admin/base";
active_admin.js
//= require select2
//= require active_admin/base
$(".select2able").select2({
placeholder: "Select a Partner"
});
activeadmin form
f.input :sponsors, as: :select, collection: Sponsor.all, input_html: {class: 'select2able'}
This is caused by Active Admin's decision to wrap its CSS styles inside .active_admin selector. As a result, most of third-party gem's CSS styles become less specific, and their appearance become broken.
For select2, and all gems whose CSS files are inside "stylesheets" folder, add the following lines at the bottom of active_admin.css.scss:
body.active_admin {
#import "select2";
}
This will give all of select2's styles body.active_admin selector, making them more specific than Active Admin's styles.
Problem solved, use chosen js instead of select2, works equally as well as select2 but without the issues in active admin.
https://github.com/gregbell/active_admin/issues/2267#issuecomment-19197807
Where exactly do you add jquery code to rails 3.1.3? New to rails and I want to use masonry.js /http://masonry.desandro.com/ to my rails app.
I added jquery.masonry.min.js to app/assets/javascript and put //= require jquery.masonry.min in application.js but not sure where to put the masonry javascript code below. I thought it would go in the application.js but there is a comment that says it's not recommended to put code there. Any help?
$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
columnWidth : 240
});
});
Rails is just trying to encourage you to keep your javascript organized, so that the main javascript file doesn't get massive and messy. You can put it in application.js while you are playing around and then move it to a page-specific javascript file later if you want, it won't actually hurt anything.
Rails will automatically make you an empty javascript file for each model, so if know you'll be using this in a model called posts, you would put it in app/assets/javacsripts/posts.js.
More on how the asset pipeline works here.
I'm working on a Rails 3.1 app using JavascriptMVC and ejs templates within the client to do some complicated features on my application. Unfortunately ejs syntax is very similar to erb syntax, to the point where I can't keep the code in the same file (although if someone knows of a good way to do this, I'd be ecstatic). Ultimately I want to be able to apply some rails code within the ejs template (say for I18n) but at this point I will just settle for getting this to work
Following the example from this question I have created a custom template handler that looks like this:
module CommonModel
class Handler < ActionView::Template::Handler
include ActionView::Template::Handlers::Compilable
def compile(template)
template.source.inspect
end
end
end
ActionView::Template.register_template_handler :ejs, CommonModel::Handler
Then I created a partial template that has my ejs code in it:
_jmvc_templates.html.ejs
<script type="text/ejs" id="my_ejs_template">
<div>Some ejs here</div>
</script>
Within my existing template, I attempt to include my partial:
<%= render 'path/to/my/ejs/templates/jmvc_templates' %>
At this point, the file is included and my handler is used, but everything is escaped, so my div in my template gets rendered to the page like this:
<div%gt;
I'm sure I'm missing something obvious here, but I don't know what it could be... How can I get this template handler to just include my ejs based template without escaping all of the html in it?
Edit:
I've found that calling render with html_safe works:
<%= render('path/to/my/ejs/templates/jmvc_templates').html_safe %>
This seems like a kludge though - there has to be a way to get the erb renderer to treat text from my handler as html safe text.
Maybee you should be using raw. Check this
def compile(template)
raw template.source.inspect
end
I am using the no configuration option and have taken the following steps:
put the js files into root/public/javascripts
put the image files into root/public/images
put the demo css files into root/public/stylesheets
put css call in the head section of my layout file
<%= stylesheet_link_tag "demo_table", :media => "all" %>
put the initialization script in the head section of my layout file:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script >
first line of my table layout is:
<table width="100%" style="border-collapse:collapse; " id="example">
I restarted my server. Nothing happens. What am i missing?
The zero config relies on having a properly formatted table, which your example isn't showing. It must also have <thead> and <tbody> elements to render properly. Ensure that's properly setup first.
Second, open the page in Chrome or Firefox, view source. Click on the links to the Datatables.js and Datatables.css files as well as Jquery.js (or whatever each of these files is named) Do they open? If not, there's your problem.
Javascript is essentially platform independent. Sure, you get information TO the script in different manners in Rails, PHP, .net, etc, but there's no reason that this doesn't work in any of the major scripting language.
I have been using the RailsDatatables plugin in my rails apps without any problem. Maybe give that a try?