railsstrap 3.2.0.2 → 3.2.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 34cbab8c7ce0b463d90f5f663badc8007e285c8e
-  data.tar.gz: 32e511fef2dbae6c1de9ee3c0c232c84a1b81842
+  metadata.gz: 0e12bab1aacc0c5c73e8fcc54e6d9602d58b835f
+  data.tar.gz: e12a9d052d2d9f1b06c9a9d879424ccaacee751b
 SHA512:
-  metadata.gz: d6f354212140c85ad0e7eac3f14c5903ddb822bff35d04828f8693ab484d368c987e1af74c7a48cd0fe37efa10d678e222ae16d26995a16177d90d136f9f219b
-  data.tar.gz: 688cd70f7dce3f85a4b44d825269dedb8f9174b892cbfe85c68798da814464b416478934265fa7a6db641dafab2acb5904c3ca9a4d1599e463de5178029b0af7
+  metadata.gz: 4997f111d82f7dfce5cea8a3a06d4c4c083129c50a1588cee6b028d083dc1b2ff2b978cb7f04bcd8f7bef5360bd274baf315d717bd0a893b6c1fadb72b823941
+  data.tar.gz: 0fdaff045e68a40440988afab5211620069144d817474b02ddda572e965bf5d7663cc69d8e0605673e241361c37b68f0aeec3ae3d85c884a1b3cdab830974255

data/README.md

@@ -1,13 +1,31 @@
-# Bootstrap 3.2.1 for Rails 4 Asset Pipeline
+# Bootstrap 3.2.0 + FontAwesome 4.2.0 for Rails v3.1 & v4 Asset Pipeline
 
 [![Bower version](https://badge.fury.io/bo/bootstrap.svg)](http://badge.fury.io/bo/bootstrap)
 [![Gem Version](https://badge.fury.io/rb/railsstrap.svg)](http://badge.fury.io/rb/railsstrap)
 [![Build Status](https://travis-ci.org/toadkicker/railsstrap.svg?branch=v3.2.0.1)](https://travis-ci.org/toadkicker/railsstrap)
 [![Coverage Status](https://img.shields.io/coveralls/toadkicker/railsstrap.svg)](https://coveralls.io/r/toadkicker/railsstrap?branch=develop)
 
-Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
+railsstrap integrates Bootstrap and FontAwesome for Rails Asset Pipeline (Rails 4, 3.1, 3.2 are supported). It was born and extended from twitter-bootstrap-rails.
 
-railsstrap integrates Bootstrap CSS toolkit for Rails Asset Pipeline (Rails 4, 3.1, 3.2 are supported). It was born and extended from twitter-bootstrap-rails, but several non-bootstrap helpers and UI improvements from the Bootstrap community.
+## Why is your gem different?
+
+Railsstrap is more than just another gem providing bootstrap and fontawesome for Rails apps. It includes Bootstrap additions that include exotic placements, animations, and other component enhancements not included in the official bootstrap release. It also includes many HTML helpers and additional javascript components. All of this is exposed to UI developers to customize to their liking using either LESS and Coffeescript, or plain CSS and Javascript.
+
+
+##Bootstrap additions
+
+###Custom Components (in development)
+* Asides - A modal that slides in from the left or right. Used often in mobile apps for off-screen sidebars or overlays.
+* Callouts - Similar to an alert, it is used for drawing attention to content.
+* Datepicker - A styled HTML5 datepicker.
+* Modal enhancements - animations and real centering placement.
+* Popover enhancements - animations and custom placements for popover arrows and locations.
+* Timepicker - A styled HTML5 time picker.
+* Tooltip - animations and custom placements for tooltip arrows and locations.
+
+###Animations
+
+Railsstrap comes with over 75 CSS animations. See the wiki or the [vendor/assets/stylesheets/animate](https://github.com/toadkicker/railsstrap/tree/develop/vendor/assets/stylesheets/animate) folder for more info.
 
 ## Example Application
 An example application is available at [toadkicker/teststrap](https://github.com/toadkicker/teststrap). You can view it running on heroku [here.](http://teststrap.herokuapp.com/) Contributions welcome.
@@ -24,10 +42,27 @@ bundle install
 bundle exec rails g railsstrap:install
 ```
 
-This will insert the appropriate entries into your application.js and application.css files. It will also provide you with the ability to customize Bootstrap to your liking.
+This will insert the appropriate entries into your application.js and application.css files. It will also provide you with the ability to customize Bootstrap and FontAwesome to your liking.
+
+####Hotfix note for v3.2.0.2 and lower:
+
+You will need to precompile your assets for FontAwesome support. To do this add this line:
+
+```
+Rails.application.config.assets.precompile += %w( fontawesome/fonts/fontawesome-webfont.eot fontawesome/fonts/fontawesome-webfont.woff fontawesome/fonts/fontawesome-webfont.ttf fontawesome/fonts/fontawesome-webfont.svg )
+```
+
+For Rails 3 applications, add it to config/environments/production.rb. For Rails 4, add it to config/initializers/assets.rb.
+
 
 Most of the info you'll need is in the wiki, and if it isn't please contribute!
 
+##Building the gem
+
+The gem is organized by ruby specific tasks, and front-end specific tasks. `bundle exec rake` will attempt to run the suite of build commands, but you need a few dependencies that are outside of bundler/rubygems's domain.
+
+For compiling stylesheets and javascripts, the gem uses Gruntjs. You'll need node/npm installed to compile them manually. *You do not need to use grunt if you are just referencing specific less/js/coffee files in your rails app*
+
 ## Many thanks to the twitter-bootstrap-rails contributors, who made this fork possible:
 <ul>
   <li>Seyhun Akyürek</li>

data/Rakefile

@@ -6,6 +6,7 @@ Bundler::GemHelper.install_tasks
 
 desc 'Bundle the gem'
 task :bundle  => [:bundle_install] do
+  sh 'grunt less_imports && grunt less:dist'
   sh 'gem build *.gemspec'
   sh 'gem install *.gem'
   sh 'rm *.gem'

data/app/helpers/railsstrap/bootstrap_flash_helper.rb

@@ -3,8 +3,19 @@ module Railsstrap
     ALERT_TYPES = [:success, :info, :warning, :danger] unless const_defined?(:ALERT_TYPES)
 
     def bootstrap_flash(options = {})
+
       flash_messages = []
+      close_button = content_tag(:button, raw('×'), :type => 'button', :class => 'close', 'data-dismiss' => 'alert')
+
       flash.each do |type, message|
+        default_opts = {
+            show_close: true,
+            type: :info,
+            container_tag: :div,
+            animation: 'fade in'
+        }
+        opts = default_opts.merge(options)
+
         # Skip empty messages, e.g. for devise messages set to nothing in a locale file.
         next if message.blank?
 
@@ -15,9 +26,10 @@ module Railsstrap
         next unless ALERT_TYPES.include?(type)
 
         Array(message).each do |msg|
-          text = content_tag(:div,
-                             content_tag(:button, raw('×'), :type => 'button', :class => 'close', 'data-dismiss' => 'alert') +
-                             msg, :class => "alert fade in alert-#{type} #{options[:class]}")
+
+          text = content_tag(opts[:container_tag],
+                             (opts[:show_close] ? close_button : '') +
+                             msg, :class => "alert #{opts[:animation]} alert-#{type} #{opts[:class]}")
           flash_messages << text if msg
         end
       end

data/app/helpers/railsstrap/navbar_helper.rb

@@ -71,7 +71,7 @@ module Railsstrap
 
     # Returns current url or path state (useful for buttons).
     # Example:
-    #   # Assume we'r currently at blog/categories/test
+    #   # Assume we're currently at blog/categories/test
     #   uri_state('/blog/categories/test', {})               # :active
     #   uri_state('/blog/categories', {})                    # :chosen
     #   uri_state('/blog/categories/test', {method: delete}) # :inactive

data/lib/generators/railsstrap/install/install_generator.rb

@@ -13,6 +13,23 @@ module Railsstrap
 
         js_manifest = 'app/assets/javascripts/application.js'
         css_manifest = 'app/assets/stylesheets/application.css'
+        asset_initializer = 'config/initializers/assets.rb'
+        config_asset_insert_line = "Rails.application.config.assets.precompile\s+=\s%w(\sbootstrap/fonts/glyphicons-halflings-regular.eot\sbootstrap/fonts/glyphicons-halflings-regular.svg\sbootstrap/fonts/glyphicons-halflings-regular.ttf\sbootstrap/fonts/glyphicons-halflings-regular.woff\sfontawesome/fonts/fontawesome-webfont.eot\sfontawesome/fonts/fontawesome-webfont.woff\sfontawesome/fonts/fontawesome-webfont.ttf\sfontawesome/fonts/fontawesome-webfont.svg\s)"
+
+        if File.exists?(asset_initializer) && Rails::VERSION::MAJOR >= 4 #Must be Rails 4
+          content = File.read(asset_initializer)
+          if content.match(config_asset_insert_line)
+            #set up properly
+            puts "Ensure config/initializers/assets.rb contains this line:\n" + config_asset_insert_line
+          else
+            insert_into_file asset_initializer, config_asset_insert_line, :after => 'config.assets.precompile\n'
+          end
+        else #Assumes Rails 3.1 then...
+          rails_three_config = 'config/environments/production.rb'
+          if File.exists?(rails_three_config) && Rails::VERSION::MAJOR <= 4
+            insert_into_file rails_three_config, config_asset_insert_line, :after => 'config.assets.precompile\n'
+          end
+        end
 
         if File.exist?(js_manifest)
           insert_into_file js_manifest, "//= require bootstrap/dist/js/bootstrap\n", :after => "jquery_ujs\n"
@@ -23,6 +40,7 @@ module Railsstrap
         if File.exist?(css_manifest)
           # Add our own require:
           content = File.read(css_manifest)
+
           if content.match(/require_tree\s+\.\s*$/)
             # Good enough - that'll include our bootstrap_and_overrides.css.less
           else

data/lib/generators/railsstrap/install/templates/bootstrap.coffee

@@ -1,3 +1,14 @@
 jQuery ->
   $("a[rel~=popover], .has-popover").popover()
   $("a[rel~=tooltip], .has-tooltip").tooltip()
+
+
+#  # comment this out if you want to add the animation to an element. You may need to handle events for them to work correctly.
+#  # This is just a generic example, your mileage will vary depending on what you're trying to do.
+#  $("[data-animation]") ->
+#    e.preventDefault()
+#    if $(this).data("animation")?
+#      $(this).next().removeClass($(this).data("easein")).addClass "animated " + $(this).data("easein")
+#    else
+#      $(this).next().addClass "animated " + _easeIn
+#    return

data/lib/generators/railsstrap/install/templates/bootstrap.js

@@ -1,4 +1,16 @@
-jQuery(function() {
-  $("a[rel~=popover], .has-popover").popover();
-  $("a[rel~=tooltip], .has-tooltip").tooltip();
+jQuery(function () {
+    $("a[rel~=popover], .has-popover").popover();
+    $("a[rel~=tooltip], .has-tooltip").tooltip();
+
+    // comment this out if you want to add the animation to an element. You may need to handle events for them to work correctly.
+    // This is just a generic example, your mileage will vary depending on what you're trying to do.
+
+//    $("[data-animation]")(function () {
+//        e.preventDefault();
+//        if ($(this).data("animation") != null) {
+//            $(this).next().removeClass($(this).data("easein")).addClass("animated " + $(this).data("easein"));
+//        } else {
+//            $(this).next().addClass("animated " + _easeIn);
+//        }
+//    });
 });

data/lib/generators/railsstrap/install/templates/bootstrap_and_overrides.css

@@ -1,9 +1,9 @@
 /*
   =require bootstrap/dist/bootstrap.css
   =require bootstrap/dist/bootstrap-theme.css
-  If you want exotic placement features, asides, and more, uncomment this
-  =require dist/bootstrap-additions.css
-  Use Font Awesome icons (default)
-  To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"
-  =require fontawesome/css/font-awesome.css
+  If you want exotic placement features, animations, and more, uncomment this
+  =require dist/railsstrap.css
+  To use Font Awesome
+  =require fontawesome/css/font-awesome.(min).css
+  To use Gylphicons, you don't have to do anything. Bootstrap includes it by default.
 */

data/lib/generators/railsstrap/install/templates/bootstrap_and_overrides.less

@@ -1,21 +1,23 @@
 @import "bootstrap/less/bootstrap";
-//If you want exotic placement features, asides, and more, uncomment this
-//@import "bootstrap-additions";
+//If you want exotic placement features, animations, and more, import this
+//@import "railsstrap";
 
 // Font Awesome
 @import "fontawesome/less/font-awesome";
 
-// Glyphicons - requires less-rails gem
-//@import "railsstrap/less/glyphicons.less";
+// Glyphicons - included by default in bootstrap.
+// You may need to customize config/initializers/assets.rb (Rails 4), or config/environments/[env].rb to add font paths in.
+// In either case of FontAwesome or Glyphicons, the railsstrap:install task should insert the appropriate entries for you.
 
 // Your custom LESS stylesheets goes here
 //
 // Since railsstrap was imported above you have access to its mixins which
 // you may use and inherit here, ex:
-// @import "bootstrap/less/mixins/alerts.less
+// @import "bootstrap/less/mixins/alerts.less;
 //
 // If you'd like to override railsstrap's own variables, you can do so here as well
 // See http://bootstrap.github.com/bootstrap/customize.html#variables for their names and documentation
 //
 // Example:
+// @import (reference) 'bootstrap/less/variables.less';
 // @link-color: #ff0000;

data/lib/railsstrap/constants.rb

@@ -1,6 +1,6 @@
 module Railsstrap
   module Constants
     #we follow along with Bootstrap's version number for easy identification
-    VERSION = '3.2.0.2'
+    VERSION = '3.2.0.3'
   end
 end

data/vendor/assets/stylesheets/animate/animate.less

@@ -0,0 +1,31 @@
+@charset "UTF-8";
+
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license
+
+Copyright (c) 2013 Daniel Eden
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+.animated {
+  -webkit-animation-duration: 0.6s;
+  animation-duration: 0.6s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}

data/vendor/assets/stylesheets/animate/bounce/bounce.less

@@ -0,0 +1,41 @@
+@-webkit-keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  40% {
+    -webkit-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  60% {
+    -webkit-transform: translateY(-15px);
+    transform: translateY(-15px);
+  }
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  40% {
+    -webkit-transform: translateY(-30px);
+    -ms-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  60% {
+    -webkit-transform: translateY(-15px);
+    -ms-transform: translateY(-15px);
+    transform: translateY(-15px);
+  }
+}
+
+.bounce {
+  -webkit-animation-name: bounce;
+  animation-name: bounce;
+}

data/vendor/assets/stylesheets/animate/bounce/bounceIn.less

@@ -0,0 +1,58 @@
+@-webkit-keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.05);
+    transform: scale(1.05);
+  }
+
+  70% {
+    -webkit-transform: scale(.9);
+    transform: scale(.9);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    -ms-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.05);
+    -ms-transform: scale(1.05);
+    transform: scale(1.05);
+  }
+
+  70% {
+    -webkit-transform: scale(.9);
+    -ms-transform: scale(.9);
+    transform: scale(.9);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.bounceIn {
+  -webkit-animation-name: bounceIn;
+  animation-name: bounceIn;
+}

data/vendor/assets/stylesheets/animate/bounce/bounceInDown.less

@@ -0,0 +1,56 @@
+@-webkit-keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(30px);
+    -ms-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(-10px);
+    -ms-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.bounceInDown {
+  -webkit-animation-name: bounceInDown;
+  animation-name: bounceInDown;
+}

data/vendor/assets/stylesheets/animate/bounce/bounceInLeft.less

@@ -0,0 +1,56 @@
+@-webkit-keyframes bounceInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(30px);
+    transform: translateX(30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes bounceInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(30px);
+    -ms-transform: translateX(30px);
+    transform: translateX(30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.bounceInLeft {
+  -webkit-animation-name: bounceInLeft;
+  animation-name: bounceInLeft;
+}