more desiiiiiiiign

20 files changed, 151 insertions, 86 deletions

diff --git a/bucky/app/bucky.js b/bucky/app/bucky.js
index 2b07f03..49ad8e0 100644
--- a/bucky/app/bucky.js
+++ b/bucky/app/bucky.js
@@ -176,7 +176,7 @@ var bucky = module.exports = {
     var hasComment = req.body.comment && req.body.comment.length
     var hasFile = req.files && req.files.length
     if (! hasComment && ! hasFile) {
-      console.log(">>> NO FILES OR COMMENT")
+      console.log(">>> no files or comment")
       return res.sendStatus(400)
     }
     next()
@@ -249,6 +249,11 @@ var bucky = module.exports = {
         })
       })
     })
+    Promise.all(promises).then(values => {
+      next()
+    }).catch(err => {
+      console.log(err)
+    })
   },
 
   /* MAIL */
diff --git a/bucky/app/router.js b/bucky/app/router.js
index bd72a4d..a793192 100644
--- a/bucky/app/router.js
+++ b/bucky/app/router.js
@@ -5,7 +5,7 @@ var bucky = require('./bucky')
 var db = require('../db')
 var util = require('../util/util')
 var search = require('../search/middleware')
-var multer = require('multer')({ dest:'./uploads/' })
+var multer = require('multer')()
 
 module.exports = function(app){
 	app.all('*', middleware.ensureLocals)
@@ -89,7 +89,10 @@ module.exports = function(app){
     middleware.ensureAuthenticated,
     bucky.ensureThread,
     // ensure thread privacy
-    bucky.createComment,
+    multer.array("files"),
+    bucky.verifyFilesOrComment,
+    bucky.createOptionalFiles,
+    bucky.createOptionalComment,
     function(req, res){
       res.json({
         comment: res.comment
diff --git a/bucky/util/upload.js b/bucky/util/upload.js
index d92183e..242acf0 100644
--- a/bucky/util/upload.js
+++ b/bucky/util/upload.js
@@ -39,7 +39,7 @@ module.exports.put = function (opt) {
     filename = uuid.v1() + "." + extension;
 	}
 
-	var remote_path = "/" + opt.dirname + "/" + filename
+	var remote_path = opt.dirname + filename
 
 	if (types && ! extension) {
 		err = "Unacceptable filetype."
@@ -55,8 +55,8 @@ module.exports.put = function (opt) {
 	}
 
 	opt.acceptable && opt.acceptable(err)
-	
-	// console.log("upload >", remote_path)
+
+	console.log("upload >", remote_path)
 	s3.putBuffer(file.buffer, remote_path, {
 		'Content-Length': file.size,
 		'Content-Type': file.mimetype,
diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 315cad6..3b389d2 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -7,6 +7,10 @@ body {
 	font-size: 10px;
 	font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
 	padding: 20px 30px;
+	transition: opacity 200ms;
+}
+body.loading {
+  opacity: 0;
 }
 * {
   box-sizing: border-box;
@@ -45,7 +49,6 @@ h1 {
   margin: 0;
 }
 .subtitle {
-  display: none;
   margin-top: 5px;
   margin-bottom: 10px;
 }
@@ -98,7 +101,7 @@ table, tr {
 }
 #sidebar {
   width: 300px;
-  margin-right: 10px;
+  margin-left: 10px;
 }
 #content {
   width: -webkit-calc(100% - 310px);
@@ -108,6 +111,9 @@ table, tr {
 #content .ledger {
   width: 100%;
 }
+#details .ledger {
+  width: auto;
+}
 
 #searchbox.bluebox {
   text-align: left;
@@ -185,7 +191,6 @@ table, tr {
 }
 
 .ledger {
-  width: 100%;
 }
 .ledger .row td {
   text-align: right;
@@ -302,11 +307,10 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
 }
 #details .left {
   vertical-align: top;
-  max-width: 50%;
 }
 #details .right {
-  max-width: 50vw;
   vertical-align: top;
+  width: 50%;
 }
 
 .comment {
@@ -314,12 +318,10 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
   border-bottom: 1px solid #ccc;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
-  min-width: 450px;
 }
 #comments {
-  width: 600px;
-}
-#comments tr {
+  width: 100%;
+  max-width: 600px;
   padding-right: 20px;
 }
 #comments tr .user {
@@ -330,7 +332,7 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
   vertical-align: top;
 }
 #comments tr .user .avatar {
-  border: 1px solid;
+  box-shadow: 0 1px 0.5px rgba(32,16,16,0.4);
   width: 40px;
   height: 40px;
   background-size: cover;
@@ -354,6 +356,19 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
 tr:nth-child(even) td.comment { background-color: #f3f1f2; }
 tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
 
+code {
+  display: block;
+  white-space: pre;
+  width: 100%;
+  overflow-x: hidden;
+  background: #fefefe;
+  padding: 5px;
+  border: 1px solid #ddd;
+}
+code br {
+  display: none;
+}
+
 #thread_form form {
   width: 530px;
 }
@@ -373,7 +388,7 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
   font-size: 15px;
   margin: 10px 0;
 }
-#thread_form .inputs {
+.inputs {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -384,21 +399,47 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
   margin: 0;
 }
 
+#comment_form {
+  width: 100%;
+  max-width: 600px;
+  text-align: right;
+}
 #comment_form form {
-  width: 530px;
-  margin-top: 5px;
-  margin-left: 50px;
-  padding-right: 10px;
+  float: right;
+  width: 100%;
+  max-width: 530px;
+  padding-top: 5px;
+  padding-right: 20px;
 }
 #comment_form textarea {
   width: 100%;
-  height: 240px;
   font-family: 'Trebuchet MS', sans-serif;
   padding: 5px;
   font-size: 15px;
+  background: white;
+  border-color: #ddd;
+  height: 240px;
 }
-#comment_form input[type=submit] {
-  float: right;
+#comment_form textarea::placeholder {
+  color: #000;
+}
+#comment_form textarea:invalid {
+  background: transparent;
+  border-color: transparent;
+  height: 30px;
+  opacity: 0.4;
+}
+#comment_form.focused textarea {
+  background: white;
+  height: 240px;
+  transition: height 100ms cubic-bezier(0,0,0,1);
+  opacity: 1;
+}
+#comment_form .inputs {
+  opacity: 0.4;
+}
+#comment_form.focused .inputs {
+  opacity: 1;
 }
 
 #files, #files tr {
@@ -440,7 +481,7 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
   padding: 0 0 12px 0;
 }
 #gallery div a:first-child .thumb {
-  max-width: 450px;
+  max-width: 100%;
   max-height: 450px;
 }
 #gallery .thumb {
@@ -513,18 +554,10 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
   text-align: right;
   padding-right: 3px;
 }
-#messages tr td:nth-child(2) {
-  padding: 5px;
-  border-left: 1px solid #ccc;
-  border-right: 1px solid #ccc;
-}
 #messages tr td:nth-child(3) {
   text-align: center;
   padding-left: 3px;
 }
-#messages .row td:nth-child(2) {
-  border-bottom: 1px solid;
-}
 #boxes table {
   width: 200px;
   font-size: 13px;
diff --git a/public/assets/js/lib/views/details/audio.js b/public/assets/js/lib/views/details/audio.js
index 6a8f5ed..42f5376 100644
--- a/public/assets/js/lib/views/details/audio.js
+++ b/public/assets/js/lib/views/details/audio.js
@@ -3,6 +3,7 @@ var audio = (function(){
   
   var el, music = [], current_index = -1
   var links, comment, parent
+  var playing = false
 
   audio.init = function () {
     links = document.querySelectorAll("a")
@@ -19,6 +20,7 @@ var audio = (function(){
   audio.build = function () {
     el = document.createElement("audio")
     el.setAttribute("controls", true)
+    el.addEventListener("loadeddata", () => { if (playing) el.play() })
     el.addEventListener("ended", audio.next)
     el.src = music[0]
     parent.appendChild(el)
@@ -33,8 +35,7 @@ var audio = (function(){
   audio.play = function (index) {
     current_index = (parseInt(index) + music.length) % music.length
     el.src = music[current_index].href
-    el.play()
-    var playing = document.querySelector(".playing")
+    playing = document.querySelector(".playing")
     if (playing) playing.classList.remove("playing")
     music[current_index].classList.add("playing")
   }
diff --git a/public/assets/js/lib/views/details/commentform.js b/public/assets/js/lib/views/details/commentform.js
index 3b82ac7..e082248 100644
--- a/public/assets/js/lib/views/details/commentform.js
+++ b/public/assets/js/lib/views/details/commentform.js
@@ -3,6 +3,7 @@ var CommentForm = FormView.extend({
   el: "#comment_form",
   
   events: {
+    "focus textarea": 'focus',
   },
   
   action: "",
@@ -17,11 +18,16 @@ var CommentForm = FormView.extend({
     this.action = "/api/thread/" + thread.id + "/comment"
   },
   
+  focus: function(){
+    this.$el.addClass('focused')
+  },
+  
   validate: function(){
     var errors = []
     var comment = $("[name=comment]").val()
-    if (! comment || ! comment.length) {
-      errors.push("Please enter a comment.")
+    var files = this.$("[name=files]").val()
+    if ((! comment || ! comment.length) && ! files) {
+      errors.push("Please enter a comment or add some files.")
     }
     return errors.length ? errors : null
   },
diff --git a/public/assets/js/lib/views/details/files.js b/public/assets/js/lib/views/details/files.js
index b81d20c..ad2df85 100644
--- a/public/assets/js/lib/views/details/files.js
+++ b/public/assets/js/lib/views/details/files.js
@@ -19,7 +19,7 @@ var FilesView = FormView.extend({
     var total = 0, has_music = false
     files.forEach(function(file){
       if (is_image(file.filename)) {
-        return
+        // return
       }
       this.appendFile(file)
       total += file.size
diff --git a/public/assets/js/lib/views/details/index.js b/public/assets/js/lib/views/details/index.js
index 25ae020..b8fa859 100644
--- a/public/assets/js/lib/views/details/index.js
+++ b/public/assets/js/lib/views/details/index.js
@@ -5,8 +5,7 @@ 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 })
@@ -21,6 +20,7 @@ var DetailsView = View.extend({
   },
   
   populate: function(data){
+    $("body").removeClass('loading')
     var thread = data.thread
     $("h1").html(thread.title)
     $(".subtitle").show().html("<a href='/'>&lt; Home</a> | " + metadata(thread))
diff --git a/public/assets/js/lib/views/index/index.js b/public/assets/js/lib/views/index/index.js
index 171133b..c4d1330 100644
--- a/public/assets/js/lib/views/index/index.js
+++ b/public/assets/js/lib/views/index/index.js
@@ -18,6 +18,7 @@ var IndexView = View.extend({
   },
   
   populate: function(data){
+    $("body").removeClass('loading')
     this.hootbox.load(data.hootbox)
     this.threadbox.load(data)
     this.lastlog.load(data.lastlog)
diff --git a/public/assets/js/lib/views/mail/mailbox.js b/public/assets/js/lib/views/mail/mailbox.js
index 199eeee..2f822aa 100644
--- a/public/assets/js/lib/views/mail/mailbox.js
+++ b/public/assets/js/lib/views/mail/mailbox.js
@@ -19,9 +19,16 @@ var MailboxView = View.extend({
   },
   
   populate: function(data){
+    $("body").removeClass('loading')
     this.boxlist.load(data.boxes)
-    data.messages.forEach(function(message){
-      this.appendMessage(message, data.user)
+
+    var user = data.user
+    var max = data.messages.length-1
+    data.messages.forEach(function(message, i){
+      var $row = $( this.parse(message, user) )
+      if (i === 0) $row.addClass("first")
+      if (i === max) $row.addClass("last")
+      this.$el.append($row)
     }.bind(this))
   },
   
@@ -44,9 +51,4 @@ var MailboxView = View.extend({
     return t
   },
 
-  appendMessage: function(message, user){
-    var $row = $( this.parse(message, user) )
-    this.$el.append($row)
-  },
-
 })
diff --git a/public/assets/js/lib/views/mail/message.js b/public/assets/js/lib/views/mail/message.js
index b6297d9..da5e1b4 100644
--- a/public/assets/js/lib/views/mail/message.js
+++ b/public/assets/js/lib/views/mail/message.js
@@ -15,6 +15,7 @@ var MessageView = View.extend({
   
   populate: function(data){
     this.parse(data)
+    $("body").removeClass('loading')
   },
   
   parse: function(data){
diff --git a/public/assets/js/lib/views/search/results.js b/public/assets/js/lib/views/search/results.js
index 89004e3..d01db96 100644
--- a/public/assets/js/lib/views/search/results.js
+++ b/public/assets/js/lib/views/search/results.js
@@ -53,6 +53,7 @@ var SearchResults = View.extend({
         .replace(/{{file}}/, file_tag)
       this.$("#results").append(t)
     })
+    $("body").removeClass('loading')
   },
 
 })
diff --git a/public/assets/js/util/format.js b/public/assets/js/util/format.js
index a162229..a185b33 100644
--- a/public/assets/js/util/format.js
+++ b/public/assets/js/util/format.js
@@ -198,20 +198,22 @@ function is_image(url){
   return !! url.match(/(gif|jpe?g|png)\??.*$/i)
 }
 function make_link(file){
+  if (file.storage) {
+    return "//" + file.storage + "/bucky/data/" + file.thread + "/" + encodeURIComponent(file.filename)
+  }
   if (file.filename.indexOf("http") !== 0) {
     return "/data/" + file.thread + "/" + encodeURIComponent(file.filename)
   }
-  else {
-    return file.filename
-  }
+  return file.filename
 }
 function make_thumb(file){
+  if (file.storage) {
+    return "//" + file.storage + "/bucky/data/" + file.thread + "/" + encodeURIComponent(file.filename)
+  }
   if (file.filename.indexOf("http") !== 0) {
     return "/data/" + file.thread + "/" + file.filename
   }
-  else {
-    return "/data/" + file.thread + "/" + file.filename
-    // var partz = file.filename.toLowerCase().split("/")
-    // return partz.splice(partz.length-2, 0, ".thumb").join("/")
-  }  
+  return "/data/" + file.thread + "/" + file.filename
+  // var partz = file.filename.toLowerCase().split("/")
+  // return partz.splice(partz.length-2, 0, ".thumb").join("/")
 }
\ No newline at end of file
diff --git a/public/assets/js/vendor/view/formview.js b/public/assets/js/vendor/view/formview.js
index 485db7a..f71c550 100644
--- a/public/assets/js/vendor/view/formview.js
+++ b/public/assets/js/vendor/view/formview.js
@@ -37,8 +37,8 @@ var FormView = View.extend({
 
     this.$("input[name], select[name], textarea[name]").each( function(){
       if (this.type == "file") {
-        if (this.files.length > 0) {
-          fd.append(this.name, this.files[0]);
+        for (var i = 0; i < this.files.length; i++) {
+          fd.append(this.name, this.files[i]);
         }
       }
       else if (this.type == "password") {
@@ -79,7 +79,7 @@ var FormView = View.extend({
     
     var action = typeof this.action == "function" ? this.action() : this.action
     if (! action) return
-    
+
     var request = $.ajax({
       url: action,
       type: this.method,
@@ -89,6 +89,7 @@ var FormView = View.extend({
       processData: false,
       contentType: false,
       success: function(response){
+        console.log(response)
         if (response.error) {
           var errors = []
           for (var key in response.error.errors) {
diff --git a/views/pages/details.ejs b/views/pages/details.ejs
index a5db176..c63d02f 100644
--- a/views/pages/details.ejs
+++ b/views/pages/details.ejs
@@ -1,4 +1,5 @@
 <% include ../partials/header %>
+<div class="subtitle"></div>
 
 <div id="details_rapper">
   <% include ../partials/metadata %>
@@ -17,5 +18,4 @@
   </table>
 </div>
 
-
 <% include ../partials/footer %>
diff --git a/views/pages/index.ejs b/views/pages/index.ejs
index 7919344..06a084c 100644
--- a/views/pages/index.ejs
+++ b/views/pages/index.ejs
@@ -1,4 +1,11 @@
 <% include ../partials/header %>
+<div class="subtitle">
+  <a href="/post">new post</a> |
+  <a href="/mail">inbox</a> |
+  <a href="/message">message</a> |
+  <a href="/profile">profile</a> |
+  <a href="/logout">logout</a>
+</div>
 
 <div id="content">
   <% include ../partials/threads %>
diff --git a/views/pages/mailbox.ejs b/views/pages/mailbox.ejs
index fa06b8e..e4e0302 100644
--- a/views/pages/mailbox.ejs
+++ b/views/pages/mailbox.ejs
@@ -1,30 +1,10 @@
 <% include ../partials/header %>
 
-<div id="sidebar">
-  <div class="bluebox">
-    <b><big>message center</big></b>
-  </div>
-  <div class="bluebox" id="boxes">
-    <table>
-      <tr>
-        <th>Folders</th>
-        <td>msgs</td>
-      </tr>
-    </table>
-    <script type="text/html" class="template">
-      <tr>
-        <td><a href="/mail/{{box}}">{{box}}</a></td>
-        <td>{{count}}</td>
-      </tr>
-    </script>
-  </div>
-</div>
-
 <div id="content">
 
   <table id="messages" class="ledger">
     <script class="template" type="text/html">
-      <tr>
+      <tr class='row'>
         <td>
           {{to}} <a href="/profile/{{username}}">{{username}}</a> &middot;
         </td>
@@ -47,4 +27,24 @@
 
 </div>
 
+<div id="sidebar">
+  <div class="bluebox">
+    <b><big>message center</big></b>
+  </div>
+  <div class="bluebox" id="boxes">
+    <table>
+      <tr>
+        <th>Folders</th>
+        <td>msgs</td>
+      </tr>
+    </table>
+    <script type="text/html" class="template">
+      <tr>
+        <td><a href="/mail/{{box}}">{{box}}</a></td>
+        <td>{{count}}</td>
+      </tr>
+    </script>
+  </div>
+</div>
+
 <% include ../partials/footer %>
diff --git a/views/partials/comments.ejs b/views/partials/comments.ejs
index 80f1b3c..14bb9bf 100644
--- a/views/partials/comments.ejs
+++ b/views/partials/comments.ejs
@@ -26,9 +26,12 @@
   <tr>
     <td>
       <form>
-        <textarea name="comment" placeholder="Enter your comment"></textarea><br>
-        <input type="file" multiple>
-        <input type="submit" value="POST" />
+        <textarea required name="comment" placeholder="Enter your comment"></textarea>
+        <div class="inputs">
+          <input name="files" type="file" multiple>
+          <input type="submit" value="POST" />
+        </div>
+        <div class='errors'></div>
       </form>
     </td>
   </tr>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 87b4dd8..9a90d9c 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -5,7 +5,6 @@
 <link rel="stylesheet" href="/assets/css/bucky.css">
 <meta name="_csrf" value="<%= csrfToken %>">
 </head>
-<body>
+<body class="loading">
 
 <h1><%= title %></h1>
-<div class="subtitle"></div>
diff --git a/views/partials/threads.ejs b/views/partials/threads.ejs
index ec93efa..94a7a62 100644
--- a/views/partials/threads.ejs
+++ b/views/partials/threads.ejs
@@ -4,7 +4,7 @@
   <script class="welcomeTemplate" type="text/html">
     <tr class='keyword'>
       <td>
-        <b><i>the latest</i></b>&nbsp;&middot;
+        <b><i>the&nbsp;latest</i></b>&nbsp;&middot;
       </td>
       <td>
         <a href="/post/">Start a new thread!</a>