sidebar design implemented on search by category and by section page

front-ui/app/components/browsing/byCategory.js

@@ -61,9 +61,9 @@ var ByCategory = React.createClass({
       var self = this;
       return (
           <div>
-          <div className='col-md-2'> 
+            <div
-          <div className='h4'>{this.state.category.get('name')}</div>
+              style={{height: "100%"}}
-          <div>Podkategorije</div>
+              className="col-lg-2 col-md-2 col-sm-4 col-xs-4 sidebar ">
           <ul>
           {(this.state.category.get('sub_categories') || []).map(function(sc) {
                                                                                 return (<li> <a onClick={self.onSCClick.bind(self, sc)}>{sc.name}</a></li>)
@@ -74,7 +74,9 @@ var ByCategory = React.createClass({
 
       </div>
 
-        <div className='col-md-10'>
+      <div
+        style={{height: "100%"}}
+        className="col-lg-10 col-md-10 col-sm-8 col-xs-8 ">
 
           <LinkBanner locationName="category" locationId={Number(this.getParams().id)} />
 

front-ui/app/components/browsing/bySection.js

@@ -1,16 +1,16 @@
 var React = require('react'),
-    Router = require('react-router'),
+Router = require('react-router'),
-    ItemActions = require('../../actions/itemActions.js'),
+ItemActions = require('../../actions/itemActions.js'),
-    ItemStore = require('../../stores/itemStore'),
+ItemStore = require('../../stores/itemStore'),
-    NavigationStore = require('../../stores/navigationStore'),
+NavigationStore = require('../../stores/navigationStore'),
-    ItemList = require('../items/itemList'),
+ItemList = require('../items/itemList'),
-    ItemCollection = require('../../models/itemCollection'),
+ItemCollection = require('../../models/itemCollection'),
-    SectionStore = require('../../stores/sectionStore'),
+SectionStore = require('../../stores/sectionStore'),
-    SectionActions = require('../../actions/sectionActions.js'),
+SectionActions = require('../../actions/sectionActions.js'),
-    NavigationActions = require('../../actions/navigationActions'),
+NavigationActions = require('../../actions/navigationActions'),
-    Section = require('../../models/section'),
+Section = require('../../models/section'),
-    LinkBanner = require('../linkBanner/linkBanner'),
+LinkBanner = require('../linkBanner/linkBanner'),
-    Category = require('../../models/category');
+Category = require('../../models/category');
 
 var BySection = React.createClass({
   mixins: [Router.State],
@@ -23,18 +23,32 @@ var BySection = React.createClass({
   render : function() {
     var s ={ float: 'left'};
     var self = this;
-      return ( <div>
+    return (
+      <div>
 
-        <div className='col-md-2'> 
+
-        Here goes section for refining search, by section
+        <div
+          style={{height: "100%"}}
+          className="col-lg-2 col-md-2 col-sm-4 col-xs-4 sidebar ">
+          <ul>
+            {(this.state.section.get('categories')).map(function(category) {
+              return (<li><a href="#" onClick={self.onCategoryClick.bind(self, category, self.state.section)}>{category.name}</a></li>)
+            })}
+          </ul>
         </div>
-        <div className='col-md-10'>
+        <div
+          style={{height: "100%"}}
+          className="col-lg-10 col-md-10 col-sm-8 col-xs-8 ">
 
-        <LinkBanner locationName="section" locationId={Number(this.getParams().id)} />
+          <LinkBanner
+            locationName="section"
+            locationId={Number(this.getParams().id)} />
           <div className='h3'>
             Najprodavanije u sekciji {this.state.section.get('name')}
-</div>
+          </div>
           <ItemList items={this.state.items} />
+
+          {/*
           <div className='h3'>Kategorije</div>
           <div>
             {(this.state.section.get('categories') || []).map(function(category){
@@ -44,21 +58,28 @@ var BySection = React.createClass({
                   <a onClick={self.onCategoryClick.bind(self, category, self.state.section)}>
 
                     <img src={category.image_url || 'http://www.windeln.de/resources/img/content/kat_windelnwickeln.jpg'}/>
-<div>{category.name}</div>
+                    <div>
+                      {category.name}
+                    </div>
                   </a>
                   <ul>
                     {category.sub_categories.map(function(sc) {
-                                                                                                                 return (<li>{sc.name}</li>)
+                      return (
+                        <li>
+                          {sc.name}
+                        </li>
+                      )
                     })}
                   </ul>
 
                 </div>
               )
             })}
-        </div>
+          </div>*/}
 
         </div>
-        </div> )
+      </div>
+    )
   },
   onCategoryClick: function(category, section) {
     NavigationActions.goToCategory(new Category(category), section);

front-ui/app/models/section.js

@@ -4,7 +4,8 @@ var Globals = require('../globals');
 var Section = Backbone.Model.extend({
     urlRoot : Globals.ApiUrl + '/section',
     defaults : {
-        name: ''
+        name: '',
+        categories: []
     }
 });
 

front-ui/app/stores/sectionStore.js

@@ -30,6 +30,7 @@ var loadSectionDetails = function(sectionId) {
   section.fetch({
     success: function() {
       _sectionDetails = section;
+      console.log('section details', _sectionDetails);
       SectionStore.emitChange();
     }
   });