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 className='h4'>{this.state.category.get('name')}</div>
-          <div>Podkategorije</div>
+            <div
+              style={{height: "100%"}}
+              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>)
@@ -71,10 +71,12 @@ var ByCategory = React.createClass({
           </ul>
 
           <FilterCriteriaSelector filterCriterias={this.state.category.get('filter_criterias')} onFCClick={this.onFCClick} />
-          
+
       </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)} />
 
@@ -82,7 +84,7 @@ var ByCategory = React.createClass({
         Number of items in this category: {this.state.items.length}
       <div>
           <AppliedFiltersList filters={this.appliedCategoryFiltersArray()} onRemove={self.removeAppliedFilter} />
-       
+
       </div>
 
 

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

@@ -1,100 +1,121 @@
 var React = require('react'),
-    Router = require('react-router'),
-    ItemActions = require('../../actions/itemActions.js'),
-    ItemStore = require('../../stores/itemStore'),
-    NavigationStore = require('../../stores/navigationStore'),
-    ItemList = require('../items/itemList'),
-    ItemCollection = require('../../models/itemCollection'),
-    SectionStore = require('../../stores/sectionStore'),
-    SectionActions = require('../../actions/sectionActions.js'),
-    NavigationActions = require('../../actions/navigationActions'),
-    Section = require('../../models/section'),
-    LinkBanner = require('../linkBanner/linkBanner'),
-    Category = require('../../models/category');
+Router = require('react-router'),
+ItemActions = require('../../actions/itemActions.js'),
+ItemStore = require('../../stores/itemStore'),
+NavigationStore = require('../../stores/navigationStore'),
+ItemList = require('../items/itemList'),
+ItemCollection = require('../../models/itemCollection'),
+SectionStore = require('../../stores/sectionStore'),
+SectionActions = require('../../actions/sectionActions.js'),
+NavigationActions = require('../../actions/navigationActions'),
+Section = require('../../models/section'),
+LinkBanner = require('../linkBanner/linkBanner'),
+Category = require('../../models/category');
 
 var BySection = React.createClass({
   mixins: [Router.State],
-    getInitialState : function() {
-      return {
-        items: (new ItemCollection()),
-        section : (new Section())
-      };
-    },
-    render : function() {
-      var s ={ float: 'left'};
-      var self = this;
-      return ( <div>
+  getInitialState : function() {
+    return {
+      items: (new ItemCollection()),
+      section : (new Section())
+    };
+  },
+  render : function() {
+    var s ={ float: 'left'};
+    var self = this;
+    return (
+      <div>
 
-        <div className='col-md-2'> 
-        Here goes section for refining search, by section
-        </div>
-        <div className='col-md-10'>
 
-        <LinkBanner locationName="section" locationId={Number(this.getParams().id)} />
-        <div className='h3'>
-                 Najprodavanije u sekciji {this.state.section.get('name')} 
-</div>
-        <ItemList items={this.state.items} />
-        <div className='h3'>Kategorije</div>
-        <div>
-        {(this.state.section.get('categories') || []).map(function(category){
-                                                                      return (
-                                                                        <div style={s}>
-                                                                        
-                                                                     <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>
-                                                                     </a>
-                                                                     <ul>
-                                                                     {category.sub_categories.map(function(sc) {
-                                                                                                                 return (<li>{sc.name}</li>)
-                                                                                                               })}
-                                                                     </ul>
-                                                                        
-                                                                        </div>
-                                                                        )
-                                                                    })}
+        <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
+          style={{height: "100%"}}
+          className="col-lg-10 col-md-10 col-sm-8 col-xs-8 ">
+
+          <LinkBanner
+            locationName="section"
+            locationId={Number(this.getParams().id)} />
+          <div className='h3'>
+            Najprodavanije u sekciji {this.state.section.get('name')}
+          </div>
+          <ItemList items={this.state.items} />
+
+          {/*
+          <div className='h3'>Kategorije</div>
+          <div>
+            {(this.state.section.get('categories') || []).map(function(category){
+              return (
+                <div style={s}>
+
+                  <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>
+                  </a>
+                  <ul>
+                    {category.sub_categories.map(function(sc) {
+                      return (
+                        <li>
+                          {sc.name}
+                        </li>
+                      )
+                    })}
+                  </ul>
+
+                </div>
+              )
+            })}
+          </div>*/}
 
         </div>
-        </div> )
-    },
-    onCategoryClick: function(category, section) {
-      NavigationActions.goToCategory(new Category(category), section);
-       
-    },
-    componentWillReceiveProps: function(nextProps) {
-      var sectionId = this.getParams().id;
-      ItemActions.loadBestSellingItemsForSection(sectionId);
-      SectionActions.loadSectionDetails(sectionId);
-    },
-    componentDidMount: function() {
-      console.log('mounting....');
-      var sectionId = this.getParams().id;
-      ItemActions.loadBestSellingItemsForSection(sectionId);
-      SectionActions.loadSectionDetails(sectionId);
+      </div>
+    )
+  },
+  onCategoryClick: function(category, section) {
+    NavigationActions.goToCategory(new Category(category), section);
 
-      SectionStore.addChangeListener(this._onSectionChange);
-      ItemStore.addChangeListener(this._onChange);
-    },
-    componentWillUnmount: function() {
-      SectionStore.removeChangeListener(this._onSectionChange);
-      ItemStore.removeChangeListener(this._onChange);
-    },
-    _onSectionChange: function() {
-      if(this.isMounted()) {
-        this.setState({
-          section: SectionStore.getSectionDetails()
-        });
-      }
-    },
-    _onChange: function() {
-      if(this.isMounted()) {
-        console.log('items store changed! by section');
-        this.setState({items: ItemStore.getBestSellingForSection()});
-      }
+  },
+  componentWillReceiveProps: function(nextProps) {
+    var sectionId = this.getParams().id;
+    ItemActions.loadBestSellingItemsForSection(sectionId);
+    SectionActions.loadSectionDetails(sectionId);
+  },
+  componentDidMount: function() {
+    console.log('mounting....');
+    var sectionId = this.getParams().id;
+    ItemActions.loadBestSellingItemsForSection(sectionId);
+    SectionActions.loadSectionDetails(sectionId);
+
+    SectionStore.addChangeListener(this._onSectionChange);
+    ItemStore.addChangeListener(this._onChange);
+  },
+  componentWillUnmount: function() {
+    SectionStore.removeChangeListener(this._onSectionChange);
+    ItemStore.removeChangeListener(this._onChange);
+  },
+  _onSectionChange: function() {
+    if(this.isMounted()) {
+      this.setState({
+        section: SectionStore.getSectionDetails()
+      });
     }
+  },
+  _onChange: function() {
+    if(this.isMounted()) {
+      console.log('items store changed! by section');
+      this.setState({items: ItemStore.getBestSellingForSection()});
+    }
+  }
 });
 
 module.exports = BySection;

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

@@ -12,16 +12,16 @@ var sectionState = {
 };
 
 
-var loadSections = function() { 
+var loadSections = function() {
   var sections = new SectionCollection();
   sections.fetch({success: function() {
     sectionState.sections = sections.models;
     // change will be called automatically when
     // action is run but we need to emit it again
-    // when the data arive 
+    // when the data arive
     // it's a bit "unfluxy" but convenient.
     // "true philosophy" would be to run another "data arrived" action
-    SectionStore.emitChange(); 
+    SectionStore.emitChange();
   }});
 };
 
@@ -30,6 +30,7 @@ var loadSectionDetails = function(sectionId) {
   section.fetch({
     success: function() {
       _sectionDetails = section;
+      console.log('section details', _sectionDetails);
       SectionStore.emitChange();
     }
   });
@@ -43,7 +44,7 @@ var setHovered  = function(id) {
 // Extend SectionStore with EventEmitter to add eventing capabilities
 var SectionStore = _.extend({}, EventEmitter.prototype, {
 
-  // Return Single Item With Details 
+  // Return Single Item With Details
   getState: function() {
     return sectionState;
   },
@@ -77,7 +78,7 @@ AppDispatcher.register(function(payload) {
 
     // Respond to SELECT_ITEM action
     case SectionConstants.LOAD_SECTIONS:
-      loadSections();      
+      loadSections();
       break;
 
     case SectionConstants.SET_SECTION_HOVER: