twit fixes and improvements

main/app/twit/core.hook

@@ -58,13 +58,15 @@
       ;*  %-  incl  :~
         "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"
       ==
-      ;title: twit
+      ;title: Urbit - Twitter Test
     ==
     ;body
       ;div#c
         ;div#d
           ;div#twet
-            ;textarea#tweetr;
+            ;div.author: @urbit_test
+            ;div.date;
+            ;textarea#tweetr(placeholder "What would you like to tweet?");
             ;input#submit(type "button", value "Send");
             ;input#length(type "button", value "0/140");
           ==

main/app/twit/main.css

@@ -6,13 +6,14 @@ input {
 }
 
 body {
-  margin-top: 2rem;
-  font-size 18px;
+  margin-top: 4rem;
+  font-size: 18px;
 }
 
 input,
 textarea {
   font-size: 1rem;
+  outline: none;
 }
 
 #c {
@@ -23,8 +24,9 @@ textarea {
 #d,
 #tweet,
 .tweet,
-.text {
-  width: 24rem;
+.text,
+textarea {
+  width: 32rem;
 }
 #d {
   margin-left: auto;
@@ -33,14 +35,11 @@ textarea {
 
 textarea {
   border: 0;
-  height: 6rem;
+  height: 8rem;
   line-height: 1.5rem;
-  margin-left: -1rem;
   margin-bottom: .3rem;
-  width: 26rem;
-  outline: none;
   resize: none;
-  padding: 1rem;
+  padding: 1rem 1px;
   background-color: #f7f7f7;
 }
 
@@ -58,26 +57,61 @@ textarea:focus {
 #length {
   width 1rem;
   height 1rem;
+  font-size: .6rem;
   color: #ccc;
-  background-color: #eee;
+  background-color: transparent;
 }
 
 #submit {
-  background-color: #ccc;
+  background-color: transparent;
+  border: 2px solid #5DE668;
+  color: #5DE668;
+  padding: .3rem 1rem;
   font-weight: 500;
+  cursor: pointer;
+}
+
+#submit:hover,
+#submit:focus {
+  background-color: #5DE668;
+  color: #fff;
+}
+
+#submit.disabled {
+  opacity: .6;
 }
 
 .text {
   word-wrap:break-word;
   margin-bottom: .3rem;
+  line-height: 1.6rem;
+}
+
+#twet {
+  margin-bottom: 3rem;
+  border-bottom: 2px solid #464646;
+  padding-bottom: 2rem;
 }
 
 #twet,
 .tweet {
-  margin-bottom: 1rem;
+  border-bottom: 1px solid #eee;
 }
 
+.tweet {
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+}
+
+.author,
 .date {
   font-size: .8rem;
   color: #ccc;
+  margin-right: .6rem;
+  display: inline-block;
+  margin-bottom: .3rem;
+}
+
+.author {
+  color: #888;
 }

main/app/twit/main.js

@@ -1,6 +1,8 @@
 $(function() {
   checkLength = function() {
     if($tweet.val().length > 140) {
+      short = $tweet.val().slice(0,140)
+      $tweet.val(short)
       e.stopPropagation()
       e.preventDefault()
       return false
@@ -10,8 +12,20 @@ $(function() {
     $("#length").val($("#tweetr").val().length+"/140")
   }
   
+  twoDig = function(d) {
+    return (d<10) ? "0"+d : d
+  }
+  setTime = function() {
+    d = new Date()
+    datestr = twoDig(d.getMonth()+1) + "-" + twoDig(d.getDate()) + "-" + d.getFullYear() + " " + twoDig(d.getHours()) + ":" + twoDig(d.getMinutes()) + ":" + twoDig(d.getSeconds())
+    $("#twet .date").text(datestr)
+  }
+  setInterval(setTime,1000)
+  setTime()
+  
   $tweet = $("#tweetr")
   $time = $("#time")
+  $submit = $('#submit')
   
   $tweet.focus()
   $tweet[0].selectionStart = $tweet[0].selectionEnd = $tweet.val().length
@@ -20,15 +34,20 @@ $(function() {
   $tweet.keydown(checkLength)
   $tweet.keyup(setLength)
   
-  $('#submit').click(function() {
+  $submit.click(function() {
     tweet = $tweet.val()
     $tweet.attr('disabled', true)
+    $submit.attr('disabled', true)
+    $submit.addClass('disabled')
+    
     window.urb.send({
       appl:"twit",
       data:{tweet:tweet}
     }, function(err,res) {
       console.log(arguments)
-      $tweet.attr('disabled', true)
+      $tweet.attr('disabled', false)
+      $submit.attr('disabled', false)
+      $submit.removeClass('disabled')
       $tweet.val('')
     })
   })
@@ -39,8 +58,9 @@ $(function() {
     d = new Date(tweets.created_at)
     datestr = d.getMonth()+1 + "-" + d.getDate() + "-" + d.getFullYear() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()
     $tweets = $("<div class='tweet'></div>")
-    $tweets.append("<div class='text'>"+tweets.text+"</div>")
+    $tweets.append("<div class='author'>@urbit_test</div>")
     $tweets.append("<div class='date'>"+datestr+"</div>")
+    $tweets.append("<div class='text'>"+tweets.text+"</div>")
     $time.append($tweets)
   }
 })