From fd2df3966db973f0b82f96cacfa65d74bb5f39d8 Mon Sep 17 00:00:00 2001 From: rr- Date: Wed, 1 Jun 2016 21:31:15 +0200 Subject: [PATCH] client/home: show top nav after all, improve looks --- client/css/home.styl | 29 ++++++++++----- client/html/home.tpl | 47 ++++++------------------ client/js/controllers/home_controller.js | 6 --- client/js/util/views.js | 9 ++++- client/js/views/home_view.js | 9 ++++- client/js/views/top_nav_view.js | 15 -------- 6 files changed, 47 insertions(+), 68 deletions(-) diff --git a/client/css/home.styl b/client/css/home.styl index 59d54e7..bf920e5 100644 --- a/client/css/home.styl +++ b/client/css/home.styl @@ -1,13 +1,28 @@ #home text-align: center !important - h1 - margin-top: 0 - margin-bottom: 0.5em + header + h1 + 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: 2em + margin-top: 1em line-height: 100% font-size: 80% diff --git a/client/html/home.tpl b/client/html/home.tpl index 5b46bc2..69c58fe 100644 --- a/client/html/home.tpl +++ b/client/html/home.tpl @@ -2,59 +2,34 @@

<%= ctx.name %>

+
- <% if (ctx.canListPosts) { %>
-
    -
  • - <%= ctx.makeTextInput({id: 'search-text', name: 'search-text'}) %> -
    • -
+ <%= ctx.makeButton({name: 'all-posts', value: 'Browse all posts'}) %> + or + <%= ctx.makeTextInput({name: 'search-text', placeholder: 'enter some tags'}) %>
<% } %> -
<% if (ctx.featuredPost) { %> <% } %> +
diff --git a/client/js/controllers/home_controller.js b/client/js/controllers/home_controller.js index 11aa110..81777ec 100644 --- a/client/js/controllers/home_controller.js +++ b/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); }); diff --git a/client/js/util/views.js b/client/js/util/views.js index 10e6b5c..f187c4c 100644 --- a/client/js/util/views.js +++ b/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, diff --git a/client/js/views/home_view.js b/client/js/views/home_view.js index 7b20f3b..c945d74 100644 --- a/client/js/views/home_view.js +++ b/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(); diff --git a/client/js/views/top_nav_view.js b/client/js/views/top_nav_view.js index ac8c17b..78defb1 100644 --- a/client/js/views/top_nav_view.js +++ b/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 + '"]';