split up partials and stub in mailbox frontend

6 files changed, 101 insertions, 13 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 4d79da3..630ea2f 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -129,6 +129,16 @@ hr {
 #hoots tr:nth-child(odd) td:nth-child(2) { background-color: #f3f1f2; }
 #hoots tr:nth-child(even) td:nth-child(2) { background-color: #e3e8e3; }
 
+.threads th {
+  vertical-align: top;
+  font-weight: normal;
+  padding-right: 4px;
+  line-height: 15px;
+}
+.threads th b {
+  font-weight: bold;
+  font-size: 14px;
+}
 .threads, .threads tr {
   margin: 0; padding: 0;
   border-spacing: 0;
@@ -162,6 +172,12 @@ hr {
 .threads tr:last-child td:nth-child(2) {
   border-bottom: 1px solid #b6aeab;
 }
+.threads td:nth-child(2) a {
+  display: block;
+}
+.threads td:nth-child(6) {
+  text-align: center;
+}
 
 tr:nth-child(odd).row	td { background-color: #e6f0f0; }
 tr:nth-child(odd).row:hover	td { background-color: #d8e0ec; color: #000000; }
@@ -235,9 +251,9 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
 .older  { color: #5D6464; }
 .quiet  { color: #787878; }
 
-#details .left, #details .right {
-  float: left;
+#details .left {
   padding-right: 20px;
+  vertical-align: top;
 }
 #details_rapper {
   width: 100%;
@@ -249,6 +265,7 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
 }
 #details .right {
   max-width: 50vw;
+  vertical-align: top;
 }
 
 #comments, #comments tr {
@@ -293,6 +310,7 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
 }
 #files {
   border: 1px solid #ccc;
+  margin-bottom: 10px;
 }
 #files td {
   padding: 3px 3px;
diff --git a/public/assets/js/lib/views/details/index.js b/public/assets/js/lib/views/details/index.js
index d7fb26f..554c475 100644
--- a/public/assets/js/lib/views/details/index.js
+++ b/public/assets/js/lib/views/details/index.js
@@ -4,11 +4,13 @@ var DetailsView = View.extend({
   },
   
   action: "/api/thread/",
+  keywordAction: "/api/keyword/",
   
   initialize: function(opt){
     this.comments = new CommentsView ({ parent: this })
     this.files = new FilesView ({ parent: this })
     this.gallery = new GalleryView ({ parent: this })
+    this.threadbox = new ThreadBox ({ parent: this })
   },
   
   load: function(id){
@@ -21,6 +23,13 @@ var DetailsView = View.extend({
     this.comments.load(data.comments)
     this.files.load(data.files)
     this.gallery.load(data.files)
+    if (data.thread.keyword) {
+      $.get(this.keywordAction + data.thread.keyword, this.populateKeyword.bind(this))
+    }
+  },
+  
+  populateKeyword: function(data){
+    this.threadbox.load(data)
   },
   
   success: function(){
diff --git a/public/assets/js/lib/views/index/index.js b/public/assets/js/lib/views/index/index.js
index 3d4dc72..a1e8af5 100644
--- a/public/assets/js/lib/views/index/index.js
+++ b/public/assets/js/lib/views/index/index.js
@@ -19,7 +19,7 @@ var IndexView = View.extend({
   
   populate: function(data){
     this.hootbox.load(data.hootbox)
-    this.threadbox.load(data.threads)
+    this.threadbox.load(data)
     this.lastlog.load(data.lastlog)
   },
   
diff --git a/public/assets/js/lib/views/index/threadbox.js b/public/assets/js/lib/views/index/threadbox.js
index bcaaceb..eee7a5c 100644
--- a/public/assets/js/lib/views/index/threadbox.js
+++ b/public/assets/js/lib/views/index/threadbox.js
@@ -1,11 +1,3 @@
-/*
-age_class
-views_class
-comments_class
-size_class
-files_class
-*/
-
 var ThreadBox = View.extend({
   el: ".threads",
   
@@ -15,10 +7,15 @@ var ThreadBox = View.extend({
   initialize: function(){
     this.__super__.initialize.call(this)
     this.template = this.$(".template").html()
+    this.keywordTemplate = this.$(".keywordTemplate").html()
   },
   
-  load: function(threads){
-    threads.forEach(this.appendThread.bind(this))
+  load: function(data){
+    if (data.keyword) {
+      var $row = this.parseKeyword(data.keyword)
+      this.$el.append($row)
+    }
+    data.threads.forEach(this.appendThread.bind(this))
   },
   
   parse: function(thread){
@@ -52,6 +49,12 @@ var ThreadBox = View.extend({
     return t
   },
   
+  parseKeyword: function(keyword){
+    var t = this.keywordTemplate
+                .replace(/{{keyword}}/g, keyword.keyword)
+    return t
+  },
+  
   prependThread: function(thread){
     var $row = $( this.parse(thread) )
     this.$el.prepend($row)
diff --git a/public/assets/js/lib/views/mail/mailbox.js b/public/assets/js/lib/views/mail/mailbox.js
new file mode 100644
index 0000000..fe16980
--- /dev/null
+++ b/public/assets/js/lib/views/mail/mailbox.js
@@ -0,0 +1,58 @@
+var Mailbox = View.extend({
+  el: ".mailbox",
+  
+  events: {
+  },
+  
+  action: "/api/mailbox/",
+  
+  initialize: function(){
+    this.__super__.initialize.call(this)
+    this.template = this.$(".template").html()
+    this.boxTemplate = this.$(".boxTemplate").html()
+  },
+  
+  load: function(name){
+    $("h1").html(name)
+    $.get(this.action + name, this.populate.bind(this))
+  },
+  
+  populate: function(data){
+    data.boxes.forEach(this.appendBox.bind(this))
+    data.messages.forEach(this.appendMessage.bind(this))
+  },
+  
+  parseBox: function(box){
+    var t = this.boxTemplate
+                .replace(/{{box}}/g, box.name)
+                .replace(/{{count}}/g, box.count)
+    return t
+  },
+  
+  parseMessage: function(message){
+    var datetime = verbose_date(message.date)
+    var id = message.id
+
+    var t = this.template
+                .replace(/{{id}}/g, thread.id)
+                .replace(/{{username}}/g, thread.username)
+                .replace(/{{subject}}/g, thread.title)
+                .replace(/{{date}}/g, datetime[0])
+                .replace(/{{time}}/g, datetime[1])
+                .replace(/{{date_class}}/g, carbon_date(thread.lastmodified) )
+                .replace(/{{size}}/g, size[1] )
+                .replace(/{{size_class}}/g, size[0] )
+    return t
+  },
+
+  appendBox: function(box){
+    var $row = $( this.parseBox(box) )
+    this.$el.append($row)
+  },
+
+  appendMessage: function(message){
+    var $row = $( this.parseMessage(message) )
+    this.$el.append($row)
+  },
+
+})
diff --git a/public/assets/js/lib/views/mail/message.js b/public/assets/js/lib/views/mail/message.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/public/assets/js/lib/views/mail/message.js