display hootbox

3 files changed, 96 insertions, 1 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 1f36a35..0db5a00 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -23,6 +23,7 @@ button {
 	padding: 2px;
 	margin: 3px;
 	background-color: #c8d0dc;
+	text-transform: uppercase;
 }
 .desktop button:hover {
   color: #040a0a;
@@ -41,7 +42,7 @@ button {
 	text-align: center;
 	border: 2px solid #201010;
 	padding: 3px;
-	margin: 0;
+	margin: 0 0 5px 0;
 }
 hr {
   border-color: #000;
@@ -50,3 +51,48 @@ hr {
 #sidebar {
   width: 300px;
 }
+
+#hootbox.bluebox {
+  padding: 0;
+}
+#hootbox form {
+  padding: 4px;
+}
+#hootbox input[type=text] {
+  border: 2px solid #000;
+  font-size: 13px;
+  position: relative;
+  top: 2px;
+  margin-bottom: 5px;
+  width: 230px;
+}
+#hootbox button {
+  width: 36px;
+}
+#hoots {
+  margin: 0;
+  padding: 0;
+  border-spacing: 0;
+}
+#hoots tr {
+  margin: 0;
+  padding: 0;
+}
+#hoots td {
+  margin: 0;
+  padding: 0;
+  border-top: 2px solid #000;
+}
+#hoots td:nth-child(1){
+  border-right: 2px solid #000;
+  width: 40px;
+  height: 40px;
+  background-size: cover;
+  background-position: center center;
+}
+#hoots td:nth-child(2){
+  text-align: left;
+  padding: 5px;
+}
+#hoots tr:nth-child(odd) td:nth-child(2) { background-color: #f3f1f2; }
+#hoots tr:nth-child(even) td:nth-child(2) { background-color: #e3e8e3; }
diff --git a/public/assets/js/lib/views/index/hootbox.js b/public/assets/js/lib/views/index/hootbox.js
new file mode 100644
index 0000000..43c4fe9
--- /dev/null
+++ b/public/assets/js/lib/views/index/hootbox.js
@@ -0,0 +1,37 @@
+var HootboxView = FormView.extend({
+  
+  el: "#hootbox",
+  
+  events: {
+  },
+  
+  initialize: function(){
+    this.__super__.initialize.call(this)
+    this.template = this.$(".template").html()
+    this.$hoots = this.$("#hoots")
+  },
+  
+  load: function(comments){
+    comments.forEach(this.prependComment.bind(this))
+  },
+  
+  parse: function(comment){
+    var t = this.template.replace(/{{username}}/g, comment.username)
+                    .replace(/{{comment}}/g, comment.comment)
+    return t
+  },
+  
+  prependComment: function(comment){
+    var $el = $( this.parse(comment) )
+    this.$hoots.prepend($el)
+  },
+
+  appendComment: function(comment){
+    var $el = $( this.parse(comment) )
+    this.$hoots.append($el)
+  },
+  
+  success: function(){
+    this.prependComment(comment)
+  }
+})
\ No newline at end of file
diff --git a/public/assets/js/lib/views/index/index.js b/public/assets/js/lib/views/index/index.js
index 095909d..cb648fa 100644
--- a/public/assets/js/lib/views/index/index.js
+++ b/public/assets/js/lib/views/index/index.js
@@ -3,8 +3,20 @@ var IndexView = View.extend({
   events: {
   },
   
+  action: "/api/index",
+  
   initialize: function(opt){
     // opt.parent = parent
+    this.hootbox = new HootboxView ({ parent: this })
+    this.load()
+  },
+  
+  load: function(){
+    $.get(this.action, this.populate.bind(this))
+  },
+  
+  populate: function(data){
+    this.hootbox.load(data.hootbox)
   },
   
   success: function(){