Backbone + REST API implementation

bodyrep/templates/core/member/comment.html

@@ -0,0 +1,12 @@
+{% for c in p.comment_set.all %}
+              <div class="user-sub-comment">
+                  <div class="sub-avatar user2"></div>
+                  <a>{{p.member.firstname}} {{p.member.lastname}}</a>
+                  <p id='ctx'>{{c.text}}</p>
+                  <div class="like-comment-time">
+                    <i class="icon-thumbs-up"></i>
+                    <i class="icon-comment"></i>
+                    <span>{{c.created}}</span>
+                  </div>
+                </div>
+            {% endfor %}

bodyrep/templates/core/member/commentModel.html

@@ -0,0 +1,12 @@
+<script type="text/template" id="commentModel">      
+              <div class="user-sub-comment">
+                  <div class="sub-avatar user2"></div>
+                  <a><%= firstname %><%= lastname %></a>
+                  <p id='ctx'><%= text %></p>
+                  <div class="like-comment-time">
+                    <i class="icon-thumbs-up"></i>
+                    <i class="icon-comment"></i>
+                    <span><%= created %></span>
+                  </div>
+                </div>
+</script>

bodyrep/templates/core/member/post.html

@@ -24,19 +24,8 @@
               <i class="icon-comment"></i>
               <span>{{ p.created }}</span>
             </div>
+            {% include 'core/member/comment.html' %}
             
-            {% for c in p.comment_set.all %}
-              <div class="user-sub-comment">
-                  <div class="sub-avatar user2"></div>
-                  <a>{{p.member.firstname}} {{p.member.lastname}}</a>
-                  <p id='ctx'>{{c.text}}</p>
-                  <div class="like-comment-time">
-                    <i class="icon-thumbs-up"></i>
-                    <i class="icon-comment"></i>
-                    <span>{{c.created}}</span>
-                  </div>
-                </div>
-            {% endfor %}
             <div class="user-sub-comment">
                 <div class="sub-avatar user2"></div>
                 <p id='ctx'><input type='text' class='comment' placeholder='Type something' /></p>

bodyrep/templates/core/member/postModel.html

@@ -0,0 +1,38 @@
+<script type="text/template" id="postModel">      
+<div class="stats">
+            <div class="comment_block">
+              <div class="block_types">
+                <div class="block_type greenbd">
+                  <i class="gicon-search"></i>
+                </div>
+                <div class="block_type orangebd">
+                  <i class="gicon-screen"></i>
+                </div>
+              </div>
+            </div>
+            <div class="tnc-blurb">
+              <i class="icon-time"></i>
+              45
+              <i class="icon-signal"></i>
+              900
+            </div>
+            <div class="basic-comment">
+              <%= text %>
+            </div>
+            <div class="like-comment-time">
+              <i class="icon-thumbs-up"></i>
+              <i class="icon-comment"></i>
+              <span><%= created %></span>
+            </div>
+            
+            <div class="user-sub-comment">
+                <div class="sub-avatar user2"></div>
+                <p id='ctx'><input type='text' class='comment' placeholder='Type something' /></p>
+                <div class="like-comment-time hidden">
+                  <i class="icon-thumbs-up"></i>
+                  <i class="icon-comment"></i>
+                  <span>{{c.created}}</span>
+                </div>              
+              </div>
+          </div>
+</script>

bodyrep/templates/core/member/profile.html

@@ -4,12 +4,14 @@
 
 {% block content %}
 {% include 'navbar.html' %}
-
+{% include 'core/member/profileModel.html' %}
+{% include 'core/member/postModel.html' %}
+<!-- 
   <div class="row-fluid">
         <div class="span2">
           <div class="well sidebar-nav">
             <ul class="nav nav-list">
-              <li class="nav-header">Profile</li>
+              <li class="nav-header">Profile (member)</li>
               <li class="active"><a href="#">Body Stats</a></li>
               <li><a href="#">Body Reputation</a></li>
               <li><a href="#">Challenges</a></li>
@@ -20,11 +22,12 @@
               <li class="nav-header">Apps</li>
               <li class="nav-header">Shopping</li>
             </ul>
-          </div><!--/.well -->
+          </div>
-        </div><!--/span-->
+        </div>
         <div class="span6" id='mcnt'>
           <div class="row-fluid">
             <h2 class="pull-left">{{ member.firstname }} {{ member.lastname }}</h2>
+
           </div>
           <div class="row-fluid" style='font-size : 12px;'>
             <i class="icon-signal"></i><span> Weight: 100kg ( <div class='arrowup'></div> 0)</span>
@@ -65,47 +68,10 @@
             </div>
           </div>
           {% include 'core/member/post.html' %}
+
         </div>
-        <div class="span4">
+        {% include 'core/member/rightMenu.html' %}
-          <div class="hero-unit">
-            <h1>Hello, world!</h1>
-            <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
-            <p><a id='test' class="btn btn-primary btn-large">Learn more &raquo;</a></p>
       </div>
-          <div class="row-fluid">
+    </div>-->
-            <div class="span4">
+
-              <h2>Heading</h2>
-              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-              <p><a class="btn" href="#">View details &raquo;</a></p>
-            </div><!--/span-->
-            <div class="span4">
-              <h2>Heading</h2>
-              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-              <p><a class="btn" href="#">View details &raquo;</a></p>
-            </div><!--/span-->
-            <div class="span4">
-              <h2>Heading</h2>
-              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-              <p><a class="btn" href="#">View details &raquo;</a></p>
-            </div><!--/span-->
-          </div><!--/row-->
-          <div class="row-fluid">
-            <div class="span4">
-              <h2>Heading</h2>
-              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-              <p><a class="btn" href="#">View details &raquo;</a></p>
-            </div><!--/span-->
-            <div class="span4">
-              <h2>Heading</h2>
-              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-              <p><a class="btn" href="#">View details &raquo;</a></p>
-            </div><!--/span-->
-            <div class="span4">
-              <h2>Heading</h2>
-              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-              <p><a class="btn" href="#">View details &raquo;</a></p>
-            </div><!--/span-->
-          </div><!--/row-->
-        </div><!--/span-->
-      </div><!--/row-->
 {% endblock %}

bodyrep/templates/core/member/profileModel.html

@@ -0,0 +1,227 @@
+<script type="text/template" id="profileModel">      
+    <div class="row-fluid">
+        <h2 class="pull-left"><%= firstname %> <%= lastname %></h2>
+      </div>
+      <div class="row-fluid" style='font-size : 12px;'>
+        <i class="icon-signal"></i><span> Weight: 100kg ( <div class='arrowup'></div> 0)</span>
+        <span>Bodyfat: 20% ( <div class='arrowup'></div> 2)</span>
+        <span>Measurements: 400cm ( <div class='arrowup'></div> 15)</span>
+      </div>
+      <div class="row-fluid" style='font-size : 12px;'>
+        <i class="icon-home"></i><span> Lives in </span><a>Calgary, Alberta</a>
+        <i class="icon-signal"></i><span> Trains at </span><a>Talisman Center,Fitness First</a>
+        <i class="icon-signal"></i><span> Hobbies: </span><a>Skiing,</a><span> and </span><a>(5) other</a><span> ...</span>
+        <i class="icon-signal"></i><span> Professionals: </span><a>Heath Spence</a><span>,</span><a>Steve Baudo</a><a>    see more...</a>
+      </div>
+    <hr />
+      <div class="row-fluid">
+        <h5 class="pull-left">Filters:</h5>
+        <div class="pull-left">
+          <div class="block_type_small redbg redbd pull-left">
+            <i class="icon-user icon-white"></i>
+          </div>
+          <div class="block_type_small bluebg bluebd pull-left">
+            <i class="icon-wrench icon-white"></i>
+          </div>
+          <div class="block_type_small orangebg orangebd pull-left">
+            <i class="icon-magnet icon-white"></i>
+          </div>
+          <div class="block_type_small tealbg tealbd pull-left">
+            <i class="icon-heart icon-white"></i>
+          </div>
+          <div class="block_type_small purplebg purplebd pull-left">
+            <i class="icon-th icon-white"></i>
+          </div>
+          <div class="block_type_small greenbg greenbd pull-left">
+            <i class="icon-book icon-white"></i>
+          </div>
+          <div class="block_type_small graybg graybd pull-left">
+            <i class="icon-file icon-white"></i>
+          </div>
+        </div>
+      </div>        
+</script>
+<script type="text/javascript">
+  $LAB.script("/s/js/backbone.js")            
+      .script("/s/js/backbone-relational.js").wait(function() {
+                window.Post = Backbone.RelationalModel.extend({
+                  idAttribute: 'id',
+                  urlRoot: function () {
+                    // Seems like there would be a better way to get this information. this.get and this.id don't work
+                    var un = this.collection.models[0].attributes.username.attributes.username;
+                    return '/api/member/'+un+'/posts/';
+                  },
+                  defaults: {
+                    "text": '',
+                    'username': '',
+                    "created": ''
+                  }
+                 
+                  /*url: function() {
+                        var origUrl = Backbone.Model.prototype.url.call(this);      
+                        un = this.attributes['username'].attributes['username'];
+                        return ('/api/member/'+un+'/posts/');
+
+                        //return origUrl + (origUrl.charAt(origUrl.length - 1) == '/' ? '' : '/');
+                    }*/  
+                });  
+
+                
+
+                window.Member = Backbone.RelationalModel.extend({
+
+                  relations: [
+                        {
+                            type: Backbone.HasMany,
+                            key: 'post',
+                            relatedModel: 'window.Post',
+                            reverseRelation: {
+                                key: 'username'
+                            }
+                        }
+                    ]  ,  
+                  idAttribute: 'username',
+                  defaults: {
+                    "username": '',
+                    "firstname": '',
+                    "lastname": ''
+                  },  
+                  urlRoot: "/api/member",  
+                  url: function() {
+                        var origUrl = Backbone.Model.prototype.url.call(this);
+                        return origUrl + (origUrl.charAt(origUrl.length - 1) == '/' ? '' : '/');
+                    }    
+
+                });    
+
+                window.MemberView = Backbone.View.extend({
+                  tagName: "div", 
+                  template:_.template($('#profileModel').html()),
+
+                  initialize: function() {      
+                    this.model.bind("change", this.render, this);
+                    post = new Post({username: this.model.get('username')})
+
+                    post.fetch()
+                    this.postview = new PostView({el: "#postModel", model: post});
+                    this.post = post;
+
+                  },
+
+                  render: function(eventName) {
+
+                    $(this.el).html(this.template(this.model.toJSON()));
+                    return this;
+                  },
+
+                  events: {
+                      "change input": "change",
+                  //"click .save": "saveMember",
+                  //"click .delete": "deleteMember"
+                  },
+
+                  change: function(event) {
+                      var target = event.target;
+                       var change = {};
+                       change[target.id] = target.value;
+                      this.model.set(change);
+                      this.model.save();
+                  },
+
+
+                });
+
+                /*window.MemberCollection = Backbone.Collection.extend({
+                  model: Member,
+                  url: "/api/member/"
+                });*/
+
+                var PostView = Backbone.View.extend({
+                  template:_.template($('#postModel').html()),
+                  tagName: "div", // Not required since 'div' is the default if no el or tagName specified
+
+                  initialize: function() {
+                      // I want to re-render on changes
+                      //this.model.bind("change", this.render, this);
+
+                      // Render
+                  },
+                  render: function() {
+                      // Just render my template /this.template()
+
+                    $(this.el).html(this.template(this.model.toJSON()));
+                    return this;
+                  },
+                });
+
+                /*window.PostCollection = Backbone.Collection.extend({
+                  model: Post,
+                  url: function( models ) {
+                        // Logic to create a url for the whole collection, or a set of models.
+                        // See the tests, or Backbone-tastypie, for an example.
+                        return '/api/member/' + _.pluck( models, 'username' ) + 'comments';
+                    }
+                });*/
+
+                Backbone.View.prototype.close = function () {
+                  if (this.beforeClose) {
+                      this.beforeClose();
+                  }
+                  this.remove();
+                  this.unbind();
+                };
+
+                // Router
+
+                var AppRouter = Backbone.Router.extend({
+
+                  initialize: function() {
+                      //$('#header').html( new HeaderView().render().el );                      
+                      _.bindAll(this);
+
+                  },
+
+
+                  routes:{
+                      "::username":"viewMember"
+                  },
+
+                  viewMember: function(username) {
+
+                    var member = new Member({username: username});
+
+                    member.fetch();
+                    app.showView( '#mcnt', new MemberView({model: member}) );      
+                    //app.showView( '#test', new PostView({model: member.post}) );      
+
+                  },
+
+                  showView: function(selector, view) {
+                      if (this.currentView)
+                          this.currentView.close();
+
+                      $(selector).html(view.render().el);
+                      this.currentView = view;
+                      return view;
+                  },
+
+                  before: function(callback) {
+                      // if (this.MemberList) {
+                      //     if (callback) callback();
+                      // } else {
+                      var member = new Member({username: username});
+                      member.fetch();
+
+                      //     this.MemberList = new MemberCollection();
+                      // this.MemberList.fetch({success: function() {
+                      //        $('.symfony-content').html( new MemberListView({model: app.MemberList}).render().el );
+                      //        if (callback) callback();
+                      //     }});
+                      //}
+                  }
+                });
+
+                var app = new AppRouter();
+                Backbone.history.start();
+              });
+</script>

bodyrep/templates/core/member/rightMenu.html

@@ -0,0 +1,41 @@
+<div class="span4">
+          <div class="hero-unit">
+            <h1>Member right</h1>
+            <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
+            <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
+          </div>
+          <div class="row-fluid">
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div>
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div>
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div>
+          </div>
+          <div class="row-fluid">
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div>
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div>
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div>
+          </div>
+        </div>

bodyrep/templates/core/user/profile.html

@@ -0,0 +1,274 @@
+{% extends 'base.html' %}
+
+{% block title %}BodyRep{% endblock %}
+
+{% block content %}
+{% include 'navbar.html' %}
+
+  <div class="row-fluid">
+        <div class="span2">
+          <div class="well sidebar-nav">
+            <ul class="nav nav-list">
+              <li class="nav-header">Profile (user)</li>
+              <li class="active"><a href="#">Body Stats</a></li>
+              <li><a href="#">Body Reputation</a></li>
+              <li><a href="#">Challenges</a></li>
+              <li class="nav-header">Workouts</li>
+              <li class="nav-header">Meals</li>
+              <li class="nav-header">Community</li>
+              <li class="nav-header">Learning</li>
+              <li class="nav-header">Apps</li>
+              <li class="nav-header">Shopping</li>
+            </ul>
+          </div><!--/.well -->
+        </div><!--/span-->
+        <div class="span6" id='ucnt'>
+        <div class="row-fluid">
+            <h2 class="pull-left">{{ member.firstname }} {{ member.lastname }}</h2>
+            <a class="pull-right btn btn-primary btn-mini" id='edprf' href="#"><i class="icon-cog icon-white"></i> Edit Profile</a>
+
+          </div>
+          <div class="row-fluid" style='font-size : 12px;'>
+            <i class="icon-signal"></i><span> Weight: 100kg ( <div class='arrowup'></div> 0)</span>
+            <span>Bodyfat: 20% ( <div class='arrowup'></div> 2)</span>
+            <span>Measurements: 400cm ( <div class='arrowup'></div> 15)</span>
+          </div>
+          <div class="row-fluid" style='font-size : 12px;'>
+            <i class="icon-home"></i><span> Lives in </span><a>Calgary, Alberta</a>
+            <i class="icon-signal"></i><span> Trains at </span><a>Talisman Center,Fitness First</a>
+            <i class="icon-signal"></i><span> Hobbies: </span><a>Skiing,</a><span> and </span><a>(5) other</a><span> ...</span>
+            <i class="icon-signal"></i><span> Professionals: </span><a>Heath Spence</a><span>,</span><a>Steve Baudo</a><a>    see more...</a>
+          </div>
+          <hr />
+          <div class="row-fluid">
+            <h5 class="pull-left">Filters:</h5>
+            <div class="pull-left">
+              <div class="block_type_small redbg redbd pull-left">
+                <i class="icon-user icon-white"></i>
+              </div>
+              <div class="block_type_small bluebg bluebd pull-left">
+                <i class="icon-wrench icon-white"></i>
+              </div>
+              <div class="block_type_small orangebg orangebd pull-left">
+                <i class="icon-magnet icon-white"></i>
+              </div>
+              <div class="block_type_small tealbg tealbd pull-left">
+                <i class="icon-heart icon-white"></i>
+              </div>
+              <div class="block_type_small purplebg purplebd pull-left">
+                <i class="icon-th icon-white"></i>
+              </div>
+              <div class="block_type_small greenbg greenbd pull-left">
+                <i class="icon-book icon-white"></i>
+              </div>
+              <div class="block_type_small graybg graybd pull-left">
+                <i class="icon-file icon-white"></i>
+              </div>
+            </div>
+          </div>
+          <div class="stats" id='stats1'>
+            <div class="comment_block">
+              <div class="block_types">
+                <div class="block_type redbd">
+                  <i class="gicon-magnet"></i>
+                </div>
+              </div>
+            </div>
+            <div class="tnc-blurb">
+              <i class="icon-signal"></i>
+              565
+            </div>
+            <div class="basic-comment">
+              <b>Breakfast:</b><span> 30g Oats, 1x Banana, 5x Egg Whites</span>
+            </div>
+            <div class="like-comment-time">
+              <i class="icon-thumbs-up"></i>
+              <i class="icon-comment"></i>
+              <span>14 minutes ago</span>
+            </div>
+            <div class="user-sub-comment">
+              <div class='sub-avatar user1'></div>
+              <a>Brian Goff</a>
+              <p>Good to see you're keeping up the good work mate. Keep us posted ;)</p>
+              <div class="like-comment-time">
+                <i class="icon-thumbs-up"></i>
+                <i class="icon-comment"></i>
+                <span>April 3 at 2:05pm</span>
+              </div>
+            </div>
+            <div class="user-sub-comment">
+              <div class='sub-avatar user2'></div>
+              <a>Alex Zborowski</a>
+              <p>Well it's not easy but you do your best every day and you judge every action.</p>
+              <div class="like-comment-time">
+                <i class="icon-thumbs-up"></i>
+                <i class="icon-comment"></i>
+                <span>April 3 at 2:05pm</span>
+              </div>
+            </div>
+          </div>
+          <div class="stats">
+            <div class="comment_block">
+              <div class="block_types">
+                <div class="block_type greenbd">
+                  <i class="gicon-search"></i>
+                </div>
+                <div class="block_type orangebd">
+                  <i class="gicon-screen"></i>
+                </div>
+              </div>
+            </div>
+            <div class="tnc-blurb">
+              <i class="icon-time"></i>
+              45
+              <i class="icon-signal"></i>
+              900
+            </div>
+            <div class="basic-comment">
+              Workout at <a>Talisman Center</a> with <a>Brian Goff</a>
+            </div>
+            <div class="like-comment-time">
+              <i class="icon-thumbs-up"></i>
+              <i class="icon-comment"></i>
+              <span>37 minutes ago</span>
+            </div>
+          </div>
+          <div class="stats">
+            <div class="comment_block">
+              <div class="block_types">
+                <div class="block_type greenbd">
+                  <i class="gicon-search"></i>
+                </div>
+              </div>
+            </div>
+            <div class="tnc-blurb">
+              <i class="icon-time"></i>
+              90
+              <i class="icon-signal"></i>
+              720
+            </div>
+            <div class="basic-comment">
+              Workout at <a>Talisman Center</a>
+            </div>
+            <div class="like-comment-time">
+              <i class="icon-thumbs-up"></i>
+              <i class="icon-comment"></i>
+              <span>April 4 at 7:00pm</span>
+            </div>
+          </div>
+          <div class="stats">
+            <div class="comment_block">
+              <div class="block_types">
+                <div class="block_type bluebd">
+                  <i class="gicon-profile"></i>
+                </div>
+              </div>
+            </div>
+            <div class="tnc-blurb">
+            </div>
+            <div class="basic-comment">
+              You commented on <a>Brian Goff's workout</a>
+            </div>
+            <div class="like-comment-time">
+              <i class="icon-thumbs-up"></i>
+              <i class="icon-comment"></i>
+              <span>April 4 at 6:30pm</span>
+            </div>
+          </div>
+          <div class="stats">
+            <div class="comment_block">
+              <div class="block_types">
+                <div class="block_type purplebd">
+                  <i class="gicon-profile"></i>
+                </div>
+              </div>
+            </div>
+            <div class="tnc-blurb">
+            </div>
+            <div class="basic-comment">
+              Your read <a>"Fatigue Recovery & Supercompensation Theory"</a>
+            </div>
+            <div class="like-comment-time">
+              <i class="icon-thumbs-up"></i>
+              <i class="icon-comment"></i>
+              <span>April 2 at 8:00am</span>
+            </div>
+          </div>
+          <div class="stats">
+            <div class="comment_block">
+              <div class="block_types">
+                <div class="block_type greenbd">
+                  <i class="gicon-search"></i>
+                </div>
+                <div class="block_type orangebd">
+                  <i class="gicon-screen"></i>
+                </div>
+                <div class="block_type tealbd">
+                  <i class="gicon-line"></i>
+                </div>
+              </div>
+            </div>
+            <div class="tnc-blurb">
+              <i class="icon-time"></i>
+              30
+              <i class="icon-signal"></i>
+              450
+            </div>
+            <div class="basic-comment">
+              <a>Workout</a> using <a>Runtracker</a> with <a>Brian Goff</a>
+            </div>
+            <div class="like-comment-time">
+              <i class="icon-thumbs-up"></i>
+              <i class="icon-comment"></i>
+              <span>April 2 at 6:00am</span>
+            </div>
+          </div>
+
+          <div class="stats">
+            <div class="comment_block">
+              <div class="block_types">
+                <div class="block_type orangebd">
+                  <i class="gicon-screen"></i>
+                </div>
+              </div>
+            </div>
+            
+            <div class="user-comment">
+              <div class='avatar user1'></div>
+              <a>Brian Goff</a>
+              <p>Hey "mate"! Want to train at the <a>Talisman</a> again tonight?</p>
+            </div>
+            <div class="like-comment-time">
+              <i class="icon-thumbs-up"></i>
+              <i class="icon-comment"></i>
+              <span>April 3 at 2:00pm</span>
+            </div>
+
+            <div class="user-sub-comment">
+              <div class='sub-avatar user2'></div>
+              <a>Alex Zborowski</a>
+              <p>Sorry Brian, working on the BodyREP pitch tonight.</p>
+              <div class="like-comment-time">
+                <i class="icon-thumbs-up"></i>
+                <i class="icon-comment"></i>
+                <span>April 3 at 2:05pm</span>
+              </div>
+            </div>
+            <div class="user-sub-comment">
+              <div class='sub-avatar user1'></div>
+              <a>Brian Goff</a>
+              <p>No worries "mate", maybe next time.</p>
+              <div class="like-comment-time">
+                <i class="icon-thumbs-up"></i>
+                <i class="icon-comment"></i>
+                <span>April 3 at 2:07pm</span>
+              </div>
+            </div>
+
+          </div>
+
+        </div>      
+        {% include 'core/user/rightMenu.html' %}
+      </div> 
+
+      {% endblock %}

bodyrep/templates/core/user/rightMenu.html

@@ -0,0 +1,41 @@
+<div class="span4">
+          <div class="hero-unit">
+            <h1>User right</h1>
+            <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
+            <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
+          </div>
+          <div class="row-fluid">
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div>
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div>
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div>
+          </div>
+          <div class="row-fluid">
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div>
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div>
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div>
+          </div>
+        </div>