I want to use SB Admin v2 Themes in my RoR application. I downloaded it and I don't know what's next to do.
BTW, I have gem bootstrap-sass in my Gemfile.
Some time ago I've developed a gem to add all the assets of the sb-admin-2 theme, here you have it: https://github.com/dreamingechoes/bootstrap_sb_admin_base_v2
Add this line to your application's Gemfile:
gem 'bootstrap_sb_admin_base_v2'
And then execute:
$ bundle
Or install it yourself as:
$ gem install bootstrap_sb_admin_base_v2
Then, add this into your application.js file:
//= require bootstrap_sb_admin_base_v2
and this line into you application.css file:
*= require bootstrap_sb_admin_base_v2
And you're ready to use the HTML structure of the Bootstrap based admin theme SB Admin 2 on your Rails application.
What I did is:
Create an admin.html.erb layout with the base markup provided in index.html of the SB Admin 2 template
Take a look at the js and css files included in the template and put them in their corresponding dirs in vendor/assets
Add the corresponding requiere and import in application.js and application.scss manifests
Don't include the assets for Morris charts until you really need them.
In the file sb-admin-2.js remove the lines that add acttive css class for the menu.
Implement menu using simple-navigation gem. It would look something like
# encoding: utf-8
SimpleNavigation::Configuration.run do |navigation|
navigation.items do |primary|
primary.item :dashboard, 'Inicio', admin_path, link_html: {icon_class: 'dashboard'}
primary.item :clients, t_title('routes.clients'), admin_clients_path, link_html: { link_active: current_page?(admin_clients_path), icon_class: 'users' } do | clients |
clients.item :clients_new, t_title('routes.new'), new_admin_client_path
end
end
end
SimpleNavigation.register_renderer admin_sidebar: Sb2AdminSidebarRenderer
SimpleNavigation.config.selected_class = 'active'
Not last but somewhere between the steps above you'd create partials for side menu, navbar top, etc.
Related
i'm using devise for authenticate the users in my rails app, i've exported the views by using the comand
rails generate devise:views
i see that the files have a 'blank style' so how i can do for apply to them a mine custom file css?
Add gem in your Gemfile
gem "twitter-bootstrap-rails"
visit link for reference
https://github.com/seyhunak/twitter-bootstrap-rails
http://getbootstrap.com
You can find the generated devise view files in app/views/devise.
Just add needed html elements/css classes the same way you would to other view files.
Keep in mind that this will use your default(application.html.erb) layout.
Probably not the best way, but it works and it's not too messy:
devise uses the global application.scss styles by default.
So I just create a login.scss, signup.scss, etc. in my route assets/stylesheets directory and the add #import "login.scss" at the end of application.scss.
Just make sure these page are imported after whatever global styles you want to make sure they inherit.
Note:
As my application expands I usually end up abstracting everything into distinct stylesheets so my application.scss ends up being a list of imports anyway.
I'm sure there are better ways to do this, but this was the "I'm just a designer and need this to work without overcomplicating things" way,
Installation
Add this line to your application's Gemfile:
gem 'devise-bootstrap-views'
And then execute:
$ bundle
Add some minor css fix to your rails asset pipeline manifest
SASS
*= require devise_bootstrap_views
LESS
*= require devise_bootstrap_views_less
rails g devise:views:bootstrap_templates
If you want to go through in detail , you can refer this link : https://github.com/hisea/devise-bootstrap-views
I recently installed active_admin gem.
Everything is working fine on Rails4, but jquery in my bootstrap page is not working anymore.
All animations are broken now, its like static page.
Any way of fixing it?
Thanks,
Michael
Solved.
What i did was, moved file active_admin.js.coffee from app/assets/javascript/ to vendor/assets/javascript . Also moved file active_admin.css.scss from app/assets/stylesheet/ to vendor/assets/stylesheet/ .
In application.js from content nothing was added, and require_tree is needed for both of those 2 files (application.js. and application.css )(no need to delete require_tree).
Same goes for active_admin.rb, nothing was added there either.
Application is now working correctly, loading css and jquery (my 1.7 version, not AA one).
-Michael
The key is to open application.js and application.css and remove the require_tree .. This is a bad default on Rails part because the user should specify load order anyway
Also do not forget to ad these lines in config/initializers/active_admin.rb
# == Register Stylesheets & Javascripts
#
# We recommend using the built in Active Admin layout and loading
# up your own stylesheets / javascripts to customize the look
# and feel.
#
# To load a stylesheet:
# config.register_stylesheet 'my_stylesheet.css'
# You can provide an options hash for more control, which is passed along to stylesheet_link_tag():
# config.register_stylesheet 'my_print_stylesheet.css', :media => :print
#
# To load a javascript file:
config.clear_stylesheets!
config.register_stylesheet "application.css"
config.clear_javascripts!
config.register_javascript "application.js"
Then in you application.js
//= require jquery
//= require bootstrap
//= require bootstrap.switch
//= require bootstrap-tooltip
//= require active_admin/base
....
I'm building a custom action for rails admin that includes a custom view.
I want to include a local copy of sparkline.js but I can't figure out a way to do this.
I tried to add the sparkline.js to the /vendor/assets/javascripts/actions/action_name directory but it is not loaded by rails admin
Is there any other way to get this file loaded
I did this by putting the external library into the app/assets/javascripts/rails_admin/custom directory and adding a 'require' statement to the rails_admin ui.js file.
i.e.
// in app/assets/javascripts/rails_admin/custom/ui.js
//= require ./sparkline.js
You can do this with coffeescript too:
# in app/assets/javascripts/rails_admin/custom/ui.js.coffee
#= require ./sparkline.js
I'm working on a project comprising three different applications. They are supposed to share some models and the outer layout. To avoid code duplication, I'm trying to extract the application layout (project_name/app/views/layouts/application.html.haml) into a gem.
I followed these steps:
create the base gem structure with bundle gem common
place the layout file inside common/app/views/layouts/application.html.haml
wrote the Gemspec descriptors
# -*- encoding: utf-8 -*-
require File.expand_path('../lib/common/version', __FILE__)
Gem::Specification.new do |gem|
gem.authors = ["Arthur Alkmim"]
gem.email = ["myemail#here"]
gem.description = %q{Common project files}
gem.summary = %q{Common project files, including layout and migrations}
gem.homepage = ""
gem.files = `git ls-files`.split($\)
gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
gem.test_files = gem.files.grep(%r{^(test|spec|features)/})
gem.name = "common"
gem.require_paths = ["lib"]
gem.version = Common::VERSION
end
commit the changes
gem build common.gemspec (successful)
rake install (successful)
Place gem 'common' in the project Gemfile
But still the project won't load the application layout. What should I do to tell my project it has to load the layout files through the gem?
Thanks in advance.
Have you added your gem to your Rails Gemfile to include it in your application?
You can use the path option to specify a relative path in development. e.g.
gem 'common', :path => "../path/to/gem"
Don't forget to then run bundle install
I sort of solved it. I changed application.html.haml to common.html.haml and placed the relevant layout call in the ApplicationController. Seems like Rails won't let me package the application.html layout in a gem, but other layouts are okay. If somebody comes up with a better solution (less workaround-ish), please post!
I would like to package some common assets like css, js, and icon images into a gem for my personal use.
Can I use the assets from inside of the gem directly, or do I have to have a generator move them into the main app?
What you need to do is:
Make a railtie:
module MyGemName
module Rails
class Engine < ::Rails::Engine
end
end
end
Put them in a directory that would otherwise be a proper asset path, like lib/assets/stylesheets.
Use sprockets to include javascripts:
//= require "foobar"
Use sass to include stylesheets:
#import "foobar";
Use the sass function image-url if you refer to images inside your stylesheets:
.widget {
background-image: image-url("widget-icon.png");
}
The assets directory should behave exactly the same as if it was inside your own application.
You can find an example in formalize-rails, which has stylesheets, javascripts and images.
With Rails 3.2 you can create an engine and put the assets in the assets directory where they'll be automatically picked up. Beware though if you create a mountable engine using the generator, it'll create namespaced directories under javascripts, images, and stylesheets. Don't put your stuff in those subdirectories or the parent app won't find them. Just put them directly in javascripts, images, or stylesheets.