Merge pull request #3 from ltfschoen/feature/bootstrap

Feature / Bootstrap 4 Responsive Grid and Styles

Gemfile

@@ -23,6 +23,14 @@ gem 'coffee-rails', '~> 4.2'
 gem 'jquery-rails'
 gem 'jquery-ui-rails', '~> 6.0.1'
 
+# Use Bootstrap 4
+gem 'bootstrap', '~> 4.0.0.alpha6'
+
+# Bootstrap tooltips and popovers depend on http://tether.io/ for positioning.
+source 'https://rails-assets.org' do
+  gem 'rails-assets-tether', '>= 1.3.3'
+end
+
 # Pagination
 gem 'will_paginate', '~> 3.1.0'
 

Gemfile.lock

@@ -1,5 +1,6 @@
 GEM
   remote: https://rubygems.org/
+  remote: https://rails-assets.org/
   specs:
     actioncable (5.0.2)
       actionpack (= 5.0.2)
@@ -39,6 +40,11 @@ GEM
       minitest (~> 5.1)
       tzinfo (~> 1.1)
     arel (7.1.4)
+    autoprefixer-rails (6.7.6)
+      execjs
+    bootstrap (4.0.0.alpha6)
+      autoprefixer-rails (>= 6.0.3)
+      sass (>= 3.4.19)
     builder (3.2.3)
     byebug (9.0.6)
     coffee-rails (4.2.1)
@@ -100,6 +106,7 @@ GEM
       bundler (>= 1.3.0, < 2.0)
       railties (= 5.0.2)
       sprockets-rails (>= 2.0.0)
+    rails-assets-tether (1.4.0)
     rails-controller-testing (1.0.1)
       actionpack (~> 5.x)
       actionview (~> 5.x)
@@ -179,6 +186,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  bootstrap (~> 4.0.0.alpha6)
   byebug
   coffee-rails (~> 4.2)
   jbuilder (~> 2.5)
@@ -188,6 +196,7 @@ DEPENDENCIES
   pg (~> 0.18)
   puma (~> 3.0)
   rails (~> 5.0.0, >= 5.0.0.1)
+  rails-assets-tether (>= 1.3.3)!
   rails-controller-testing (~> 1.0.1)
   rspec-rails (~> 3.5.2)
   sass-rails (~> 5.0.6)

README.md

@@ -1,5 +1,9 @@
 # README
 
+# Screenshot
+
+![alt tag](https://raw.githubusercontent.com/ltfschoen/rails_csv_app/master/screenshot.png)
+
 ---
 
 # Table of Contents
@@ -12,6 +16,7 @@
   * [Setup - Git Releases and Tags](#part-5000)
   * [Feature - CSV Upload and Display](#part-6000)
   * [Feature - Search and Filter Data Uploaded from CSV with Pagination](#part-7000)
+  * [Feature - Bootstrap](#part-8000)
 
 ---
 
@@ -34,9 +39,8 @@
 * [X] - Import pre-populated CSV into database from web form.
 * [X] - Present populated data from database in table view
 * [X] - Use AJAX and apply basic filters on table so data updated without refreshing whole page.
-* [ ] - Use `div`'s instead of `table`
-* [ ] - Use Sass instead of CSS
-* [ ] - Add Bootstrap or Foundation styling for buttons and tables
+* [X] - Use Sass instead of CSS
+* [X] - Add Bootstrap 4 styling for buttons and tables and Responsive grid
 * [ ] - Switch front-end to React.js or Angular.js instead of jQuery
 * [ ] - Add more Unit Tests
 
@@ -287,10 +291,6 @@ written for Rails 3 back in 2010, to make it run without error:
 * Add Sass Rails Gem
     * http://stackoverflow.com/questions/15257555/how-to-reference-images-in-css-within-rails-4
 
+## Feature - Bootstrap <a id="part-8000"></a>
 
-
-
-
-
-
-
+* Bootstrap 4 tables https://v4-alpha.getbootstrap.com/content/tables/

app/assets/javascripts/application.js

@@ -13,6 +13,8 @@
 //= require jquery3
 //= require jquery_ujs
 //= require jquery-ui
+//= require tether
+//= require bootstrap-sprockets
 //= require turbolinks
 //= require_tree .
 

app/assets/stylesheets/application.scss

@@ -16,3 +16,4 @@
  */
 
 @import "products";
+@import "bootstrap";

app/assets/stylesheets/products.scss

@@ -3,9 +3,65 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
 body {
-  background-color: #000000;
+  background-color: #000;
   font-family: Verdana, Helvetica, Arial;
   font-size: 14px;
+
+  #container {
+    width: 100%;
+    margin: 0 auto;
+    background-color: #FFF;
+    padding: 20px 40px;
+    margin-top: 20px;
+
+    .product-import {
+      padding-bottom: 20px;
+
+      #choose-file {
+        width: 50%;
+      }
+    }
+
+    .product-search {
+      padding-bottom: 10px;
+
+      #search-input {
+        width: 100%;
+      }
+
+      #search-submit {
+        display: inline-flex;
+        width: 100%;
+      }
+    }
+
+    .product-list {
+      .pagination > * {
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+
+      #products {
+        .pretty .price {
+          text-align: right;
+        }
+
+        .pretty th .current {
+          padding-right: 12px;
+          background-repeat: no-repeat;
+          background-position: right center;
+        }
+
+        .pretty th .asc {
+          background-image: asset-data-url("up_arrow_inverse.gif");
+        }
+
+        .pretty th .desc {
+          background-image: asset-data-url("down_arrow_inverse.gif");
+        }
+      }
+    }
+  }
 }
 
 a img {
@@ -21,87 +77,3 @@ a {
   height: 0;
   overflow: hidden;
 }
-
-#container {
-  width: 75%;
-  margin: 0 auto;
-  background-color: #FFF;
-  padding: 20px 40px;
-  border: solid 1px black;
-  margin-top: 20px;
-}
-
-#flash_notice, #flash_error, #flash_alert {
-  padding: 5px 8px;
-  margin: 10px 0;
-}
-
-#flash_notice {
-  background-color: #CFC;
-  border: solid 1px #6C6;
-}
-
-#flash_error, #flash_alert {
-  background-color: #FCC;
-  border: solid 1px #C66;
-}
-
-.fieldWithErrors {
-  display: inline;
-}
-
-.error_messages {
-  width: 400px;
-  border: 2px solid #CF0000;
-  padding: 0px;
-  padding-bottom: 12px;
-  margin-bottom: 20px;
-  background-color: #f0f0f0;
-  font-size: 12px;
-}
-
-.error_messages h2 {
-  text-align: left;
-  font-weight: bold;
-  padding: 5px 10px;
-  font-size: 12px;
-  margin: 0;
-  background-color: #c00;
-  color: #fff;
-}
-
-.error_messages p {
-  margin: 8px 10px;
-}
-
-.error_messages ul {
-  margin: 0;
-}
-
-table.pretty {
-  border-collapse: collapse;
-  margin-bottom: 10px;
-}
-
-.pretty td, .pretty th {
-  padding: 4px 10px;
-  border: solid 1px #AAA;
-}
-
-.pretty .price {
-  text-align: right;
-}
-
-.pretty th .current {
-  padding-right: 12px;
-  background-repeat: no-repeat;
-  background-position: right center;
-}
-
-.pretty th .asc {
-  background-image: asset-data-url("up_arrow.gif");
-}
-
-.pretty th .desc {
-  background-image: asset-data-url("down_arrow.gif");
-}

app/controllers/products_controller.rb

@@ -32,6 +32,7 @@ def sort_direction
 
   def product_params
     params.permit(:id, :name, :quantity, :price, :comments, :released_at,
-                  :file, :search, :page, :sort, :utf8, :direction, :_)
+                  :file, :search, :page, :sort, :utf8,
+                  :authenticity_token, :commit, :direction, :_)
   end
 end

app/views/layouts/application.html.erb

@@ -12,7 +12,9 @@
   <body>
     <div id="container">
       <% flash.each do |name, msg| %>
-          <%= content_tag :div, msg, :id => "flash_#{name}" %>
+          <%#= debug name.inspect %>
+          <% name = "info" if name == "notice" %>
+          <%= content_tag :div, msg, class: "alert alert-#{name}" %>
       <% end %>
       <%= content_tag :h1, yield(:title) %>
       <%= yield %>

app/views/products/_products.html.erb

@@ -1,9 +1,10 @@
 <%= hidden_field_tag :direction, params[:direction] %>
 <%= hidden_field_tag :sort, params[:sort] %>
 
-<table class="pretty">
-	<thead>
+<table class="table table-sm table-bordered table-hover table-responsive pretty">
+	<thead class="thead-default">
 		<tr>
+			<th>#</th>
 			<th><%= sortable "id", "Id" %></th>
 			<th><%= sortable "name", "Name" %></th>
 			<th><%= sortable "price", "Price" %></th>
@@ -12,18 +13,21 @@
 			<th><%= sortable "released_at", "Released" %></th>
 		</tr>
 	</thead>
+	<% index = 0 %>
 	<% @products.each do |product| %>
+	<% index += 1 %>
 	<tbody>
 		<tr>
-			<td><%= product.id %></td>
-			<td><%= product.name %></td>
-			<td class="price"><%= number_to_currency(product.price) %></td>
-			<td><%= product.quantity %></td>
-			<td><%= product.comments %></td>
-			<td><%= product.released_at.strftime("%B %e, %Y") %></td>
+			<th scope="row"><%= index %></th>
+			<td class="text-primary"><%= product.id %></td>
+			<td class="text-primary"><%= product.name %></td>
+			<td class="text-primary price"><%= number_to_currency(product.price) %></td>
+			<td class="text-primary"><%= product.quantity %></td>
+			<td class="text-muted"><%= product.comments %></td>
+			<td class="text-muted"><%= product.released_at.strftime("%B %e, %Y") %></td>
 		</tr>
 	</tbody>
 	<% end %>
-</table>
+</div>
 
 <%= will_paginate @products %>

app/views/products/index.html.erb

@@ -1,18 +1,31 @@
-<%#= flash[:notice] %>
-<% content_for :title, "Products" %>
-
-<%= form_tag products_path, method: 'get', id: "products_search" do %>
-  <p>
-    <%= text_field_tag :search, params[:search] %>
-    <%= submit_tag "Search", name: nil %>
-  </p>
-  <div id="products"><%= render 'products' %></div>
-<% end %>
-
-<div>
-  <h3>Import a CSV File</h3>
-  <%= form_tag import_products_path, multipart: true do %>
-    <%= file_field_tag :file %>
-    <%= submit_tag "Import CSV" %>
-  <% end %>
+<div class="row">
+  <div class="col-sm-12 col-md-8">
+    <div class="product-import">
+      <h3>Upload and Import CSV Data</h3>
+      <%= form_tag import_products_path, multipart: true do %>
+          <%= file_field_tag :file, id: "choose-file", class: "btn btn-secondary btn-file" %>
+          <%= submit_tag "Import CSV", id: "import-submit", class: "btn btn-success" %>
+      <% end %>
+    </div>
+  </div>
+  <div class="col-sm-12 col-md-4">
+    <div class="product-search">
+      <%# content_for :title, "Products" %>
+      <h3>Search</h3>
+      <%= form_tag products_path, method: 'get', id: "products_search", class: "form-inline pull-xs-right" do %>
+        <p>
+          <%= text_field_tag :search, params[:search], placeholder: "", id: "search-input", class: "form-control" %>
+          <%= submit_tag "Search", name: nil, id: "search-submit", class: "btn btn-success" %>
+        </p>
+      <% end %>
+    </div>
+  </div>
+</div>
+<div class="row">
+  <div class="col-sm-12">
+    <div class="product-list">
+      <h3>Sort and Paginate</h3>
+      <div id="products"><%= render 'products' %></div>
+    </div>
+  </div>
 </div>