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

homepage mobile experience became bearable by using questionable css and js practices

Browse Source
This commit is contained in:
Senad Uka
2015-06-20 07:05:16 +02:00
parent 7d74a3cc27
commit f05b307fc0
6 changed files with 128 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
front-ui/app/components/shared/menuItemListComponent.js
View File

@@ -6,7 +6,9 @@ var React = require('react'),
MenuItemStore = require('../../stores/menuItemStore'),
CartStore = require('../../stores/cartStore.js');
MenuItemActions = require('../../actions/menuItemActions'),
NavigationActions = require('../../actions/navigationActions');
NavigationActions = require('../../actions/navigationActions'),
SearchBox = require('./searchBox'),
CartIcon = require('../cart/cartIcon');
Backbone.$ = $;
@@ -58,19 +60,21 @@ var MenuItemListComponent = React.createClass({
};
return (
<div className="navbar navbar-default navbar-static-top">
<div className="container">
<div>
<span style={{ float: "left" }}className="hidden-lg hidden-md">
<CartIcon small="true" />
</span>
<span style={{ position:'absolute', width: "60%" , marginLeft: "5%", marginRight: "22%", marginTop: "7px" }} className="hidden-lg hidden-md">
<SearchBox small="true" />
</span>
<ul className='nav nav-pills'>
<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span className="icon-bar" />
<span className="icon-bar" />
<span className="icon-bar" />
</button>
<a className="navbar-brand hidden-lg hidden-md" href="#"><img style={{marginTop: '-4px'}} height={24} src="https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/logo_h5f9yp.png" /></a>
<ul className="mynav hidden-lg hidden-md " style={{listStyle: 'none'}}>
<li><a href="#">0,00 KM</a></li>
<li onClick={this._onCartClick}><a style={{marginLeft: 10}} className="mybutton" href="#" onClick={this._onCartClick}>Završi narudžbu</a></li>
</ul>
</div>
<div className="navbar-collapse collapse">
<ul className="nav navbar-nav hidden-sm hidden-xs ">

26
front-ui/app/components/shared/searchBox.js
View File

@@ -40,7 +40,7 @@ var SearchBox = React.createClass({
}
},
render: function() {
return (<form style={ {marginLeft: '60px', width: '100%'} } className="form-inline">
var large = (<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}
@@ -54,8 +54,28 @@ var SearchBox = React.createClass({
onClick={this.onSearchClick}>Traži</button>
</div>
</form>)
</form>);
var small = (<form className="form-inline">
<span className="left-inner-addon">
<i style={{positon: "absolute", zIndex: "600" }} className="glyphicon glyphicon-search"></i>
<input style={{ width: "100%"}} type="search" onKeyPress={this.onKeyPress}
className="search-box form-control"
value={this.state.q} onChange={this.onSearchBoxChange}
aria-hidden="true">
</input>
</span>
</form>);
if (this.props.small === 'true') {
return small;
}
else {
return large;
}
}
});
}
);
module.exports = SearchBox;