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

front-ui/app/components/cart/cartIcon.js

@@ -26,7 +26,7 @@ var CartIcon = React.createClass({
 
   	  var textNotificationStyle = (this.state.count > 0)  ? { display: 'inline-block'} : { display: 'none'} ;
 
-      return (
+      var large = (
         <div>
          <ul className="nav navbar-nav navbar-right hidden-md hidden-sm hidden-xs">
             <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>
@@ -42,6 +42,21 @@ var CartIcon = React.createClass({
            </ul>
           </div>
         );
+       var small = (
+         <span>
+          <ul className="nav navbar-nav hidden-lg">
+             <li onClick={this._onClick} style={{paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
+          </ul>
+          </span>
+        );
+
+        if (this.props.small === 'true') {
+           return small; 
+        }
+        else {
+           return large;
+        }
+    
   },
 
     // Add change listeners to stores

front-ui/app/components/rootApp.js

@@ -55,15 +55,16 @@ var RootApp = React.createClass({
 
         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 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-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: '30px 15px'}} className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
-                <SearchBox />
+                <SearchBox small="false" />
             </div>
 
             <div style={{padding: '15px 15px'}} className="col-lg-4 col-md-4 hidden-sm hidden-xs">

front-ui/app/components/shared/menuItemListComponent.js

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

front-ui/app/components/shared/searchBox.js

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

front-ui/app/css/items.css

@@ -57,7 +57,7 @@
 	border-color: #cccccc;
 }
 
-
+@media only screen and (min-width: 500px) { 
 .item_name_and_price {
 	text-align: center;
 	vertical-align: center;
@@ -71,6 +71,23 @@
 	text-align: right;
 	width: 100%;
 }
+}
+
+.item_name_and_price {
+	text-align: center;
+	vertical-align: center;
+	font-size: 13px;
+}
+
+
+.item_floating_price {
+	position: absolute;
+	bottom: 12%;
+	right: 12%;
+	text-align: right;
+	width: 100%;
+	font-size: 13px;
+}
 
 
 /*