diff options
| -rw-r--r-- | client/css/home.styl | 26 | ||||
| -rw-r--r-- | client/html/home.tpl | 18 | ||||
| -rw-r--r-- | client/html/home_featured_post.tpl | 2 | ||||
| -rw-r--r-- | client/html/home_footer.tpl | 6 | ||||
| -rw-r--r-- | client/html/home_stats.tpl | 1 | ||||
| -rw-r--r-- | client/js/views/home_view.js | 19 |
6 files changed, 32 insertions, 40 deletions
diff --git a/client/css/home.styl b/client/css/home.styl index bf920e5..163b1b5 100644 --- a/client/css/home.styl +++ b/client/css/home.styl @@ -2,42 +2,42 @@ text-align: center !important header + margin-bottom: 1em h1 - margin-top: 0 - margin-bottom: 0.2em - aside - opacity: .5 - font-size: 80% - margin-bottom: 2em + line-height: initial + font-size: 30pt + margin: 0 .message margin-bottom: 2em form - margin-bottom: 2em width: auto + vertical-align: middle + margin: 0 0 2em 0 + text-align: left white-space: nowrap input width: auto - .separator - display: inline-block - margin: 0 1.5em + .sep + margin: 0 0.75em .post-container + margin-bottom: 2em display: flex align-items: center justify-content: center nav - margin-bottom: 0.5em a padding: 0.5em aside - margin-bottom: 1em + margin-bottom: 0.3em font-size: 90% footer - margin-top: 1em line-height: 100% font-size: 80% + .sep + margin: 0 0.25em diff --git a/client/html/home.tpl b/client/html/home.tpl index af899a9..f1d9b1c 100644 --- a/client/html/home.tpl +++ b/client/html/home.tpl @@ -2,23 +2,15 @@ <div class='messages'></div> <header> <h1><%- ctx.name %></h1> - <aside class='stats-container'></aside> </header> <% if (ctx.canListPosts) { %> <form class='horizontal'> - <div class='input'> - <%= ctx.makeButton({name: 'all-posts', value: 'Browse all posts'}) %> - <span class='separator'>or</span> - <%= ctx.makeTextInput({name: 'search-text', placeholder: 'enter some tags'}) %> - </div> - <div class='buttons'> - <input type='submit' value='Search'/> - </div> + <%= ctx.makeTextInput({name: 'search-text', placeholder: 'enter some tags'}) %> + <input type='submit' value='Search'/> + <span class=sep>or</span> + <a href='/posts'>browse all posts</a> </form> <% } %> <div class='post-info-container'></div> - <footer> - Build <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%- ctx.version %></a> - from <%= ctx.makeRelativeTime(ctx.buildDate) %> - </footer> + <footer class='footer-container'></footer> </div> diff --git a/client/html/home_featured_post.tpl b/client/html/home_featured_post.tpl index d5fb43e..90851d7 100644 --- a/client/html/home_featured_post.tpl +++ b/client/html/home_featured_post.tpl @@ -1,3 +1,4 @@ +<div class='post-container'></div> <% if (ctx.featuredPost) { %> <aside> Featured post: <%= ctx.makePostLink(ctx.featuredPost.id) %>, @@ -7,4 +8,3 @@ <%= ctx.makeUserLink(ctx.featuredPost.user) %> </aside> <% } %> -<div class='post-container'></div> diff --git a/client/html/home_footer.tpl b/client/html/home_footer.tpl new file mode 100644 index 0000000..47d25e8 --- /dev/null +++ b/client/html/home_footer.tpl @@ -0,0 +1,6 @@ +<%- ctx.postCount %> posts +<span class=sep>•</span> +<%= ctx.makeFileSize(ctx.diskUsage) %> +<span class=sep>•</span> +Build <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%- ctx.version %></a> +from <%= ctx.makeRelativeTime(ctx.buildDate) %> diff --git a/client/html/home_stats.tpl b/client/html/home_stats.tpl deleted file mode 100644 index cf2c379..0000000 --- a/client/html/home_stats.tpl +++ /dev/null @@ -1 +0,0 @@ -Serving <%- ctx.postCount %> posts (<%= ctx.makeFileSize(ctx.diskUsage) %>) diff --git a/client/js/views/home_view.js b/client/js/views/home_view.js index 827eaf9..a8d151b 100644 --- a/client/js/views/home_view.js +++ b/client/js/views/home_view.js @@ -10,20 +10,18 @@ const TagAutoCompleteControl = require('../controls/tag_auto_complete_control.js'); const template = views.getTemplate('home'); -const statsTemplate = views.getTemplate('home-stats'); +const footerTemplate = views.getTemplate('home-footer'); const featuredPostTemplate = views.getTemplate('home-featured-post'); class HomeView { constructor(ctx) { this._hostNode = document.getElementById('content-holder'); + this._ctx = ctx; const sourceNode = template(ctx); views.replaceContent(this._hostNode, sourceNode); if (this._formNode) { - this._formNode.querySelector('input[name=all-posts') - .addEventListener('click', e => this._evtAllPostsClick(e)); - this._tagAutoCompleteControl = new TagAutoCompleteControl( this._searchInputNode); this._formNode.addEventListener( @@ -41,7 +39,9 @@ class HomeView { } setStats(stats) { - views.replaceContent(this._statsContainerNode, statsTemplate(stats)); + views.replaceContent( + this._footerContainerNode, + footerTemplate(Object.assign({}, stats, this._ctx))); } setFeaturedPost(postInfo) { @@ -64,8 +64,8 @@ class HomeView { } } - get _statsContainerNode() { - return this._hostNode.querySelector('.stats-container'); + get _footerContainerNode() { + return this._hostNode.querySelector('.footer-container'); } get _postInfoContainerNode() { @@ -84,11 +84,6 @@ class HomeView { return this._formNode.querySelector('input[name=search-text]'); } - _evtAllPostsClick(e) { - e.preventDefault(); - router.show('/posts/'); - } - _evtFormSubmit(e) { e.preventDefault(); this._searchInputNode.blur(); |