I have the gem "twitter-bootstrap-rails". And I want to modify some sources files (js && less). Less is importing some files but I don't see where it takes the #import "fontawesome/font-awesome"; from? I don't see them in my app/assets... || vendor/assets...
Edit the gemfile, adding to it the link to local resided gem.
gemfile:
gem 'twitter-bootstrap-rails', :path => '/home/user/git/twitter-bootstrap-rails'
Clone the twitter-bootstrap-rails gem, and issue installation of gems for your project:
$ cd /home/user/git
$ git clone https://github.com/seyhunak/twitter-bootstrap-rails.git
$ cd /your/project/path
$ bundle install
So you can edit then the bootstrap's files.
Run you app with bundler:
$ bundle exec rails s
If you want to use different versions of the javascript files than the ones that come bundled with the gem, the first step is to make sure the following isn't in your application.js:
//= require twitter/bootstrap
When you require 'twitter/bootstrap', it loads all of the individual javascript files for you. Instead, you can specify which ones you want the gem to load for you, and then you can manually require the ones that you have modified.
For example, if your modified source files were in app/assets/javascripts/bootstrap_overrides/, you would do:
//= require twitter/bootstrap/bootstrap-transition
//= require twitter/bootstrap/bootstrap-alert
//= require twitter/bootstrap/bootstrap-modal
//= require twitter/bootstrap/bootstrap-button
//= require twitter/bootstrap/bootstrap-collapse
// ... do this for the remainder of the components you wish to import from the gem
//= require bootstrap_overrides/dropdown.js
//= require bootstrap_overrides/tooltip.js
This will let you use your own modified js instead of what's supplied with the gem. The source for the versions of tooltip.js and dropdown.js included in the gem are available at the gem's github repo: https://github.com/seyhunak/twitter-bootstrap-rails
Also, since these components require jQuery to work, be sure to include them after jQuery in your application.js
Hope this helps!
Related
We're using Rails Assets in our project and we're in the process of updating Ruby from 2.3.7 to 2.4.7, following this guide. I think I've resolved all the gems issues, but when I'm trying to run rspec or navigate to any admin page, I'm greeted with this error:
couldn't find file 'fullcalendar'
This is one of the Rails Assets mentioned above, and I'm not sure why this is happening.
My gemfile:
source 'https://rails-assets.org' do
gem 'rails-assets-jquery'
gem 'rails-assets-jquery-ujs'
gem 'rails-assets-jquery-ui'
gem 'rails-assets-js-cookie'
gem 'rails-assets-lodash'
gem 'rails-assets-highcharts'
# gem 'rails-assets-quill'
gem 'rails-assets-select2'
gem 'rails-assets-select2-bootstrap-css'
gem 'rails-assets-slick.js'
gem 'rails-assets-picturefill'
gem 'rails-assets-scrollmagic'
gem 'rails-assets-gsap'
gem 'rails-assets-fullcalendar'
gem 'rails-assets-moment'
gem 'rails-assets-jstzdetect'
gem 'rails-assets-blueimp-file-upload'
gem 'rails-assets-air-datepicker'
end
/app/views/layouts/admin.haml:
= javascript_include_tag 'admin'
/app/assets/javascripts/admin.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery-ujs
//= require jquery-ui/jquery-ui
//= require lodash
//= require bootstrap
//= require moment
//= require quill
//= require fullcalendar
//= require select2
//= require jstzdetect
//= require cocoon
//= require blueimp-file-upload/jquery.iframe-transport.js
//= require blueimp-file-upload/vendor/jquery.ui.widget.js
//= require blueimp-file-upload/jquery.fileupload.js
//= require_tree ./admin
What have me scratching my head is that the assets above fullcalendar are loading fine, but this one throws an error.
This app is running on Rails 4.2.7.1 and ruby 2.3.7. I'm trying to update Ruby version to ruby 2.4.7.
Try replacing require fullcalendar with
require fullcalendar/core/main.js
require fullcalendar/daygrid/main.js
Just a guess based on the doc
Alternatively, just remove it from assets and put the files directly in vendor folder; or use this gem.
I am using the fullcalendar rails gem. I just downloaded the zip file for the calendar which contains the js and css files for the fullcalendar plugin. For all the tutorials on the fullcalendar gem I have not seen anyone doenload the zip file and use these files in their code (they use the CDN links but those don't appear to be working) where is the best folder to place these zipped assets into so that I can get the desired results on my calendar?
If you use the gem you do not need download any file.
You have to:
install gem
add in the application.js file the instruction //= require fullcalendar
And to can use it.
Read the README of the gem https://github.com/bokmann/fullcalendar-rails
Because you also need moment.js
Don't install from the zip file.
Follow the instructions at https://github.com/bokmann/fullcalendar-rails#installation for installation; you will have an easy time managing the dependencies.
The steps as specified there are:
Add gem 'fullcalendar-rails' to Gemfile
Add gem 'momentjs-rails' to Gemfile if you want to use 2.1.1.0 or higher version of fullcalendar-rails gem.
Run bundle install to install the gems.
Add //= require fullcalendar (and //= require moment) in application.js
Add *= require full calendar in application.css
I think I am missing a vital step:
When installing a gem (ie. bootstrap-wysihtml5) what steps should I take for it to correctly find and reference the javascript and css files.
I add gem bootstrap-wysihtml5 to my gemfile, and run bundle install.
I place //= require bootstrap-wysithtml5 in application.js and *= require bootstrap-wysithtml5 in application.css.
I get the following error:
Error compiling CSS asset
Sprockets::File not found: couldnt find file 'bootstrap-wysihtml5.css'
Do I have to manually copy the js and css to the relevant app/assets file, or is there a crucial step I'm missing?
As Billy said, the correct gem is bootstrap-wysihtml5-rails. The gem installs the JS/CSS without further effort on your part.
Add this to your Gemfile:
gem 'bootstrap-wysihtml5-rails'
Add this to app/assets/javascripts/application.js:
//= require bootstrap-wysihtml5
Add this to app/assets/stylesheets/application.css:
*= require bootstrap-wysihtml5
Note that bootstrap-wysihtml5-rails requires Bootstrap. If you have not already added Bootstrap to your project, follow these steps from the creator of this gem:
In Gemfile, add the following:
gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
:github => 'anjlab/bootstrap-rails'
Rename app/assets/stylesheets/application.css to app/assets/stylesheets/application.css.scss
Add the following to app/assets/stylesheets/application.css.scss:
#import "twitter/bootstrap";
Add the following to app/assets/javascripts/application.js:
//= require twitter/bootstrap
Once the gem & Bootstrap are both installed, initialize wysihtml5.
<textarea id="some-textarea" class='wysihtml5' placeholder="Enter text ..."></textarea>
<script type="text/javascript">
$(document).ready(function(){
$('.wysihtml5').each(function(i, elem) {
$(elem).wysihtml5();
});
});
</script>
I found the solution! Thanks for your help guys.
By moving the position of the javascript references to this order, it now seems to work.
//= require jquery
//= require jquery_ujs
//= require bootstrap-wysihtml5/b3
//= require bootstrap/bootstrap
I have no idea why the order would make such a difference. But it works now! Thanks.
I just installed the rails-backbone gem and then rails g backbone:install.
I see a list of javascript references to backbone on application.js but it does not copy them to the project and I'm not sure if this is normal.
//= require backbone
//= require backbone_rails_sync
//= require backbone_datalink
//= require backbone/myapp
If this is normal, where is it possible to find backbone_rails_sync and backbone_datalink. I'm afraid that by simple searching will maybe not find the same version tested for this gem?
These files are inside the gem and served through Rails Asset Pipeline.
You could find them in the gem souce.
I'm using rails 3.2, but I'm compiling my coffee files with CodeKit.
I still want my coffee files to live inside 'assets', but each time I restart rails, it finds them in there and tries to compile them itself.
My files live in /assets/cafe/myscript.coffee, and codekit compiles them into /assets/javascripts/myscript.js
The coffee-rails gem is already commented out in my gemfile (when rails tries to (re) compile it it gives "throw Error("LoadError: no such file to load -- coffee_script)" - though I really dont want it to even try compiling.
Setting "config.assets.compile = false" in application.rb results in "application.js isn't precompiled"
you should probably just configure your sprockets manifest to not require the whole tree.
edit app/assets/javascripts/application.js
typically it looks like this:
//= require jquery
//= require jquery_ujs
//= require_tree .
change that to
//= require jquery
//= require jquery_ujs
//= require myscript
An (inferior) workaround is to put my coffeescripts inside "App" rather than "assets" (so one more branch up the tree.)
This sucks because it's not where they should go, but at least it does put it outside rails' stalker-tendencies to find coffeescript files anywhere in assets and try to compile them.