- removed our copy jquery & bootstrap. using cdn instead

- added search box to the header
- made reindex rake task
This commit is contained in:
Edin Dazdarevic
2015-05-25 20:49:52 +02:00
parent c99bcbda7a
commit e1be044fd9
14 changed files with 154 additions and 88 deletions

View File

@@ -3,18 +3,14 @@ var CartStore = require('../../stores/cartStore.js');
var CartActions = require('../../actions/cartActions.js');
var Globals = require('../../globals');
var buttonHolderStyle = {
display: 'inline-block'
};
var AddToCart = React.createClass({
render: function() {
INITIAL_ITEM_COUNT: 1,
render: function() {
var itemCount = this.state.count;
var amountAndAddButton = (
<div className="row-fluid add-to-cart">
<div className="span12">
@@ -25,16 +21,14 @@ var AddToCart = React.createClass({
<div>
<div style={buttonHolderStyle}><button className="btn mybutton" onClick={this._addToCartClick}>Dodaj na popis za kupovinu</button></div>
</div>
</div>
</div>
);
return amountAndAddButton;
},
},
// Add change listeners to stores
componentDidMount: function() {
CartStore.addChangeListener(this._onChange);
CartStore.addChangeListener(this._onChange);
if(!CartStore.dataStartedLoading()) {
CartActions.load();
@@ -44,9 +38,9 @@ var AddToCart = React.createClass({
getInitialState: function() {
var itemInCart = CartStore.getStateFor(this.props.item.get('id'));
return {
return {
item: itemInCart,
count: 0
count: this.INITIAL_ITEM_COUNT
}
},
@@ -54,12 +48,12 @@ var AddToCart = React.createClass({
_onChange: function () {
if (this.isMounted()) {
var item = CartStore.getStateFor(this.props.item.get('id'));
this.setState({ item: item, count: 0 });
this.setState({ item: item, count: this.INITIAL_ITEM_COUNT });
}
},
_onIncreaseClick: function () {
if (this.state.count < Globals.MaxNumberOfItemsToBeAdded ) {
this.state.count = this.state.count + 1;
this.setState(this.state);
@@ -67,8 +61,8 @@ var AddToCart = React.createClass({
},
_onDecreaseClick: function () {
if (this.state.count > 0) {
if (this.state.count > 1) {
this.state.count = this.state.count - 1;
this.setState(this.state);
}
@@ -81,7 +75,7 @@ var AddToCart = React.createClass({
componentWillUnmount: function () {
CartStore.removeChangeListener(this._onChange);
}
});
module.exports = AddToCart;
module.exports = AddToCart;

View File

@@ -5,16 +5,16 @@ var NavigationActions = require('../../actions/navigationActions.js');
var LoginStatus = require('../shared/loginStatus');
CartTotal = require('./cartTotal');
var cartStyle = {
var cartStyle = {
fontSize: '50px'
};
var normalizeCount = function(count) {
if (count >= 0 && count < 10) {
return "\u00a0" + count;
return "\u00a0" + count;
} else {
return count;
}
@@ -22,24 +22,33 @@ var normalizeCount = function(count) {
var CartIcon = React.createClass({
render: function() {
render: function() {
var textNotificationStyle = (this.state.count > 0) ? { display: 'inline-block'} : { display: 'none'} ;
return (
return (
<div>
<ul className="nav navbar-nav navbar-right hidden-md hidden-sm hidden-xs">
<li><LoginStatus /></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderLeft: 'solid lightgray 1px', paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', paddingBottom: 2}}><a href="#" style={{ paddingRight: '5px'}}><CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} justMerchandise={true}/> </a></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderRight: 'solid lightgray 1px'}}>
<a style={{marginBottom: 10, marginRight: 10}} className="mybutton" href="#">Završi narudžbu</a></li>
<ul className="nav navbar-nav navbar-right">
<li><LoginStatus /></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderLeft: 'solid lightgray 1px', paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', paddingBottom: 2}}><a href="#"><CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} justMerchandise={true}/> </a></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderRight: 'solid lightgray 1px'}}><a style={{marginLeft: 20, marginBottom: 10, marginRight: 15}} className="mybutton" href="#">Završi narudžbu</a></li>
</ul>
<ul className="nav navbar-nav navbar-right hidden-lg">
<li><LoginStatus /></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderLeft: 'solid lightgray 1px', paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px',borderRight: 'solid lightgray 1px', paddingBottom: 2}}><a href="#" style={{ paddingRight: '5px'}}><CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} justMerchandise={true}/> </a></li>
</ul>
</div>
);
},
// Add change listeners to stores
componentDidMount: function() {
CartStore.addChangeListener(this._onChange);
CartStore.addChangeListener(this._onChange);
if(!CartStore.dataStartedLoading()) {
CartActions.load();
};
@@ -54,7 +63,7 @@ var CartIcon = React.createClass({
_onChange: function () {
if (this.isMounted()) {
this.setState(CartStore.getWholeCartState());
this.setState(CartStore.getWholeCartState());
}
},
@@ -69,7 +78,4 @@ var CartIcon = React.createClass({
});
module.exports = CartIcon;
module.exports = CartIcon;

View File

@@ -42,14 +42,20 @@ var RootApp = React.createClass({
return (<div>loading...</div>);
}
return (
return (
<div className="container">
<div>
<div className="col-lg-12 hidden-sm hidden-xs " style={{height: 80, background: 'none', marginBottom: '0px !important'}} id="mybody">
<div style={{padding: '15px 15px'}} className="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div style={{padding: '15px 15px'}} className="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<Link to="app"><img height={50} src="https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/logo_h5f9yp.png" /></Link>
</div>
<div style={{padding: '15px 15px'}} className="col-lg-9 col-md-9 hidden-sm hidden-xs">
<div style={{padding: '30px 15px'}} className="col-lg-5 col-md-5 col-sm-4 col-xs-4">
<SearchBox />
</div>
<div style={{padding: '15px 15px'}} className="col-lg-5 col-md-5 hidden-sm hidden-xs">
<nav style={{background: 'none', border: 'none', marginBottom: '0px !important'}} className="navbar mytopnav">
<div className="container-fluid">
<CartIcon />

View File

@@ -0,0 +1,11 @@
var React = require('react');
var Breadcrumbs = React.createClass({
render: function() {
var bcText = "Ribica.ba -> " + this.props.text;
return (<div>{bcText}</div>);
}
});
module.exports = Breadcrumbs;

View File

@@ -33,13 +33,13 @@ var LoginStatus = React.createClass({
},
render : function() {
var content;
var content;
if(this.state.loggedIn){
content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '30px'}}>{this.state.user.first_name} {this.state.user.last_name} <a onClick={this.logout} style={{ paddingLeft: '30px' }}>Odjavite se</a></div>)
content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '10px'}}>{this.state.user.first_name} {this.state.user.last_name} <a onClick={this.logout} style={{ paddingLeft: '10px' }}>Odjavite se</a></div>)
} else {
content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '30px'}}><Link to="registracija" style={{ paddingRight: '30px' }}>Registracija</Link> <Link to="login">Prijava</Link></div>)
content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '10px'}}><Link to="registracija" style={{ paddingRight: '10px' }}>Registracija</Link> <Link to="login">Prijava</Link></div>)
}
return content;

View File

@@ -36,15 +36,25 @@ var SearchBox = React.createClass({
var enterKeyCode = 13;
if(e.which == enterKeyCode) {
this.doSearch();
e.preventDefault();
}
},
render: function() {
return (<div className="input-group">
<input type="text" onKeyPress={this.onKeyPress} className="form-control" value={this.state.q} onChange={this.onSearchBoxChange} placeholder="Pretraga"> </input>
<span className="input-group-btn">
<button className="btn btn-default" type="button" onClick={this.onSearchClick}>Traži</button>
</span>
</div>)
return (<form style={ {marginLeft: '60px', width: '100%'} } className="form-inline">
<div className="left-inner-addon">
<i className="glyphicon glyphicon-search"></i>
<input style={{width: '75%'}} type="search" onKeyPress={this.onKeyPress}
className="search-box form-control"
value={this.state.q} onChange={this.onSearchBoxChange}
aria-hidden="true">
</input>
<button className="btn btn-default search-button" type="button"
onClick={this.onSearchClick}>Traži</button>
</div>
</form>)
}
});