client/home: show top nav after all, improve looks

client/css/home.styl

@@ -1,13 +1,28 @@
 #home
     text-align: center !important
 
-    h1
+    header
-        margin-top: 0
+        h1
-        margin-bottom: 0.5em
+            margin-top: 0
+            margin-bottom: 0.2em
+        aside
+            opacity: .5
+            font-size: 80%
+            margin-bottom: 2em
 
     .message
         margin-bottom: 2em
 
+    form
+        margin-bottom: 2em
+        width: auto
+        white-space: nowrap
+        input
+            width: auto
+        .separator
+            display: inline-block
+            margin: 0 1.5em
+
     .post-container
         display: flex
         align-items: center
@@ -18,15 +33,11 @@
         a
             padding: 0.5em
 
-    form
-        width: auto
-
     aside
-        margin-bottom: 0.5em
+        margin-bottom: 1em
         font-size: 90%
 
     footer
-        opacity: .5
+        margin-top: 1em
-        margin-top: 2em
         line-height: 100%
         font-size: 80%

client/html/home.tpl

@@ -2,59 +2,34 @@
     <div class='messages'></div>
     <header>
         <h1><%= ctx.name %></h1>
+        <aside>
+            Serving <%= ctx.postCount %> posts (<%= ctx.makeFileSize(ctx.diskUsage) %>)
+        </aside>
     </header>
-    <nav>
-        <ul>
-            <% if (ctx.canListPosts) { %>
-                <li><a href='/posts'><%= ctx.makeAccessKey('Posts', 'P') %></a></li>
-            <% } %>
-            <% if (ctx.canListComments) { %>
-                <li><a href='/comments'><%= ctx.makeAccessKey('Comments', 'C') %></a></li>
-            <% } %>
-            <% if (ctx.canListTags) { %>
-                <li><a href='/tags'><%= ctx.makeAccessKey('Tags', 'T') %></a></li>
-            <% } %>
-            <% if (ctx.canListUsers) { %>
-                <li><a href='/users'><%= ctx.makeAccessKey('Users', 'U') %></a></li>
-            <% } %>
-            <li><a href='/help'><%= ctx.makeAccessKey('Help', 'E') %></a></li>
-        </ul>
-    </nav>
     <% if (ctx.canListPosts) { %>
         <form class='horizontal'>
             <div class='input'>
-                <ul>
+                <%= ctx.makeButton({name: 'all-posts', value: 'Browse all posts'}) %>
-                    <li>
+                <span class='separator'>or</span>
-                        <%= ctx.makeTextInput({id: 'search-text', name: 'search-text'}) %>
+                <%= ctx.makeTextInput({name: 'search-text', placeholder: 'enter some tags'}) %>
-                    </li>
-                </ul>
             </div>
             <div class='buttons'>
                 <input type='submit' value='Search'/>
             </div>
         </form>
     <% } %>
-    <div class='post-container'></div>
     <% if (ctx.featuredPost) { %>
         <aside>
-            <%= ctx.makePostLink(ctx.featuredPost.id) %>
+            Featured post: <%= ctx.makePostLink(ctx.featuredPost.id) %>,
-            &bull;
+            posted
-            Featured
-            <%= ctx.makeRelativeTime(ctx.featuringTime) %>
-            by
-            <%= ctx.makeUserLink(ctx.featuringUser) %>
-            &bull;
-            Posted
             <%= ctx.makeRelativeTime(ctx.featuredPost.creationTime) %>
             by
             <%= ctx.makeUserLink(ctx.featuredPost.user) %>
         </aside>
     <% } %>
+    <div class='post-container'></div>
     <footer>
-        Serving <%= ctx.postCount %> posts (<%= ctx.makeFileSize(ctx.diskUsage) %>)
+        Build <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%= ctx.version %></a>
-        &bull;
+        from <%= ctx.makeRelativeTime(ctx.buildDate) %>
-        Running <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%= ctx.version %></a>
-        &bull;
-        Built <%= ctx.makeRelativeTime(ctx.buildDate) %>
     </footer>
 </div>

client/js/controllers/home_controller.js

@@ -25,9 +25,6 @@ class HomeController {
             .then(response => {
                 this._homeView.render({
                     canListPosts: api.hasPrivilege('posts:list'),
-                    canListComments: api.hasPrivilege('comments:list'),
-                    canListTags: api.hasPrivilege('tags:list'),
-                    canListUsers: api.hasPrivilege('users:list'),
                     diskUsage: response.diskUsage,
                     postCount: response.postCount,
                     featuredPost: response.featuredPost,
@@ -38,9 +35,6 @@ class HomeController {
             response => {
                 this._homeView.render({
                     canListPosts: api.hasPrivilege('posts:list'),
-                    canListComments: api.hasPrivilege('comments:list'),
-                    canListTags: api.hasPrivilege('tags:list'),
-                    canListUsers: api.hasPrivilege('users:list'),
                 });
                 events.notify(events.Error, response.description);
             });

client/js/util/views.js

@@ -108,6 +108,11 @@ function makeInput(options) {
             });
 }
 
+function makeButton(options) {
+    options.inputType = 'button';
+    return makeInput(options);
+}
+
 function makeTextInput(options) {
     options.inputType = 'text';
     return makeInput(options);
@@ -159,7 +164,8 @@ function makeTagLink(name) {
 function makeUserLink(user) {
     return makeNonVoidElement('span', {class: 'user'},
         makeThumbnail(user.avatarUrl) +
-        makeNonVoidElement('a', {'href': '/user/' + user.name}, user.name));
+        makeNonVoidElement(
+            'a', {'href': '/user/' + user.name}, '+' + user.name));
 }
 
 function makeFlexboxAlign(options) {
@@ -269,6 +275,7 @@ function getTemplate(templatePath) {
             makeCheckbox: makeCheckbox,
             makeSelect: makeSelect,
             makeInput: makeInput,
+            makeButton: makeButton,
             makeTextInput: makeTextInput,
             makePasswordInput: makePasswordInput,
             makeEmailInput: makeEmailInput,

client/js/views/home_view.js

@@ -29,7 +29,14 @@ class HomeView {
 
         const form = source.querySelector('form');
         if (form) {
-            const searchTextInput = form.querySelector('input');
+            form.querySelector('input[name=all-posts')
+                .addEventListener('click', e => {
+                    e.preventDefault();
+                    page('/posts/');
+                });
+
+            const searchTextInput = form.querySelector(
+                'input[name=search-text]');
             new TagAutoCompleteControl(searchTextInput);
             form.addEventListener('submit', e => {
                 e.preventDefault();

client/js/views/top_nav_view.js

@@ -16,22 +16,7 @@ class TopNavView {
         views.showView(this._navHolder, source);
     }
 
-    show() {
-        this._navHolder.style.visibility = 'initial';
-        this._navHolder.style.position = 'initial';
-    }
-
-    hide() {
-        this._navHolder.style.visibility = 'hidden';
-        this._navHolder.style.position = 'fixed';
-    }
-
     activate(itemName) {
-        if (itemName == 'home') {
-            this.hide();
-        } else {
-            this.show();
-        }
         const allItemsSelector = '#top-nav-holder [data-name]';
         const currentItemSelector =
             '#top-nav-holder [data-name="' + itemName + '"]';