diff options
| -rw-r--r-- | bucky/app/router.js | 18 | ||||
| -rw-r--r-- | public/assets/css/bucky.css | 83 | ||||
| -rw-r--r-- | public/assets/js/lib/router.js | 5 | ||||
| -rw-r--r-- | public/assets/js/lib/views/details/comments.js | 27 | ||||
| -rw-r--r-- | public/assets/js/lib/views/details/index.js | 2 | ||||
| -rw-r--r-- | public/assets/js/lib/views/index/hootbox.js | 4 | ||||
| -rw-r--r-- | public/assets/js/lib/views/index/index.js | 13 | ||||
| -rw-r--r-- | public/assets/js/lib/views/index/lastlog.js | 4 | ||||
| -rw-r--r-- | public/assets/js/lib/views/index/threadbox.js | 2 | ||||
| -rw-r--r-- | public/assets/js/vendor/view/router.js | 2 | ||||
| -rw-r--r-- | views/pages/details.ejs | 24 | ||||
| -rw-r--r-- | views/pages/index.ejs | 4 | ||||
| -rw-r--r-- | views/partials/comments.ejs | 5 | ||||
| -rw-r--r-- | views/partials/header.ejs | 7 | ||||
| -rw-r--r-- | views/partials/searchform.ejs | 2 | ||||
| -rw-r--r-- | views/partials/threads.ejs | 4 |
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="/">< 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> · - <a href="/comment/{{id}}/remove">remove</a> · + <a href="#" data-id="{{id}}" class='remove'>remove</a> +<!-- + · <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 latest</i></b> · </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> · + <b><a href="/index/{{keyword}}">{{keyword}}</a></b> · </td> <td> <a href="/post/{{keyword}}">post</a> |