bootstrap-component-helper 0.2.3.2

data/test/dummy/app/assets/stylesheets/bootstrap_component_helper/index.css.scss

@@ -0,0 +1,7 @@
+/*
+ *= require_self
+ *= require bootstrap-modal
+ */
+
+@import "bootstrap";
+@import 'bootstrap-responsive';

data/test/dummy/app/assets/stylesheets/prettify.css

@@ -0,0 +1,55 @@
+.com {
+    color: #93a1a1;
+}
+
+.lit {
+    color: #195f91;
+}
+
+.pun, .opn, .clo {
+    color: #93a1a1;
+}
+
+.fun {
+    color: #dc322f;
+}
+
+.str, .atv {
+    color: #D14;
+}
+
+.kwd, .prettyprint .tag {
+    color: #1e347b;
+}
+
+.typ, .atn, .dec, .var {
+    color: teal;
+}
+
+.pln {
+    color: #48484c;
+}
+
+.prettyprint {
+    padding: 8px;
+    background-color: #f7f7f9;
+    border: 1px solid #e1e1e8;
+}
+
+.prettyprint.linenums {
+    -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+    -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+    box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+    margin: 0 0 0 33px; /* IE indents via margin-left */
+}
+
+ol.linenums li {
+    padding-left: 12px;
+    color: #bebec5;
+    line-height: 20px;
+    text-shadow: 0 1px 0 #fff;
+}

data/test/dummy/app/controllers/application_controller.rb

@@ -0,0 +1,3 @@
+class ApplicationController < ActionController::Base
+  protect_from_forgery
+end

data/test/dummy/app/controllers/home_controller.rb

@@ -0,0 +1,5 @@
+class HomeController < ApplicationController
+  def index
+    @orders = Order.limit(5)
+  end
+end

data/test/dummy/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/test/dummy/app/models/order.rb

@@ -0,0 +1,2 @@
+class Order < ActiveRecord::Base
+end

data/test/dummy/app/views/home/_flash.html.erb

@@ -0,0 +1,43 @@
+<section id="flash">
+  <div class="page-header">
+    <h1>Flash
+      <small>bootstrap flash helper</small>
+    </h1>
+  </div>
+
+  <p>Flash helpers wraps bootstrap alerts component.</p>
+
+  <h3>Default</h3>
+
+  <div class="bs-docs-example">
+    <%= f(message: 'warning') %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= f(message: 'warning')
+</pre>
+
+  <h3>With options</h3>
+
+  <div class="bs-docs-example">
+    <%= f(message: 'error', type: :error) %>
+    <%= f(message: 'success', type: :success) %>
+    <%= f(message: 'info', type: :info) %>
+    <%= f(type: :info, block: true, closable: false) do %>
+        <h4>This is an Info</h4>
+        <p>The information here is a demo with block and without close button.</p>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= f(message: 'error', type: :error)
+= f(message: 'success', type: :success)
+= f(message: 'info', type: :info)
+= f(type: :info, block: true, closable: false) do
+  %h4 This is an Info
+  %p The information here is a demo with block and without close button.
+</pre>
+
+</section>

data/test/dummy/app/views/home/_image.html.erb

@@ -0,0 +1,64 @@
+<section id="image">
+  <div class="page-header">
+    <h1>Image
+      <small>bootstrap image helper</small>
+    </h1>
+  </div>
+
+  <p>Image helpers includes bootstrap glyph icon helper and image style helper.</p>
+
+  <h3>Rounded border image</h3>
+
+  <div class="bs-docs-example">
+    <%= r_image_tag('holder.js/300x300') %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= r_image_tag('holder.js/300x300')
+</pre>
+
+  <h3>Circle image</h3>
+
+  <div class="bs-docs-example">
+    <%= c_image_tag('holder.js/300x300') %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= c_image_tag('holder.js/300x300')
+</pre>
+
+  <h3>Polaroid image</h3>
+
+  <div class="bs-docs-example">
+    <%= p_image_tag('holder.js/300x300') %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= p_image_tag('holder.js/300x300')
+</pre>
+
+  <h3>Glyph icon</h3>
+
+  <div class="bs-docs-example">
+    <%= glyph_icon(:plus) %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= glyph_icon(:plus)
+</pre>
+
+  <div class="bs-docs-example" style="background-color: #223322">
+    <%= glyph_icon(:align_justify, :white) %>
+    <%= glyph_icon(*%w(plus white)) %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= glyph_icon(:align_justify, :white)
+= glyph_icon(*%w(plus white))
+</pre>
+</section>

data/test/dummy/app/views/home/_list.html.erb

@@ -0,0 +1,106 @@
+<section id="list">
+  <div class="page-header">
+    <h1>List
+      <small>bootstrap list helper</small>
+    </h1>
+  </div>
+
+  <p>List can be used by two ways, one is passing a block, another is passing a collection as a parameter.</p>
+
+  <h3>Unordered List</h3>
+
+  <div class="bs-docs-example">
+    <%= list do |li|
+      li << link_to('list 1', 'javascript:;')
+      li << link_to('list 2', 'javascript:;')
+      li << 'list 3'
+      li << link_to('list 4', 'javascript:;')
+      li << content_tag(:span, 'list 5', class: 'text-warning')
+    end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= list do |li|
+  - li << link_to('list 1', 'javascript:;')
+  - li << link_to('list 2', 'javascript:;')
+  - li << 'list 3'
+  - li << link_to('list 4', 'javascript:;')
+  - li << content_tag(:span, 'list 5', class: 'text-warning')
+</pre>
+
+  <h3>Ordered List</h3>
+
+  <div class="bs-docs-example">
+    <%= list(type: 'ordered') do |li|
+      li << link_to('list 1', 'javascript:;')
+      li << link_to('list 2', 'javascript:;')
+      li << 'list 3'
+      li << link_to('list 4', 'javascript:;')
+      li << content_tag(:span, 'list 5', class: 'text-warning')
+    end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= list(type: 'ordered') do |li|
+  - li << link_to('list 1', 'javascript:;')
+  - li << link_to('list 2', 'javascript:;')
+  - li << 'list 3'
+  - li << link_to('list 4', 'javascript:;')
+  - li << content_tag(:span, 'list 5', class: 'text-warning')
+</pre>
+
+  <h3>Unstyled List</h3>
+
+  <div class="bs-docs-example">
+    <%= list(type: 'unstyled') do |li|
+      li << link_to('list 1', 'javascript:;')
+      li << link_to('list 2', 'javascript:;')
+      li << 'list 3'
+      li << link_to('list 4', 'javascript:;')
+      li << content_tag(:span, 'list 5', class: 'text-warning')
+    end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= list(type: 'unstyled') do |li|
+  - li << link_to('list 1', 'javascript:;')
+  - li << link_to('list 2', 'javascript:;')
+  - li << 'list 3'
+  - li << link_to('list 4', 'javascript:;')
+  - li << content_tag(:span, 'list 5', class: 'text-warning')
+</pre>
+
+  <h3>Nested and with options </h3>
+
+  <div class="bs-docs-example">
+    <%= list(type: 'ordered', style: 'background-color: #eeeeff}', li_options: {style: 'color: #ff0000;'}) do |li|
+      li << link_to('list 1', 'javascript:;')
+      li << 'list 2'
+      li << link_to('list 3', 'javascript:;') + list(li_option: {style: 'color: #00ff00'}) do |nested_li|
+        nested_li << 'list 3.1'
+        nested_li << 'list 3.2'
+        nested_li << 'list 3.3'
+      end
+      li.add('list 4', style: 'color: #00ff00')
+      li << content_tag(:span, 'list 5', class: 'text-warning')
+    end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= list(type: 'ordered', style: 'background-color: #eeeeff', li_options: {style: 'color: #ff0000;'}) do |li|
+  - li << link_to('list 1', 'javascript:;')
+  - li << link_to('list 2', 'javascript:;')
+  - li << link_to('list 3', 'javascript:;') + list(li_option: {style: 'color: #00ff00'}) do |nested_li|
+        nested_li << 'list 3.1'
+        nested_li << 'list 3.2'
+        nested_li << 'list 3.3'
+    end
+  - li.add('list4', style: 'color: #00ff00')
+  - li << content_tag(:span, 'list 5', class: 'text-warning')
+</pre>
+
+</section>

data/test/dummy/app/views/home/_modal.html.erb

@@ -0,0 +1,230 @@
+<section id="modal">
+<div class="page-header">
+  <h1>Modal
+    <small>bootstrap modal helper</small>
+  </h1>
+</div>
+
+<p>Modal uses bootstrap original modal component and bootstrap-modal gem extending the original modal.</p>
+
+<h3>Default modal</h3>
+
+<div class="bs-docs-example">
+  <%= modal('test', 'This is a modal') do %>
+      <div class="row">
+        <div class="span6">
+          <h4>Some Input</h4>
+
+          <p><input type="text" class="span5"></p>
+
+          <p><input type="text" class="span5"></p>
+
+          <p><input type="text" class="span5"></p>
+        </div>
+      </div>
+  <% end %>
+  <%= modal_trigger('test', 'Trigger', type: 'b', icon: 'search') %>
+  <%= modal_trigger('test', 'Trigger 2', icon: 'search') %>
+</div>
+
+<pre class="prettyprint linenums lang-haml">
+= modal('test', 'This is a modal') do
+  .row
+    .span6
+      %h4 Some Input
+      %input{type: "text", class: "span5"}
+      %input{type: "text", class: "span5"}
+      %input{type: "text", class: "span5"}
+
+= modal_trigger('test', 'Trigger', type: 'b', icon: 'search')
+= modal_trigger('test', 'Trigger 2', icon: 'search')
+</pre>
+
+<h3>Modal with trigger</h3>
+
+<div class="bs-docs-example">
+  <%= modal_with_trigger('test2', 'This is a modal', 'Trigger', {},
+  type: 'b', icon: %w(search white), class: 'btn-primary') do %>
+      <div class="row">
+        <div class="span6">
+          <h4>Some Input</h4>
+
+          <p><input type="text" class="span5"></p>
+
+          <p><input type="text" class="span5"></p>
+
+          <p><input type="text" class="span5"></p>
+        </div>
+      </div>
+  <% end %>
+</div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= modal_with_trigger('test2', 'This is a modal', 'Trigger', {},
+type: 'b', icon: %w(search white), class: 'btn-primary') do
+  .row
+    .span6
+      %h4 Some Input
+      %input{type: "text", class: "span5"}
+      %input{type: "text", class: "span5"}
+      %input{type: "text", class: "span5"}
+</pre>
+
+<h3>Modal with width</h3>
+
+<div class="bs-docs-example">
+  <%= modal_with_trigger('test3', 'This is a modal', 'Trigger', { width: 760 },
+  type: 'b', icon: %w(search white), class: 'btn-primary') do %>
+      <div class="row">
+        <div class="span7">
+          <h4>Some Input</h4>
+
+          <p><input type="text" class="span7"></p>
+
+          <p><input type="text" class="span7"></p>
+
+          <p><input type="text" class="span7"></p>
+        </div>
+      </div>
+  <% end %>
+</div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= modal_with_trigger('test3', 'This is a modal', 'Trigger', { width: 760 },
+type: 'b', icon: %w(search white), class: 'btn-primary') do
+  .row
+    .span7
+      %h4 Some Input
+      %input{type: "text", class: "span7"}
+      %input{type: "text", class: "span7"}
+      %input{type: "text", class: "span7"}
+</pre>
+
+<h3>Modal with full width</h3>
+
+<div class="bs-docs-example">
+  <%= modal_with_trigger('test4', 'This is a modal', 'Trigger', { fullwidth: true },
+  type: 'b', icon: %w(search white), class: 'btn-primary') do %>
+      <div class="row">
+        <div class="span12">
+          <h4>Some Input</h4>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+        </div>
+      </div>
+  <% end %>
+</div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= modal_with_trigger('test4', 'This is a modal', 'Trigger', { fullwidth: true },
+type: 'b', icon: %w(search white), class: 'btn-primary') do
+  .row
+    .span12
+      %h4 Some Input
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+</pre>
+
+<h3>Long modal</h3>
+
+<div class="bs-docs-example">
+  <%= modal_with_trigger('test5', 'This is a modal', 'Trigger', { width: 760, long: true },
+  type: 'b', icon: %w(search white), class: 'btn-primary') do %>
+      <div class="row-fluid">
+        <div class="span12">
+          <h4>Some Input</h4>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+
+          <p><input type="text" class="span11"></p>
+        </div>
+      </div>
+  <% end %>
+</div>
+
+
+<pre class="pre-scrollable prettyprint linenums lang-haml">
+= modal_with_trigger('test5', 'This is a modal', 'Trigger', { width: 760, long: true },
+type: 'b', icon: %w(search white), class: 'btn-primary') do
+  .row-fluid
+    .span12
+      %h4 Some Input
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+      %input{type: "text", class: "span11"}
+</pre>
+
+</section>