bootstrap-component-helper 0.2.3.2

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

@@ -0,0 +1,34 @@
+<section id="navbar">
+  <div class="page-header">
+    <h1>Navbar
+      <small>bootstrap navbar helper</small>
+    </h1>
+  </div>
+
+  <p>Navbar helpers wraps the bootstrap navbar component.</p>
+
+  <h3>Navbar with brand and nav and divider</h3>
+
+  <div class="bs-docs-example">
+    <%= navbar(style: 'position: relative') do %>
+        <%= link_to 'Title', 'javascript:;', class: 'brand' %>
+        <%= nav do |n|
+            n.add link_to('nav1', 'javascript:;'), class: 'active'
+            n.add link_to('nav2', 'javascript:;')
+            n.add class: 'divider-vertical'
+            n.add link_to('nav3', 'javascript:;')
+        end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= navbar do
+  = link_to 'Title', 'javascript:;', class: 'brand'
+  = nav do |n|
+    - n.add link_to('nav1', 'javascript:;'), class: 'active'
+    - n.add link_to('nav2', 'javascript:;')
+    - n.add class: 'divider-vertical'
+    - n.add link_to('nav3', 'javascript:;')
+</pre>
+</section>

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

@@ -0,0 +1,47 @@
+<section id="progressbar">
+  <div class="page-header">
+    <h1>Progress Bar
+      <small>bootstrap progress bar helper</small>
+    </h1>
+  </div>
+
+  <p>Progress bar helpers wraps bootstrap progress bar component.</p>
+
+  <h3>Non stacked bar</h3>
+
+  <div class="bs-docs-example">
+    <%= pg(percentage: 25, content: 'Done: 25%') %>
+    <%= pg(percentage: 25, content: 'Done: 25%', striped: true) %>
+    <%= pg(percentage: 25, content: 'Done: 25%', type: :success, striped: true, active: true) %>
+    <%= pg(percentage: 25, content: 'Done: 25%', type: :warning, in_table: true) %>
+    <%= pg(percentage: 25, content: 'Done: 25%', type: :danger, in_table: true) %>
+    <%= pg(in_table: true, percentage: 25, content: 'Done: 25%', type: :info) %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= pg(percentage: 25, content: 'Done: 25%')
+= pg(striped: true, percentage: 25, content: 'Done: 25%')
+= pg(active: true, striped: true, percentage: 25, content: 'Done: 25%', type: :success)
+= pg(in_table: true, percentage: 25, content: 'Done: 25%', type: :warning)
+= pg(in_table: true, percentage: 25, content: 'Done: 25%', type: :danger)
+= pg(in_table: true, percentage: 25, content: 'Done: 25%', type: :info)
+</pre>
+
+  <h3>Stacked bar</h3>
+
+  <div class="bs-docs-example">
+    <%= pg(striped: true, active: true) do %>
+      <%= pb(percentage: 25, type: :success) %>
+      <%= pb(percentage: 25, content: 'Done: 25%', type: :warning) %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= pg(striped: true, active: true) do
+  = pb(percentage: 25, type: :success)
+  = pb(percentage: 25, content: 'Done: 25%', type: :warning)
+</pre>
+
+</section>

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

@@ -0,0 +1,118 @@
+<section id="tab">
+  <div class="page-header">
+    <h1>Tab
+      <small>bootstrap tab helper</small>
+    </h1>
+  </div>
+
+  <p>Tab helper will generate a tabs or a pills component in bootstrap way.</p>
+
+  <h3>Default Tab</h3>
+
+  <div class="bs-docs-example">
+    <%= tabs do |t| %>
+        <% t.tab('tab1') do %>
+            I'm tab #1.
+        <% end %>
+        <% t.tab('tab2') do %>
+            I'm tab #2.
+        <% end %>
+        <% t.tab('tab3') do %>
+            I'm tab #3.
+        <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= tabs do |t|
+  - t.tab('tab1') do
+    I'm tab #1.
+  - t.tab('tab2') do
+    I'm tab #2.
+  - t.tab('tab3') do
+    I'm tab #3.
+</pre>
+
+  <h3>Tab with options</h3>
+
+  <div class="bs-docs-example">
+    <%= tabs(id: 'tabs_10', position: 'below') do |t| %>
+        <% t.tab('tab1', disabled: true, clickable: false) do %>
+            I'm tab #1.
+        <% end %>
+        <% t.tab('tab2') do %>
+            I'm tab #2.
+        <% end %>
+        <% t.tab('tab3') do %>
+            I'm tab #3.
+        <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= tabs(id: 'tabs_10', position: 'below') do |t|
+  - t.tab('tab1', disabled: true, clickable: false) do
+    I'm tab #1.
+  - t.tab('tab2') do
+    I'm tab #2.
+  - t.tab('tab3') do
+    I'm tab #3.
+</pre>
+
+  <h3>Stacked Tab</h3>
+
+  <div class="bs-docs-example">
+    <%= tabs(id: 'tabs_20', stacked: true, class: 'span3', content_options: {class: 'span5'}) do |t| %>
+        <% t.tab('tab1', disabled: true, clickable: false) do %>
+            I'm tab #1.
+        <% end %>
+        <% t.tab('tab2') do %>
+            I'm tab #2.
+        <% end %>
+        <% t.tab('tab3') do %>
+            I'm tab #3.
+        <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= tabs(id: 'tabs_20', stacked: true, class: 'span3', content_options: {class: 'span5'}) do |t|
+  - t.tab('tab1', disabled: true, clickable: false) do
+    I'm tab #1.
+  - t.tab('tab2') do
+    I'm tab #2.
+  - t.tab('tab3') do
+    I'm tab #3.
+</pre>
+
+  <h3>Default Pill</h3>
+
+  <div class="bs-docs-example">
+    <%= tabs(type: 'pills', id: 'tab_30') do |t| %>
+        <% t.tab('tab1') do %>
+            I'm tab #1.
+        <% end %>
+        <% t.tab('tab2') do %>
+            I'm tab #2.
+        <% end %>
+        <% t.tab('tab3') do %>
+            I'm tab #3.
+        <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= tabs(style: 'pill', id: 'tab_30') do |t|
+  - t.tab('tab1') do
+    I'm tab #1.
+  - t.tab('tab2') do
+    I'm tab #2.
+  - t.tab('tab3') do
+    I'm tab #3.
+</pre>
+
+</section>

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

@@ -0,0 +1,212 @@
+<section id="table">
+  <div class="page-header">
+    <h1>Table
+      <small>bootstrap table helper</small>
+    </h1>
+  </div>
+
+  <p>Table helper wraps bootstrap table. It combines objects from the controller and table.</p>
+  <p>It has multiple options</p>
+
+  <table class="table table-hover table-bordered">
+    <thead>
+      <tr>
+        <th class="span3">Option</th>
+        <th class="span9">Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>type</td>
+        <td>It's a string splitted by space which represents bootstrap table type such as
+        hover, bordered, stripped. For example: 'hover fluid', 'bordered condensed'</td>
+      </tr>
+      <tr>
+        <td>collection</td>
+        <td>An object array or an ActiveRecord relation. Used to generate rows repeatly</td>
+      </tr>
+      <tr>
+        <td>caption</td>
+        <td>Table's caption</td>
+      </tr>
+      <tr>
+        <td>caption_options</td>
+        <td>Options can be accepted by caption tag</td>
+      </tr>
+      <tr>
+        <td>show_header</td>
+        <td>True or false, whether to show the thead of the table</td>
+      </tr>
+      <tr>
+        <td>default_row_options</td>
+        <td>Default row options that would be applied to all rows default</td>
+      </tr>
+      <tr>
+        <td></td>
+        <td>Other options can be accepted by table tag</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h3>Fluid table</h3>
+  <p>Generate a table with fluid layout, pass a collection, you can specify the method
+  should be called by the object in a column or use a code block.</p>
+
+  <div class="bs-docs-example">
+    <%= table(collection: @orders, type: 'hover fluid') do |t| %>
+      <% t.column(width: 2, method: :order_number, align: 'center') %>
+      <% t.column(width: 2, method: :order_date) { |order| order.order_date.strftime("%d-%m-%Y") } %>
+      <% t.column(width: 2, method: :customer_name) %>
+      <% t.column(width: 2, method: :status) %>
+      <% t.column(width: 4, header_options: { text: 'Actions' }, align: 'center') do %>
+        <%= link_to 'show', '#table' %> |
+        <%= link_to 'edit', '#table' %> |
+        <%= link_to 'destroy', '#table', confirm: 'sure?' %>
+      <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= table(collection: @orders, type: 'hover fluid') do |t|
+  - t.column(width: 2, method: :order_number, align: 'center')
+  - t.column(width: 2, method: :order_date) { |order| order.order_date.strftime("%d-%m-%Y") }
+  - t.column(width: 2, method: :customer_name)
+  - t.column(width: 2, method: :status)
+  - t.column(width: 4, header_options: { text: 'Actions' }, align: 'center') do
+    = link_to 'show', '#table'
+    |
+    = link_to 'edit', '#table'
+    |
+    = link_to 'destroy', '#table', confirm: 'sure?'
+</pre>
+
+  <h3>Fixed table</h3>
+  <p>The default table is a non-fluid table.</p>
+
+  <div class="bs-docs-example">
+    <%= table(collection: @orders) do |t| %>
+      <% t.column(width: 2, method: :order_number, align: 'center') %>
+      <% t.column(width: 2, method: :order_date) { |order| order.order_date.strftime("%d-%m-%Y") } %>
+      <% t.column(width: 2, method: :customer_name) %>
+      <% t.column(width: 2, method: :status) %>
+      <% t.column(width: 4, header_options: { text: 'Actions' }, align: 'center') do %>
+        <%= link_to 'show', '#table' %> |
+        <%= link_to 'edit', '#table' %> |
+        <%= link_to 'destroy', '#table', confirm: 'sure?' %>
+      <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= table(collection: @orders) do |t|
+  - t.column(width: 2, method: :order_number, align: 'center')
+  - t.column(width: 2, method: :order_date) { |order| order.order_date.strftime("%d-%m-%Y") }
+  - t.column(width: 2, method: :customer_name)
+  - t.column(width: 2, method: :status)
+  - t.column(width: 4, header_options: { text: 'Actions' }, align: 'center') do
+    = link_to 'show', '#table'
+    |
+    = link_to 'edit', '#table'
+    |
+    = link_to 'destroy', '#table', confirm: 'sure?'
+</pre>
+
+  <h3>Table with options</h3>
+
+  <div class="bs-docs-example">
+    <%= table(collection: @orders,
+              type: 'fluid striped bordered condensed',
+              caption: 'Orders',
+              caption_options: { style: 'color: red; font-size: 16px;' },
+              default_row_options: { style: 'background-color: #999;' }) do |t| %>
+      <% t.column(align: 'center', width: 2, method: :order_number) %>
+      <% t.column(header_options: { text: 'Date' }, width: 2, align: 'center') { |order| order.order_date.strftime('%d-%m-%Y') } %>
+      <% t.column(width: 2, method: :customer_name) %>
+      <% t.column(align: 'center', width: 2, method: :status) %>
+      <% t.column(align: 'center', width: 4, header_options: { text: 'Actions' }) do %>
+        <%= link_to 'show', '#table' %> |
+        <%= link_to 'edit', '#table' %> |
+        <%= link_to 'destroy', '#table', confirm: 'sure?' %>
+      <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= table(collection: @orders,
+        type: 'fluid striped bordered condensed',
+        caption: 'Orders',
+        caption_options: { style: 'color: red; font-size: 16px;' },
+        default_row_options: { style: 'background-color: #999;' }) do |t|
+  - t.column(align: 'center', width: 2, method: :order_number)
+  - t.column(header_options: { text: 'Date' }, width: 2, align: 'center') { |order| order.order_date.strftime('%d-%m-%Y') }
+  - t.column(width: 2, method: :customer_name)
+  - t.column(align: 'center', width: 2, method: :status)
+  - t.column(align: 'center', width: 4, header_options: { text: 'Actions' }) do
+    = link_to 'show', '#table'
+    |
+    = link_to 'edit', '#table'
+    |
+    = link_to 'destroy', '#table', confirm: 'sure?'
+
+</pre>
+
+  <h3>Table with complex header</h3>
+
+  <div class="bs-docs-example">
+    <%= table(collection: @orders,
+              type: "hover fluid bordered") do |t| %>
+        <% t.header_row do |r|
+          r.header(colspan: 2, align: 'center') { "Order, as to #{Date.today}" }
+          r.header(text: 'Customer', width: 3, rowspan: 2)
+          r.header(text: 'Status', width: 1, rowspan: 2, align: 'center')
+          r.header(text: 'Actions', width: 3, colspan: 3, align: 'center')
+        end %>
+
+        <% t.header_row do |r|
+          r.header(text: 'Number', width: 2, align: 'center')
+          r.header(text: 'Date', width: 3, align: 'center')
+          r.header(text: 'show', width: 1, align: 'center')
+          r.header(text: 'edit', width: 1, align: 'center')
+          r.header(text: 'destroy', width: 1, align: 'center')
+        end %>
+
+        <% t.column(align: 'center', method: :order_number) %>
+        <% t.column(align: 'center') { |order| order.order_date.strftime('%d-%m-%Y') } %>
+        <% t.column(method: :customer_name) %>
+        <% t.column(align: 'center', method: :status) %>
+        <% t.column(align: 'center') { link_to 'show', '#table' } %>
+        <% t.column(align: 'center') { link_to 'edit', '#table' } %>
+        <% t.column(align: 'center') { link_to 'destroy', '#table', confirm: 'sure?' } %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= table(collection: @orders,
+        type: "hover fluid bordered") do |t|
+  - t.header_row do |r|
+    - r.header(colspan: 2, align: 'center') { "Order, as to #{Date.today}" }
+    - r.header(text: 'Customer', width: 3, rowspan: 2)
+    - r.header(text: 'Status', width: 1, rowspan: 2, align: 'center')
+    - r.header(text: 'Actions', width: 3, colspan: 3, align: 'center')
+
+  - t.header_row do |r|
+    - r.header(text: 'Number', width: 2, align: 'center')
+    - r.header(text: 'Date', width: 3, align: 'center')
+    - r.header(text: 'show', width: 1, align: 'center')
+    - r.header(text: 'edit', width: 1, align: 'center')
+    - r.header(text: 'destroy', width: 1, align: 'center')
+
+  - t.column(align: 'center', method: :order_number)
+  - t.column(align: 'center') { |order| order.order_date.strftime('%d-%m-%Y') }
+  - t.column(method: :customer_name)
+  - t.column(align: 'center', method: :status)
+  - t.column(align: 'center') { link_to 'show', '#table' }
+  - t.column(align: 'center') { link_to 'edit', '#table' }
+  - t.column(align: 'center') { link_to 'destroy', '#table', confirm: 'sure?' }
+</pre>
+
+</section>

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

@@ -0,0 +1,84 @@
+<section id="thumbnails">
+  <div class="page-header">
+    <h1>Thumbnails
+      <small>bootstrap thumbnails helper</small>
+    </h1>
+  </div>
+
+  <p>Thumbnails helpers wraps bootstrap thumbnails component.</p>
+
+  <h3>Thumbnails</h3>
+
+  <div class="bs-docs-example">
+    <%= tns do %>
+      <%= th(3) do %>
+        <%= tn do %>
+          <%= image_tag 'holder.js/300x200' %>
+          <h3>Title</h3>
+          <p>Description</p>
+        <% end %>
+      <% end %>
+      <%= th(3) do %>
+        <%= tn do %>
+          <%= image_tag 'holder.js/300x200' %>
+          <h3>Title</h3>
+          <p>Description</p>
+        <% end %>
+      <% end %>
+      <%= th(3) do %>
+        <%= tn do %>
+          <%= image_tag 'holder.js/300x200' %>
+          <h3>Title</h3>
+          <p>Description</p>
+        <% end %>
+      <% end %>
+      <%= th(6) do %>
+        <%= tn do %>
+          <%= image_tag 'holder.js/600x200' %>
+          <h3>Title</h3>
+          <p>Description</p>
+        <% end %>
+      <% end %>
+      <%= th(6) do %>
+        <%= tn do %>
+          <%= image_tag 'holder.js/600x200' %>
+          <h3>Title</h3>
+          <p>Description</p>
+        <% end %>
+      <% end %>
+
+
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-haml">
+= tns do
+  = th(3) do
+    = tn do
+      = image_tag 'holder.js/300x200'
+      %h3 Title
+      %p Description
+  = th(3) do
+    = tn do
+      = image_tag 'holder.js/300x200'
+      %h3 Title
+      %p Description
+  = th(3) do
+    = tn do
+      = image_tag 'holder.js/300x200'
+      %h3 Title
+      %p Description
+  = th(6) do
+    = tn do
+      = image_tag 'holder.js/600x200'
+      %h3 Title
+      %p Description
+  = th(6) do
+    = tn do
+      = image_tag 'holder.js/600x200'
+      %h3 Title
+      %p Description
+</pre>
+
+</section>