cssssssss

16 files changed, 165 insertions, 41 deletions

diff --git a/bucky/app/router.js b/bucky/app/router.js
index 4f4396f..007ff6b 100644
--- a/bucky/app/router.js
+++ b/bucky/app/router.js
@@ -66,6 +66,24 @@ module.exports = function(app){
       })
     }
   )
+  app.get("/api/keyword/:keyword",
+    bucky.ensureLastlog,
+    middleware.ensureAuthenticated,
+    bucky.keyword,
+    bucky.ensureThreadsForKeyword,
+    bucky.ensureCommentCountsForThreads,
+    bucky.ensureFileCountsForThreads,
+    bucky.ensureKeywordsForThreads,
+    bucky.ensureHootbox,
+    function(req, res){
+      res.json({
+        keyword: res.keyword,
+        threads: res.threads,
+        hootbox: res.hootbox,
+        lastlog: res.lastlog,
+      })
+    }
+  )
   app.get("/api/thread/:id",
     middleware.ensureAuthenticated,
     bucky.ensureThread,
diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index fbac5f3..697f6c7 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -52,6 +52,9 @@ h1 {
   margin-top: 5px;
   margin-bottom: 10px;
 }
+.subtitle:empty {
+  display: none;
+}
 .bluebox {
 	background-color: #d8e0ec;
 	color: #000000;
@@ -180,6 +183,14 @@ table, tr {
   font-weight: bold;
   font-size: 14px;
 }
+#threads .keyword td b a {
+  color: #211;
+  text-decoration: none;
+}
+.desktop #threads .keyword td b a:hover {
+  color: black;
+  text-decoration: underline;
+}
 #threads .keyword:first-child td:nth-child(2) {
   border-top: 0;
 }
@@ -305,7 +316,8 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
   text-align: center;
 }
 #details {
-  display: inline-block;
+  display: flex;
+  flex-direction: row;
   text-align: left;
   width: 100%;
 }
@@ -335,7 +347,7 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
   font-size: 11px;
   vertical-align: top;
 }
-#comments tr .user .avatar {
+#comments .avatar {
   box-shadow: 0 1px 0.5px rgba(32,16,16,0.4);
   width: 40px;
   height: 40px;
@@ -349,7 +361,6 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
 }
 .comment div {
   font-size: 12px;
-  padding-top: 0px;
   padding-bottom: 3px;
 }
 .comment .edit-links {
@@ -360,6 +371,8 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
   color: #d8cfcf;
   opacity: 0;
   transition: opacity 0.1s;
+  position: relative;
+  top: 4px;
 }
 .desktop .comment:hover .date,
 .mobile .date,
@@ -381,7 +394,8 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
 tr:nth-child(2n) td.comment { background-color: #f3f1f2; }
 tr:nth-child(2n+1) td.comment { background-color: #fcf8f8; }
 
-code {
+code,
+pre {
   display: block;
   white-space: pre;
   width: 100%;
@@ -390,7 +404,8 @@ code {
   padding: 5px;
   border: 1px solid #ddd;
 }
-code br {
+code br,
+pre br {
   display: none;
 }
 
@@ -430,7 +445,6 @@ code br {
   text-align: right;
 }
 #comment_form form {
-  float: right;
   width: 100%;
   max-width: 530px;
   padding-top: 5px;
@@ -584,10 +598,10 @@ code br {
   display: block;
   padding: 10px;
 }
-#search_form {
+.search_form {
   margin-bottom: 10px;
 }
-#search_form .button {
+.search_form .button {
   background-image: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2213%22%3E%0A%09%3Cg fill=%22none%22 stroke=%22%2354595d%22 stroke-width=%222%22%3E%0A%09%09%3Cpath d=%22M11.29 11.71l-4-4%22/%3E%0A%09%09%3Ccircle cx=%225%22 cy=%225%22 r=%224%22/%3E%0A%09%3C/g%3E%0A%3C/svg%3E%0A");
   background-position: center center;
   background-repeat: no-repeat;
@@ -596,7 +610,7 @@ code br {
   top: 3px;
   display: inline-block;
 }
-#search_form input[type='text'] {
+.search_form input[type='text'] {
   border-top: 0;
   border-left: 0;
   border-right: 0;
@@ -608,7 +622,7 @@ code br {
   outline: 0;
   width: 270px;
 }
-#search_form input[type='text']:focus {
+.search_form input[type='text']:focus {
   border-bottom: 1px solid #211;
   color: #211;
 }
@@ -659,7 +673,43 @@ code br {
   line-height: 15px;
   padding: 20px;
 }
+header .search_form {
+  display: none;
+}
 @media (max-width: 700px) {
+  body {
+    padding: 10px 10px;
+  }
+  h1 {
+    font-size: 20px;
+    margin-bottom: 10px;
+  }
+  #sidebar, #content {
+    float: none;
+  }
+  #content {
+    width: 100%;
+  }
+  #sidebar {
+    width: 100%;
+    margin-top: 20px;
+    margin-left: 0px;
+  }
+  #sidebar .search_form {
+    display: none;
+  }
+  header .search_form {
+    display: block;
+  }
+  .search_form input[type='text'] {
+    width: 250px;
+  }
+  #threads td:nth-child(1) {
+    display: none;
+  }
+  #threads td:nth-child(2) {
+    min-width: 200px;
+  }
   #threads td:nth-child(3) small {
     display: none;
   }
@@ -669,4 +719,17 @@ code br {
   #threads .size {
     display: none;
   }
+  #details > tr {
+    display: flex;
+    flex-direction: column;
+  }
+  #comments {
+  }
+  #comments .avatar {
+    width: 30px;
+    height: 30px;
+  }
+  .comment div {
+    padding-bottom: 3px;
+  }
 }
diff --git a/public/assets/js/lib/router.js b/public/assets/js/lib/router.js
index 122822b..8146906 100644
--- a/public/assets/js/lib/router.js
+++ b/public/assets/js/lib/router.js
@@ -4,8 +4,8 @@ var SiteRouter = Router.extend({
 	
 	routes: {
 		"/":               'login',
-		"/index":          'index',
 		"/index/:keyword": 'index',
+		"/index":          'index',
 		"/login":          'login',
 		"/details/:id":    'details',
 		"/post":           'post',
@@ -22,7 +22,8 @@ var SiteRouter = Router.extend({
   },
   
   index: function(keyword){
-    app.view = new IndexView (keyword)
+    app.view = new IndexView ()
+    app.view.load(keyword)
   },
   
   login: function(){
diff --git a/public/assets/js/lib/views/details/comments.js b/public/assets/js/lib/views/details/comments.js
index c031efc..65473c6 100644
--- a/public/assets/js/lib/views/details/comments.js
+++ b/public/assets/js/lib/views/details/comments.js
@@ -5,6 +5,7 @@ var CommentsView = FormView.extend({
   events: {
     "focus textarea": "focus",
     "blur textarea": "blur",
+    "click .remove": "remove",
   },
   
   initialize: function(){
@@ -18,22 +19,26 @@ var CommentsView = FormView.extend({
   },
   
   parse: function(comment){
-    if (! comment.comment.length) return ""
+    if (! comment.comment.length) return $('<div></div>')
     var datetime = verbose_date(comment.date, true)
     var t = this.template.replace(/{{username}}/g, comment.username)
+                         .replace(/{{id}}/g, comment.id)
                          .replace(/{{comment}}/g, tidy_urls(comment.comment))
                          .replace(/{{date}}/g, datetime[0])
                          .replace(/{{time}}/g, datetime[1])
-    return t
+    console.log(t)
+    var $t = $(t)
+    return $t
   },
   
   prependComment: function(comment){
-    var $el = $( this.parse(comment) )
+    var $el = this.parse(comment)
     this.$el.prepend($el)
   },
 
   appendComment: function(comment){
-    var $el = $( this.parse(comment) )
+    var $el = this.parse(comment)
+    console.log($el)
     $el.insertBefore(this.$formRow)
   },
   
@@ -48,5 +53,19 @@ var CommentsView = FormView.extend({
   blur: function(){
     app.typing = false
   },
+  
+  remove: function(e){
+    var id = $(e.target).data('id')
+    var should_remove = confirm("Are you sure you want to delete this comment? #" + id)
+    if (should_remove) {
+      $.ajax({
+        method: "DELETE",
+        url: "/api/comment/" + id,
+        success: function(){
+          window.location.reload()
+        },
+      })
+    }
+  },
 
 })
\ No newline at end of file
diff --git a/public/assets/js/lib/views/details/index.js b/public/assets/js/lib/views/details/index.js
index feba246..8dc92f6 100644
--- a/public/assets/js/lib/views/details/index.js
+++ b/public/assets/js/lib/views/details/index.js
@@ -5,7 +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 })
diff --git a/public/assets/js/lib/views/index/hootbox.js b/public/assets/js/lib/views/index/hootbox.js
index cdd3eb0..64fc756 100644
--- a/public/assets/js/lib/views/index/hootbox.js
+++ b/public/assets/js/lib/views/index/hootbox.js
@@ -15,6 +15,10 @@ var HootBox = FormView.extend({
   },
   
   load: function(comments){
+    if (!comments || !comments.length) {
+      this.$el.hide()
+      return
+    }
     comments.forEach(this.appendComment.bind(this))
   },
   
diff --git a/public/assets/js/lib/views/index/index.js b/public/assets/js/lib/views/index/index.js
index 840f150..5acfe8b 100644
--- a/public/assets/js/lib/views/index/index.js
+++ b/public/assets/js/lib/views/index/index.js
@@ -4,17 +4,24 @@ var IndexView = View.extend({
   },
   
   action: "/api/index",
+  keywordAction: "/api/keyword/",
   
   initialize: function(opt){
     // opt.parent = parent
     this.hootbox = new HootBox ({ parent: this })
     this.threadbox = new ThreadBox ({ parent: this, latest: true, welcome: true, })
     this.lastlog = new LastLog ({ parent: this })
-    this.load()
   },
   
-  load: function(){
-    $.get(this.action, this.populate.bind(this))
+  load: function(keyword){
+    if (keyword) {
+      $(".subtitle").html('<a href="/">&lt; Home</a>')
+      this.threadbox.options.welcome = false
+      $.get(this.keywordAction + keyword, this.populate.bind(this))
+    }
+    else {
+      $.get(this.action, this.populate.bind(this))
+    }
   },
   
   populate: function(data){
diff --git a/public/assets/js/lib/views/index/lastlog.js b/public/assets/js/lib/views/index/lastlog.js
index fe50e0f..02b3cca 100644
--- a/public/assets/js/lib/views/index/lastlog.js
+++ b/public/assets/js/lib/views/index/lastlog.js
@@ -18,6 +18,10 @@ var LastLog = View.extend({
   },
   
   load: function(lastlog){
+    if (!lastlog || !lastlog.length) {
+      this.$el.hide()
+      return
+    }
     var s = lastlog.map(this.parse.bind(this)).filter(s => s).join(', ')
     this.$el.html(s)
   },
diff --git a/public/assets/js/lib/views/index/threadbox.js b/public/assets/js/lib/views/index/threadbox.js
index 6efce22..79dc4bc 100644
--- a/public/assets/js/lib/views/index/threadbox.js
+++ b/public/assets/js/lib/views/index/threadbox.js
@@ -25,7 +25,7 @@ var ThreadBox = View.extend({
           return b.lastmodified - a.lastmodified
         }).slice(0, 15)
         this.appendThreads(latest)
-        data.threads = data.threads.filter((thread) => thread && !! thread.keyword)
+        data.threads = data.threads.slice(15).filter((thread) => thread && !! thread.keyword)
       }
       var keywords = {}
       data.threads.forEach((thread) => {
diff --git a/public/assets/js/vendor/view/router.js b/public/assets/js/vendor/view/router.js
index 36f86b5..5371f80 100644
--- a/public/assets/js/vendor/view/router.js
+++ b/public/assets/js/vendor/view/router.js
@@ -11,7 +11,7 @@ var Router = View.extend({
 	
 	parseRoute: function(pathname){
 
-		var routes = is_mobile ? this.mobileRoutes : this.routes,
+		var routes = is_mobile && this.mobileRoutes ? this.mobileRoutes : this.routes,
 		    path = pathname.split("/");
 
 		for (var i = 0; i < path.length; i++) {
diff --git a/views/pages/details.ejs b/views/pages/details.ejs
index c63d02f..a9e6c37 100644
--- a/views/pages/details.ejs
+++ b/views/pages/details.ejs
@@ -3,19 +3,17 @@
 
 <div id="details_rapper">
   <% include ../partials/metadata %>
-  <table id="details">
-    <tr>
-      <td class="left">
-        <% include ../partials/comments %>
-      </td>
-  
-      <td class="right">
-        <% include ../partials/gallery %>
-        <% include ../partials/files %>
-        <% include ../partials/threads %>
-      </td>
-    </tr>
-  </table>
+  <div id="details">
+    <div class="left">
+      <% include ../partials/comments %>
+    </div>
+
+    <div class="right">
+      <% include ../partials/gallery %>
+      <% include ../partials/files %>
+      <% include ../partials/threads %>
+    </div>
+  </div>
 </div>
 
 <% include ../partials/footer %>
diff --git a/views/pages/index.ejs b/views/pages/index.ejs
index 0dd5cdd..8b4e033 100644
--- a/views/pages/index.ejs
+++ b/views/pages/index.ejs
@@ -1,11 +1,13 @@
 <% include ../partials/header %>
 
+<div class="subtitle"></div>
+
 <div id="content">
   <% include ../partials/threads %>
 </div>
 
 <div id="sidebar">
-    <% include ../partials/searchform %>
+  <% include ../partials/searchform %>
   <span class="lastlog bluebox">
     <script class="template" type="text/html">
       <a href="/profile/{{username}}">{{username}}</a>
diff --git a/views/partials/comments.ejs b/views/partials/comments.ejs
index 936e487..ec27b09 100644
--- a/views/partials/comments.ejs
+++ b/views/partials/comments.ejs
@@ -14,8 +14,11 @@
         </span>
         <span class="edit-links">
           <a href="/comment/{{id}}/edit">edit</a> &middot;
-          <a href="/comment/{{id}}/remove">remove</a> &middot;
+          <a href="#" data-id="{{id}}" class='remove'>remove</a>
+<!-- 
+           &middot;
           <a href="/comment/{{id}}/reply">reply</a>
+ -->
         </span>
       </td>
     </tr>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 9a90d9c..d96179d 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -2,9 +2,14 @@
 <html>
 <head>
 <title>bucky</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
 <link rel="stylesheet" href="/assets/css/bucky.css">
 <meta name="_csrf" value="<%= csrfToken %>">
 </head>
 <body class="loading">
 
-<h1><%= title %></h1>
+<header>
+  <h1><%= title %></h1>
+  <% include ../partials/searchform %>
+</header>
\ No newline at end of file
diff --git a/views/partials/searchform.ejs b/views/partials/searchform.ejs
index c3b07e1..7eea248 100644
--- a/views/partials/searchform.ejs
+++ b/views/partials/searchform.ejs
@@ -1,4 +1,4 @@
-<form id="search_form" action="/search" method="get">
+<form class="search_form" action="/search" method="get">
   <div class='button'></div>
   <input type="text" name="query">
 </form>
\ No newline at end of file
diff --git a/views/partials/threads.ejs b/views/partials/threads.ejs
index be3e458..5c8e8a5 100644
--- a/views/partials/threads.ejs
+++ b/views/partials/threads.ejs
@@ -6,7 +6,7 @@
       <td>
         <b><i>the&nbsp;latest</i></b>&nbsp;&middot;
       </td>
-      <td>
+      <td colspan="4">
         <a href="/post/">Start a new thread!</a> |
         <a href="/mail">Inbox</a> |
         <a href="/profile">Profile</a> |
@@ -18,7 +18,7 @@
   <script class="keywordTemplate" type="text/html">
     <tr class='keyword'>
       <td>
-        <b>{{keyword}}</b>&nbsp;&middot;
+        <b><a href="/index/{{keyword}}">{{keyword}}</a></b>&nbsp;&middot;
       </td>
       <td>
         <a href="/post/{{keyword}}">post</a>