diff --git a/client/css/comments.styl b/client/css/comments.styl index a3d52809..79ddcdcc 100644 --- a/client/css/comments.styl +++ b/client/css/comments.styl @@ -2,7 +2,7 @@ .comments>ul list-style-type: none - margin: 1em 0 + margin: 0 0 2em 0 padding: 0 .comment @@ -16,6 +16,8 @@ display: none .tabs .edit.tab display: none + .content + margin-left: 0.5em &.editing .tab:not(.active) display: none @@ -134,3 +136,27 @@ blockquote :last-child margin-bottom: 0 + +.global-comment-list + text-align: left + + &>ul + list-style-type: none + margin: 1em 0 + padding: 0 + + &>li + display: flex + margin-bottom: 2em + + .post-thumbnail + float: left + vertical-align: top + margin-right: 1em + .thumbnail + width: 12em + height: 8em + margin: 0 + + .comments-container + width: 100% diff --git a/client/css/main.styl b/client/css/main.styl index 699be1e4..b08d81e0 100644 --- a/client/css/main.styl +++ b/client/css/main.styl @@ -196,7 +196,7 @@ a .access-key height: 0 .page position: relative - p + .page-header margin: 0.5em 0.5em 0.5em 0 position: relative &:before diff --git a/client/css/posts.styl b/client/css/posts.styl index 877f0015..22c92439 100644 --- a/client/css/posts.styl +++ b/client/css/posts.styl @@ -94,8 +94,11 @@ $safety-unsafe = #F3985F >.content width: 100% - .post-container .post-content - margin: 0 + .post-container + margin-bottom: 2em + + .post-content + margin: 0 .post-list ul diff --git a/client/html/comments_page.tpl b/client/html/comments_page.tpl new file mode 100644 index 00000000..e580e641 --- /dev/null +++ b/client/html/comments_page.tpl @@ -0,0 +1,18 @@ +
+ +
diff --git a/client/html/endless_pager_page.tpl b/client/html/endless_pager_page.tpl index 37c98d37..93d2a3b9 100644 --- a/client/html/endless_pager_page.tpl +++ b/client/html/endless_pager_page.tpl @@ -1,4 +1,4 @@
-

Page <%= ctx.page %> of <%= ctx.totalPages %>

+

Page <%= ctx.page %> of <%= ctx.totalPages %>

diff --git a/client/js/controllers/comments_controller.js b/client/js/controllers/comments_controller.js index 4f0e80e0..fbc48965 100644 --- a/client/js/controllers/comments_controller.js +++ b/client/js/controllers/comments_controller.js @@ -1,18 +1,39 @@ 'use strict'; +const api = require('../api.js'); const page = require('page'); +const misc = require('../util/misc.js'); const topNavController = require('../controllers/top_nav_controller.js'); +const pageController = require('../controllers/page_controller.js'); +const CommentsPageView = require('../views/comments_page_view.js'); const EmptyView = require('../views/empty_view.js'); class CommentsController { registerRoutes() { - page('/comments', (ctx, next) => { this._listCommentsRoute(); }); + page('/comments/:query?', + (ctx, next) => { misc.parseSearchQueryRoute(ctx, next); }, + (ctx, next) => { this._listCommentsRoute(ctx); }); + this._commentsPageView = new CommentsPageView(); this._emptyView = new EmptyView(); } - _listCommentsRoute() { + _listCommentsRoute(ctx) { topNavController.activate('comments'); - this._emptyView.render(); + + pageController.run({ + searchQuery: ctx.searchQuery, + clientUrl: '/comments/' + misc.formatSearchQuery({page: '{page}'}), + requestPage: page => { + return api.get( + '/posts/?query=sort:comment-date+comment-count-min:1' + + `&page=${page}&pageSize=10&fields=` + + 'id,comments,commentCount,thumbnailUrl'); + }, + pageRenderer: this._commentsPageView, + pageContext: { + canViewPosts: api.hasPrivilege('posts:view'), + } + }); } } diff --git a/client/js/views/comments_page_view.js b/client/js/views/comments_page_view.js new file mode 100644 index 00000000..ed741ef3 --- /dev/null +++ b/client/js/views/comments_page_view.js @@ -0,0 +1,27 @@ +'use strict'; + +const views = require('../util/views.js'); +const CommentListControl = require('../controls/comment_list_control.js'); + +class CommentsPageView { + constructor() { + this._template = views.getTemplate('comments-page'); + } + + render(ctx) { + const target = ctx.target; + const source = this._template(ctx); + + for (let post of ctx.results) { + post.comments.reverse(); + new CommentListControl( + source.querySelector( + `.comments-container[data-for="${post.id}"]`), + post.comments); + } + + views.showView(target, source); + } +} + +module.exports = CommentsPageView; diff --git a/client/js/views/endless_page_view.js b/client/js/views/endless_page_view.js index 482de23f..579db944 100644 --- a/client/js/views/endless_page_view.js +++ b/client/js/views/endless_page_view.js @@ -25,7 +25,9 @@ class EndlessPageView { this._working = 0; ctx.headerContext.target = pageHeaderHolder; - ctx.headerRenderer.render(ctx.headerContext); + if (ctx.headerRenderer) { + ctx.headerRenderer.render(ctx.headerContext); + } const threshold = window.innerHeight / 3; diff --git a/client/js/views/manual_page_view.js b/client/js/views/manual_page_view.js index fe93bb8a..e67c9cf3 100644 --- a/client/js/views/manual_page_view.js +++ b/client/js/views/manual_page_view.js @@ -70,7 +70,9 @@ class ManualPageView { const currentPage = ctx.searchQuery.page; ctx.headerContext.target = pageHeaderHolder; - ctx.headerRenderer.render(ctx.headerContext); + if (ctx.headerRenderer) { + ctx.headerRenderer.render(ctx.headerContext); + } ctx.requestPage(currentPage).then(response => { Object.assign(ctx.pageContext, response);