AdminlteAssets

Easy integration for Bootstrap AdminLTE template into Rails assests pipeline.

This gem was based on adminlte2-rails (we found that this gem isn't updated)

Current AdminLTE version: AdminLTE 2.2.0

IMPORTANT :: If you update this gem is very important that don't download files from master, for use the current AdminLTE version supported by this gem. Download from correspondent tag.

AdminLTE resources:

• AlmsaeedStudio
• Demo
• Docs
• GitHub

TODO

• Treure les images que sobren, com per exemple les d'avatar, usuaris, ... ULL hi ha imatges que segurament fan falta, com les icones
• Add jquery and jqueryui to gempspec as requirements?

Add to Gemfile

This add the version in master branch

gem 'adminlte_assets', :git => 'ssh://git@gitlab.coditdev.net:534/gems/adminlte_assets.git'

Required things to add

Javscripts

This template require JQuery, JQueryUI, Bootstrap and AdminLTE and slimScroll plugin.

This is an example with all default JS including tree and self (such as Rails do by default)

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require adminlte/plugins/slimScroll/jquery.slimscroll
//= require adminlte/app
//= require adminlte/plugin_options
//= require_tree .
//= require_self

Stylesheets

This template require Boostrap, default AdminLTE and custom skin if you like. This is an example with blue skin:

/*
 *= require_self
 */

 @import "bootstrap-sprockets";
 @import "bootstrap";
 @import "adminlte/app";
 @import "adminlte/skins/skin-blue"; // custom skin there are a lot of skins!!

Plugins

This template include some plugins by default such there are all plugins included in this gem.

Custom options for plugins

This is a javascript to rewrite default options for other plugins. You can find this file in javascripts/adminlte/plugin_options.js For example:

$.PluginsOptions.daterangepicker = {
    multiple: {
      showDropdowns: true
    }
}

DateRangePicker

This is a date picker this can be used as range date picker or single date picker.

Javscripts

DateRangePicker require the moment JS library, we create all.js that automatically add this requirement and some other things.

This means that you only need add all and this will be include daterangepicker and moment:

//= require adminlte/plugins/daterangepicker/all

Also all.js include by default these few lines of JavaScript:

$('input[data-behaviour="daterange"]').daterangepicker($.PluginsOptions.daterangepicker.single);

$('input[data-behaviour="daterange-single"]').daterangepicker($.PluginsOptions.daterangepicker.single);

And this means that you can add data-behaviour attribute with daterange or daterange-single :

<%= f.text_field :test_created_at, 'data-behaviour'=> 'daterange' %>
<%= f.text_field :test_created_at, 'data-behaviour'=> 'daterange-single' %>

Stylesheets

/*
 *= require adminlte/plugins/daterangepicker/daterangepicker-bs3
 */

Colorpicker

Javscripts

We create all.js that includes the colorpicker and some lines of JS.

This is an example of requirement:

//= require adminlte/plugins/colorpicker/all

This are the lines included:

$('input[data-behaviour="colorpicker"]').colorpicker($.PluginsOptions.colorpicker);
$('div[data-behaviour="colorpicker"]').colorpicker($.PluginsOptions.colorpicker);

And this means that you can add data-behaviour attribute with colorpicker in input or div. This are from oficial docs :

<!-- default -->
<input type="text" class="demo1" value="#5367ce" />

<!-- as component -->
<div class="input-group demo2">
    <input type="text" value="" class="form-control" />
    <span class="input-group-addon"><i></i></span>
</div>

<!-- with Rails form helper -->
<%= f.text_field :master_color, 'data-behaviour' => "colorpicker" %>

Stylesheets

/*
 *= require adminlte/plugins/colorpicker/bootstrap-colorpicker
 */