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

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;