more desiiiiiiiign

11 files changed, 100 insertions, 52 deletions

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) {