Example code: The main items index view from www.speedie.equipment

index.html.erb

<!-- Search bar and filter dropdown -->
<div class="top-element mb-3">
  <div class="search-form">
    <%= form_for :items, method: :get do |f| %>
      <div class="input-group input-group mb-2">
        <%= label_tag :keywords, nil, class: "sr-only" %>
        <%= search_field_tag :q, params[:q], placeholder: "Search", class: "form-control input" %>
        <%= button_tag type: "submit", class: "btn btn-primary btn px-3" do %>
          <%= fa_icon "search" %>
        <% end %>
        <%= button_tag items_path, type: "button", class: "btn btn-danger btn px-3" do %>
          <%= fa_icon "times" %>
        <% end %>
      </div>
      <div class="input-group">
        <div class="mr-1 text-sm font-weight-light my-auto">
          Include:
        </div>
        <%= select_tag "item_type_id",
            options_from_collection_for_select(ItemType.all.order('LOWER(name)'), 
            :id, :name, params[:item_type_id]),
            include_blank: 'All Equipment Types', class: "btn btn-warning btn" %>
      </div>
    <% end %>
  </div>
</div>

<!-- Search results paginated list; table for desktop, cards for mobile -->
<div class="search-results pb-3">
  <% if @items.present? %>
    <%= page_entries_info @items, entry_name: 'item' %>
    <!-- item cards for mobile view  -->
    <div class="d-flex w-100">
      <ol class="d-flex w-100 list-group d-block d-md-none mx-auto">
        <% @items.each do |item| %>
          <li class="item-card list-group-item clearfix mb-2 w-100" data-link="<%= item_path(item) %>">
            <div class="row">
              <div class="col-12 text-truncate">
                <%= meets_spec_icon_display_for_item(item) %> <!-- items_helper method -->
                <b>#<%= item.id %></b>
                - 
                <span>
                  <%= item_type_variables_suffix_display_for_item(item) %> <!-- items_helper method -->
                  <%= item.item_type.name %>
                  <%= item_type_variables_affix_display_for_item(item) %> <!-- items_helper method -->
                </span>
              </div>
            </div>
            <div class="row">
              <div class="col-6 text-nowrap">
                <small><%= item.manufacturer %> <%= item.model %></small>
              </div>
              <div class="col-6 text-right">
                <span><%= current_status_display_for_item(item) %></span>
              </div>
            </div>
            <div class="row">
              <div class="col-6 text-nowrap">
                <% if item.serial_number? %>
                  <small class="text-muted">SN: <%= item.serial_number %></small>
                <% end %>
                <br/>
                <% if item.calibration_events.any? %>
                  <small class="text-muted">
                    Last Cal: 
                    <%= item.calibration_events.
                                order(:date_performed, :created_at).
                                last&.
                                date_performed&.
                                strftime("%m/%d/%Y") %>
                  </small>
                <% end %>
              </div>
              <div class="col-6 text-right">
                <span><%= item.campus.name %></span>
                <br/>
                <small class="text-muted"><%= item.location.name %></small>
              </div>
            </div>
          </li>
        <% end %>
      </ol>
    </div>
    <!-- items table for desktop view -->
    <table class="table table-hover table-responsive-lg d-none d-md-table w-100">
      <tr>
        <thead class="thead-light">
          <th>Inv#</th>
          <th>Type</th>
          <th>Manufacturer-Model</th>
          <th>Serial #</th>
          <th>Location</th>
          <th>Status</th>
          <th>Last Calibrated</th>
        </thead>
      </tr>
      <tbody>
        <% @items.each do |item| %>
          <tr class="item-row" data-link="<%= item_path(item) %>">
            <th scope="row">
              <%= item.id %>
            </td>
            <td>
              <%= item_type_variables_suffix_display_for_item(item) %> <!-- items_helper method -->
              <%= item.item_type.name %>
              <%= item_type_variables_affix_display_for_item(item) %> <!-- items_helper method -->
            </td>
            <td><%= item.manufacturer %> <%= item.model %></td>
            <td><%= item.serial_number %></td>
            <td><%= item.campus.name %>-<%= item.location.name %></td>
            <td>
              <%= meets_spec_icon_display_for_item(item) %> <!-- items_helper method -->
              <%= current_status_display_for_item(item) %> <!-- items_helper method -->
            </td>
            <td>
              <%= item.calibration_events.
                          order(:date_performed, :created_at).
                          last&.
                          date_performed&.
                          strftime("%m/%d/%Y") %>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  <% else %>
    <p class="h4">No Matches</p>
  <% end %>
  <%= paginate @items, window: 1 %>
</div>

<script>
  // If <li> element is clicked/tapped in mobile layout, <li> acts as link to 'item/show' view
  $("li[data-link]").click(function() {
    window.location = $(this).data("link")
  })
  
  // If <tr> element is clicked in desktop layout, <tr> acts as link to 'item/show' view
  $("tr[data-link]").click(function() {
    window.location = $(this).data("link")
  })
  
  // Set cursor in search field for quick entry after page load
  var searchBar = document.querySelector('.input');
  searchBar.focus()
</script>