From ea2837bd0012caa247041228c7f6099aa52f607e Mon Sep 17 00:00:00 2001
From: Senad Uka <senad.uka@gmail.com>
Date: Sun, 12 Apr 2015 11:11:26 +0200
Subject: [PATCH] items are now done and pictures resize on serverside
 automagically

---
 front-api/models/multi_media_description.rb |  9 ++++++
 front-ui/app/components/items/itemList.js   |  4 +--
 front-ui/app/components/items/singleItem.js | 36 ++++++++++++++-------
 front-ui/app/css/main.css                   |  3 +-
 front-ui/app/stores/itemDetailsStore.js     |  2 +-
 5 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/front-api/models/multi_media_description.rb b/front-api/models/multi_media_description.rb
index 57f7a26..c4bc45d 100644
--- a/front-api/models/multi_media_description.rb
+++ b/front-api/models/multi_media_description.rb
@@ -2,4 +2,13 @@ class MultiMediaDescription < ActiveRecord::Base
   belongs_to :item
   belongs_to :media_type
 
+  
+  def attributes
+    super.merge('resized_url' => self.resized_url)
+  end
+
+  def resized_url
+  	url.gsub('/upload/v','/upload/c_lpad,h_170,w_226/v')
+  end
+
 end
diff --git a/front-ui/app/components/items/itemList.js b/front-ui/app/components/items/itemList.js
index 1bcb65f..a59a4d8 100644
--- a/front-ui/app/components/items/itemList.js
+++ b/front-ui/app/components/items/itemList.js
@@ -20,9 +20,9 @@ var ItemList = React.createClass({
         return (
             <div className="row-fluid">
             <div className="span10">
-            <ul className="item_list">
+             <div style={{marginTop: 35, padding: '0 25px'}} className="row">
                {items}
-            </ul>
+            </div>
             {this.getPages()}
             </div>
             </div>
diff --git a/front-ui/app/components/items/singleItem.js b/front-ui/app/components/items/singleItem.js
index 0aeb1bb..d7b3811 100644
--- a/front-ui/app/components/items/singleItem.js
+++ b/front-ui/app/components/items/singleItem.js
@@ -11,22 +11,36 @@ var SingleItem = React.createClass({
       var self = this;
       var itemClick = this.itemClick;
       var firstImage = this.props.item.get('multi_media_descriptions')[0];
-      firstImage = firstImage || { url:  "https://res.cloudinary.com/lfvt7ps2n/image/upload/c_crop,g_center,w_300/v1421732950/http_www.asms.ru_bitrix_templates_main_images_nophoto_irnofq.png" } ;
+      firstImage = firstImage || { resized_url:  "https://res.cloudinary.com/lfvt7ps2n/image/upload/c_fit,h_172,w_226/v1421732950/http_www.asms.ru_bitrix_templates_main_images_nophoto_irnofq.png" } ;
       if (hidePrice) { 
         return (    
-        <div className="single_item"  onClick={itemClick}>
-          <img src={firstImage.url} className="item_list_image" />
-          <h1> { this.props.item.get('name') }</h1>
-        </div>
+         <div className="col-lg-2 col-md-2 col-sm-3 col-xs-6">
+          <div className="productbox">
+            <img className="img-responsive" src={firstImage.url} alt="product image" />
+            <div>
+             
+                <p>{ this.props.item.get('brand') ? this.props.item.get('brand').name : '' }{ this.props.item.get('name') }</p>
+             
+            </div>
+          </div>
+        </div>  
         );
       }
       else {
-        return (    
-        <div className="single_item"  onClick={itemClick}>
-          <img src={firstImage.url} className="item_list_image" />
-          <h1> { this.props.item.get('name') }</h1>
-          <div>{ this.props.item.get('brand')? this.props.item.get('brand').name : '' } </div>
-          <div> { this.props.item.get('list_price') } KM </div>
+        return (  
+
+         <div className="col-lg-2 col-md-2 col-sm-3 col-xs-6"  onClick={itemClick}>
+          <div className="productbox">
+            <img className="img-responsive" src={firstImage.resized_url} alt="product image" />
+            <div>
+              <div>
+               
+                <p>{ this.props.item.get('brand') ? this.props.item.get('brand').name : '' }{ this.props.item.get('name') }</p>
+                <h4> { this.props.item.get('list_price') } KM </h4>
+               
+              </div>
+            </div>
+          </div>
         </div>  
         );
       }
diff --git a/front-ui/app/css/main.css b/front-ui/app/css/main.css
index c5f8453..0778003 100644
--- a/front-ui/app/css/main.css
+++ b/front-ui/app/css/main.css
@@ -105,6 +105,7 @@ background: none;
 }
 
 .productbox{
+cursor: pointer;
 -moz-box-shadow: 1px 4px 25px #000000;
 -webkit-box-shadow: 1px 4px 25px #000000;
 box-shadow: 1px 4px 25px #000000;
@@ -138,7 +139,7 @@ text-decoration: underline;
 
 }
 .productbox div span{
-color:#06c3c3;
+color: black;
 margin-left: 8px;
 
 
diff --git a/front-ui/app/stores/itemDetailsStore.js b/front-ui/app/stores/itemDetailsStore.js
index 029bd59..753e238 100644
--- a/front-ui/app/stores/itemDetailsStore.js
+++ b/front-ui/app/stores/itemDetailsStore.js
@@ -33,7 +33,7 @@ var fetchItemWithDetails = function() {
         item.fetch({
             success: function() {
                 _images = (_itemWithDetails.get("multi_media_descriptions") || []).map(function(mmd) {
-                    return mmd.url;
+                    return mmd.resized_url;
                 });
                 _count = _images.length;
                 _currentImage = 0;