Rails Scaffolding to Bootstrap Forms: Find And Replace All Commands (e.g. for TextMate)

rails-scaffold-to-bootstrap-commands.md

Index Pages

Change the H1

• Find (regex):

  <h1>Listing (.*?)</h1>

• Replace:

  <% content_for :page_title do %>
  $1s -
  <% end %>
  <div class="container">
  <div class="page-header">
  <h1>
  <div class="pull-left">
  <%= link_to '<span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span>'.html_safe, root_path, class: 'btn btn-default', title: 'Back' %>
  &nbsp;
  </div>
  
  &lt;div class="pull-right"&gt;
    &lt;%= link_to '+ New $1', [:new, :$1], class: 'btn btn-success' %&gt;
  &lt;/div&gt;
  
  $1s
  
  </h1>
  </div>

Remove old new link

• Find (regex):

  <br>

<%= link_to 'New(.*)%>

• Replace:

  </div>

Remove the table actions column header

• Find (text):

  <th colspan="3"></th>

• Replace: [nothing]

Remove the actions body columns

• Find (regex):

  <td><%= link_to 'Show', (.*?) %></td>
  <td><%= link_to 'Edit', (.*?) %></td>
  <td><%= link_to 'Destroy',(.*?)%></td>

• Replace: [nothing]

Bootstrapify Table

• Find (text):

  <table>

• Replace:

  <table class="table table-striped table-hover">

Add Empty Row Notice

• Find (regex):

  <tbody>
  \s+<% @(.*)?.each

• Replace:

  <tbody>
  <% unless @$1.any? %>
  <tr id="empty-table">
  <td class="bg-warning" colspan="2">No $1 created yet.</td>
  </tr>
  <% end %>
  <% @$1.each

Make first cell clickable

• Find (regex):

  \| %>
  <tr>
  <td><%= (.?)\.(.?) %>

• Replace:

  | %>
  <tr>
  <td><%= link_to $1.$2, $1 %>

Optional: Make entire row clickable (js required)

• Find (regex):

  <tr>
  <td><%= link_to (.*?)\.

• Replace:

  <tr class="linked-row" data-href="<%= $1_path($1) %>">
  <td><%= link_to $1.

Required Javascript:

$(document).ready(function($) {
  $(".linked-row").click(function() {
    window.document.location = $(this).attr("data-href");
  });
});

Recommended CSS:

tr.linked-row { cursor: pointer; }

Show Pages

Remove Notice, Replace with Page Header

• Find (regex):

  <p id="notice"><%= notice %></p>

<p> <strong>(.?):</strong> <%= @(.?).(.*?) %> </p>

• Replace:

  <% content_for :page_title do %>
  '<%= @$2.$3 %>' $2 -
  <% end %>
  <div class="container">
  <div class="page-header">
  <h1>
  <div class="pull-left">
  <%= link_to '<span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span>'.html_safe, $2s_path, class: 'btn btn-default', title: 'Back to $2s' %>
  &nbsp;
  </div>
  
  '&lt;%= @$2.$3 %&gt;' $2
  
  </h1>
  </div>
  <p>
  <strong>$1:</strong>
  <%= @$2.$3 %>
  </p>

Remove Footer

• Find (regex):

  <%= link_to 'Back', (.*?)s_path %>

• Replace:

  </div>

Make Show Page Grid

• Find (regex):

  <p>
  <strong>(.*?):</strong>
  <%= @(.*?)\.(.*?) %>
  </p>

• Replace:

  <div class="row">
  <label class="col-sm-3 text-right text-muted">$1:</label>
  <div class="col-sm-9"><%= @$2.$3 %></div>
  </div>

New Pages

Change new page header to page-header

• Find (regex):

  <h1>New (.*?)</h1>

• Replace:

  <% content_for :page_title do %>
  New $1 -
  <% end %>
  <div class="container">
  <div class="page-header">
  <h1>
  New $1
  </h1>
  </div>

Change new page Back links to Cancel Buttons

• Find (regex):

  <%= render 'form' %>

<%= link_to 'Back', (.*?)s_path %>

• Replace:

  <%= render 'form' %>

<%= link_to 'Cancel', $1s_path, class: 'btn btn-default' %> </div>

Forms

Change All Forms to Horizontal

• Find (regex): <%= form_for\(@(.*?)\) do \|f\| %>
• Replace: <%= form_for(@$1, { html: { role: 'form', class: 'form-horizontal'}}) do |f| %>

Change all errors to alerts

• Find (text): <div id="error_explanation">
• Replace: <div id="error_explanation" class="alert alert-danger" role="alert">

Change all error h2s to strongs

• Find (regex): <h2>(.*?)from being saved:</h2>
• Replace: <strong>$1from being saved:</strong>

Change all fields to form-controls

• Find (regex):

  <div class="field">
  <%= f.label :(.*?) %><br>
  <%= f.(.*?) :(.*?) %>
  </div>

• Replace:

  <div class="col-sm-12">
  <div class="form-group<%= f.object.errors[:$1].empty? ? '' : ' has-error has-feedback' %>">
  <%= f.label :$1, { class: 'control-label col-sm-1' } %>
  <div class="col-sm-11">
  <%= f.$2 :$1, { class: 'form-control' } %>
  </div>
  </div>
  </div>

Center Submit Buttons and label them as success

• Find (text):

    <div class="actions">
  <%= f.submit %>
  </div>

• Replace:

    <div class="actions text-center">
  <%= f.submit class: 'btn btn-success' %>
  </div>

Change checkboxes to have yes Text

• Find (regex): <%= f.check_box :(.*?), { class: 'form-control' } %>
• Replace:

  <div class="input-group">
  <span class="input-group-addon">
  <%= f.check_box :$1 %>
  </span>
  <%= f.label :$1, 'Yes', class: 'form-control btn btn-default text-left' %>
  </div>