senaduka/old-ribica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

items are now done and pictures resize on serverside automagically

Browse Source
This commit is contained in:
Senad Uka
2015-04-12 11:11:26 +02:00
parent 8197104040
commit ea2837bd00
5 changed files with 39 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
front-api/models/multi_media_description.rb
View File

@@ -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

4
front-ui/app/components/items/itemList.js
View File

@@ -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>

36
front-ui/app/components/items/singleItem.js
View File

@@ -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>
);
}

3
front-ui/app/css/main.css
View File

@@ -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;

2
front-ui/app/stores/itemDetailsStore.js
View File

@@ -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;