client/home: change apparance

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

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>

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>

client/html/home_footer.tpl

@@ -0,0 +1,6 @@
+<%- ctx.postCount %> posts
+<span class=sep>&bull;</span>
+<%= ctx.makeFileSize(ctx.diskUsage) %>
+<span class=sep>&bull;</span>
+Build <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%- ctx.version %></a>
+from <%= ctx.makeRelativeTime(ctx.buildDate) %>

client/html/home_stats.tpl

@@ -1 +0,0 @@
-Serving <%- ctx.postCount %> posts (<%= ctx.makeFileSize(ctx.diskUsage) %>)

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();