Accords-Library-Archive
/
gallery.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
rr- 2016-06-01 21:31:15 +02:00
parent 446f4d6611
commit fd2df3966d
6 changed files with 47 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client/css/home.styl
View File

@ -1,13 +1,28 @@
#home
text-align: center !important
header
h1
margin-top: 0
margin-bottom: 0.5em
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%

47
client/html/home.tpl
View File

@ -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>
<li>
<%= ctx.makeTextInput({id: 'search-text', name: 'search-text'}) %>
</li>
</ul>
<%= 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>
</form>
<% } %>
<div class='post-container'></div>
<% if (ctx.featuredPost) { %>
<aside>
<%= ctx.makePostLink(ctx.featuredPost.id) %>
&bull;
Featured
<%= ctx.makeRelativeTime(ctx.featuringTime) %>
by
<%= ctx.makeUserLink(ctx.featuringUser) %>
&bull;
Posted
Featured post: <%= ctx.makePostLink(ctx.featuredPost.id) %>,
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) %>)
&bull;
Running <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%= ctx.version %></a>
&bull;
Built <%= ctx.makeRelativeTime(ctx.buildDate) %>
Build <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%= ctx.version %></a>
from <%= ctx.makeRelativeTime(ctx.buildDate) %>
</footer>
</div>

6
client/js/controllers/home_controller.js
View File

@ -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);
});

9
client/js/util/views.js
View File

@ -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,

9
client/js/views/home_view.js
View File

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

15
client/js/views/top_nav_view.js
View File

@ -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 + '"]';