Finishing product page

app/assets/javascripts/application.js

@@ -13,6 +13,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
+//= require jaralax.min
 //= require main
 //= require mdb.min
 //= require popper.min

app/assets/javascripts/main.js

@@ -1,29 +1,29 @@
 $(function() {
     $('body').addClass('js');
-  
+
     var $hamburger = $('.hamburger'),
         $nav = $('#site-nav'),
         $masthead = $('#masthead');
-  
+
     $hamburger.click(function() {
       $(this).toggleClass('is-active');
       $nav.toggleClass('is-active');
       $masthead.toggleClass('is-active');
-      return false; 
+      return false;
     })
 });
-$( document ).ready(function() {  
+$( document ).ready(function() {
 $(function() {
     var selectedClass = "";
-    $(".fil-cat").click(function(){ 
-    selectedClass = $(this).attr("data-rel"); 
+    $(".fil-cat").click(function(){
+    selectedClass = $(this).attr("data-rel");
      $("#portfolio-wrap").fadeTo(100, 0.1);
     $("#portfolio-wrap div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
     setTimeout(function() {
       $("."+selectedClass).fadeIn().addClass('scale-anm');
       $("#portfolio-wrap").fadeTo(300, 1);
-    }, 300); 
-    
+    }, 300);
+
   });
 });
 });
@@ -41,12 +41,12 @@ $( document ).ready(function() {
 });
 $( document ).ready(function() {
 // Google Maps Scripts
-var map = null;
+// var map = null;
 // When the window has finished loading create our google map below
-google.maps.event.addDomListener(window, 'load', init);
-google.maps.event.addDomListener(window, 'resize', function() {
-    map.setCenter(new google.maps.LatLng(40.6700, -73.9400));
-});
+// google.maps.event.addDomListener(window, 'load', init);
+// google.maps.event.addDomListener(window, 'resize', function() {
+//     map.setCenter(new google.maps.LatLng(40.6700, -73.9400));
+// });
 
 function init() {
     // Basic options for a simple Google Map
@@ -239,6 +239,7 @@ $( document ).ready(function() {
   });
 });
 $(document).ready(function(){
+  if (! $('.single-item').length) return;
     var prevButton = '<button type="button" data-role="none" class="slick-prev" aria-label="prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1"><path fill="#FFFFFF" d="M 16,16.46 11.415,11.875 16,7.29 14.585,5.875 l -6,6 6,6 z" /></svg></button>',
         nextButton = '<button type="button" data-role="none" class="slick-next" aria-label="next"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#FFFFFF" d="M8.585 16.46l4.585-4.585-4.585-4.585 1.415-1.415 6 6-6 6z"></path></svg></button>';
 
@@ -276,7 +277,7 @@ $window.on('scroll', function(){
 (function ($) {
     $.fn.countTo = function (options) {
         options = options || {};
-        
+
         return $(this).each(function () {
             // set options for current element
             var settings = $.extend({}, $.fn.countTo.defaults, {
@@ -286,58 +287,58 @@ $window.on('scroll', function(){
                 refreshInterval: $(this).data('refresh-interval'),
                 decimals:        $(this).data('decimals')
             }, options);
-            
+
             // how many times to update the value, and how much to increment the value on each update
             var loops = Math.ceil(settings.speed / settings.refreshInterval),
                 increment = (settings.to - settings.from) / loops;
-            
+
             // references & variables that will change with each update
             var self = this,
                 $self = $(this),
                 loopCount = 0,
                 value = settings.from,
                 data = $self.data('countTo') || {};
-            
+
             $self.data('countTo', data);
-            
+
             // if an existing interval can be found, clear it first
             if (data.interval) {
                 clearInterval(data.interval);
             }
             data.interval = setInterval(updateTimer, settings.refreshInterval);
-            
+
             // initialize the element with the starting value
             render(value);
-            
+
             function updateTimer() {
                 value += increment;
                 loopCount++;
-                
+
                 render(value);
-                
+
                 if (typeof(settings.onUpdate) == 'function') {
                     settings.onUpdate.call(self, value);
                 }
-                
+
                 if (loopCount >= loops) {
                     // remove the interval
                     $self.removeData('countTo');
                     clearInterval(data.interval);
                     value = settings.to;
-                    
+
                     if (typeof(settings.onComplete) == 'function') {
                         settings.onComplete.call(self, value);
                     }
                 }
             }
-            
+
             function render(value) {
                 var formattedValue = settings.formatter.call(self, value, settings);
                 $self.html(formattedValue);
             }
         });
     };
-    
+
     $.fn.countTo.defaults = {
         from: 0,               // the number the element should start at
         to: 0,                 // the number the element should end at
@@ -348,7 +349,7 @@ $window.on('scroll', function(){
         onUpdate: null,        // callback method for every time the element is updated
         onComplete: null       // callback method for when the element finishes updating
     };
-    
+
     function formatter(value, settings) {
         return value.toFixed(settings.decimals);
     }
@@ -357,6 +358,7 @@ $window.on('scroll', function(){
 jQuery(function ($) {
     var a = 300;
 $(window).scroll(function() {
+  if (!$('#counter').length) return;
   var oTop = $('#counter').offset().top - window.innerHeight;
   if (a == 300 && $(window).scrollTop() > oTop) {
 
@@ -366,10 +368,10 @@ $(window).scroll(function() {
       return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
     }
   });
-  
+
   // start all the timers
-  $('.count-archievement').each(count);  
-  
+  $('.count-archievement').each(count);
+
   function count(options) {
     var $this = $(this);
     options = $.extend({}, options || {}, $this.data('countToOptions') || {});
@@ -574,4 +576,4 @@ wow = new WOW(
 );
 wow.init();
 
-});
+});

app/assets/javascripts/products.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/stylesheets/products.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the products controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/style.css

@@ -38,7 +38,7 @@ footer.page-footer {
         background-color: #303437;
     }
     .navbar-brand img{
-        height: 35px;
+      height: 35px;
     }
 }
 @media only screen and (max-width: 550px) {
@@ -115,8 +115,8 @@ footer.page-footer {
 .form-control.search-wrap{
     border: 1px solid #fff;
     border-radius: 50px;
-    padding-left: 20px;
-    margin: 0 !important;
+    padding-left: 20px;"
+    margin: 0!important;
     margin-top: 2px;
     height: 15px;
 }
@@ -476,7 +476,7 @@ hr.separator-detail + h2.separator-d-text::after {
     color: #47c9e5;
     line-height: 20px;
     display: inline!important;
-    font-weight: 200;
+    font-weight: bold;
 
 }
 
@@ -529,6 +529,7 @@ a.btn-portfolio{
   height: 35px;
   line-height: 10px;
   width:auto;
+  position: static;
 }
 
 .material-card {
@@ -3460,3 +3461,51 @@ transform: translateY(-1500%)!important;
 .btn-portfolio{
   color: #fff!important;
 }
+
+.product-wrapper {
+  position: relative;
+  padding: 25px 0;
+  text-align: center;
+}
+
+.one-product {
+  background-color: #ffffff;
+  -webkit-box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.1);
+  -webkit-transform: scale(1);
+}
+
+.one-product:hover {
+  outline: solid 1px #dadada;
+}
+
+.one-product--image {
+  padding-bottom:100%;
+  background-position: center center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  transition: background-size 0.3s ease-in;
+}
+
+.one-product--image:hover {
+  background-size: 111%
+}
+
+.one-product--description {
+  text-align: left;
+  position: relative;
+  padding: 0 20px 30px;
+  color: #333;
+}
+
+.one-product--title {
+  font-size: 1.2rem;
+  font-weight: 500;
+  padding-bottom: 10px;
+
+a{
+  color: #fff;
+}
+.tile {
+  position: relative!important;
+}

app/controllers/products_controller.rb

@@ -0,0 +1,11 @@
+class ProductsController < ApplicationController
+  before_action :set_products
+
+  def index
+  end
+
+  private
+    def set_products
+      @products = Product.order(created_at: :desc)
+    end
+end

app/helpers/products_helper.rb

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

app/uploaders/image_uploader.rb

@@ -1,7 +1,7 @@
 class ImageUploader < CarrierWave::Uploader::Base
   # Include RMagick or MiniMagick support:
   # include CarrierWave::RMagick
-  # include CarrierWave::MiniMagick
+  include CarrierWave::MiniMagick
 
   # Choose what kind of storage to use for this uploader:
   Rails.env.development? ? (storage :file) : (include Cloudinary::CarrierWave)

app/views/products/_product.html.erb

@@ -0,0 +1,14 @@
+  <div class="col-md-3">
+    <a href="#">
+      <div class="product-wrapper">
+        <div class="one-product">
+          <div class="one-product--image" style="background-image:url(<%= product.image_url %>)">
+          </div>
+          <div class="one-product--description">
+            <div class="one-product--title"><%= product.name %></div>
+            <div class="one-product--price"><%= product.price %></div>
+          </div>
+        </div>
+      </div>
+    </a>
+</div>