ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/css: improve appearance on small screens

Browse source
This commit is contained in:
rr- 2016-08-27 20:08:58 +02:00
parent f63d024777
commit 02d631a65d
13 changed files with 172 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/build.js
View file

@ -29,7 +29,9 @@ function writeFile(path, content) {
} }
function getVersion() { function getVersion() {
return execSync('git describe --always --dirty --long --tags').toString(); return execSync('git describe --always --dirty --long --tags')
.toString()
.trim();
} }
function getConfig() { function getConfig() {

11
client/css/comment-control.styl
View file

@ -37,12 +37,12 @@
nav nav
vertical-align: middle !important vertical-align: middle !important
margin: 0 0.3em 0.5em 0 !important
&.buttons &.buttons
margin: 0 0.3em 0.5em 0 !important
float: left float: left
&.actions &.actions
float: left float: left
margin-top: 0.3em !important margin: 0.3em 0 0.5em 0 !important
.comment .comment
@ -64,17 +64,18 @@
display: inline-block display: inline-block
.body .body
width: 100% flex-grow: 1
header header
white-space: nowrap
line-height: 16pt line-height: 16pt
vertical-align: middle vertical-align: middle
margin-bottom: 0.5em margin-bottom: 0.5em
background: $top-navigation-color background: $top-navigation-color
padding: 0.2em 0.5em padding: 0.2em 0.5em
.nickname, .date, .score-container, .edit
margin-right: 2em
.date, .score-container, .edit, .delete .date, .score-container, .edit, .delete
margin-left: 2em
font-size: 95% font-size: 95%
.edit, .delete, .score-container a, .nickname a .edit, .delete, .score-container a, .nickname a
&:not(.inactive) &:not(.inactive)

18
client/css/comment-list-view.styl
View file

@ -6,17 +6,29 @@
margin: 1em 0 margin: 1em 0
padding: 0 padding: 0
@media (max-width: 700px)
&>li
margin-bottom: 5em
padding: 1vw
.post-thumbnail
margin-bottom: 1em
.thumbnail
width: 50vw
height: 33vw
@media (min-width: 700px)
&>li &>li
display: flex display: flex
margin-bottom: 2em margin-bottom: 2em
.post-thumbnail .post-thumbnail
float: left float: left
vertical-align: top
margin-right: 1em
.thumbnail .thumbnail
width: 12em width: 12em
height: 8em height: 8em
.post-thumbnail
vertical-align: top
margin-right: 1em
a a
display: inline-block display: inline-block

4
client/css/core-general.styl
View file

@ -147,8 +147,8 @@ a .access-key
.messages .messages
margin: 0 auto margin: 0 auto
width: 30em width: 100%
max-width: 100% max-width: 30em
.message .message
margin: 0 0 1em 0 margin: 0 0 1em 0
display: inline-block display: inline-block

19
client/css/home-view.styl
View file

@ -1,5 +1,6 @@
#home #home
text-align: center !important text-align: center !important
max-width: 100%
header header
margin-bottom: 1em margin-bottom: 1em
@ -21,6 +22,9 @@
width: auto width: auto
.sep .sep
margin: 0 0.75em margin: 0 0.75em
@media (max-width: 500px)
.sep, a
display: none
.post-container .post-container
margin-bottom: 2em margin-bottom: 2em
@ -35,11 +39,22 @@
aside aside
margin-bottom: 0.3em margin-bottom: 0.3em
font-size: 90% font-size: 90%
white-space: nowrap
footer footer
line-height: 100% line-height: 150%
font-size: 80% font-size: 80%
ul
padding: 0
text-align: center
li
display: inline
white-space: nowrap
.sep .sep
margin: 0 0.25em word-spacing: 1.1em
background-repeat: no-repeat
background-position: 50% 50%
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><circle cx='6' cy='6' r='2' fill='%23000000'/></svg>")
.thumbnail .thumbnail
margin-right: 0.4em margin-right: 0.4em

15
client/css/post-list-view.styl
View file

@ -99,19 +99,25 @@
outline: 3px solid $main-color outline: 3px solid $main-color
.post-list-header .post-list-header
white-space: nowrap
text-align: left
label label
display: none display: none
text-align: left
form form
width: auto width: auto
margin-bottom: 0.75em
* *
vertical-align: top vertical-align: top
input
margin-bottom: 0.25em
margin-right: 0.25em
input[name=search-text] input[name=search-text]
width: 25em width: 25em
max-width: 90vw
input[name=masstag] input[name=masstag]
width: 15em width: 12em
margin-left: 1em .masstag-hint
margin-right: 1em
.append .append
font-size: 0.95em font-size: 0.95em
color: $inactive-link-color color: $inactive-link-color
@ -123,6 +129,7 @@
display: none display: none
.safety .safety
margin-right: 0.25em
&.safety-safe &.safety-safe
background-color: $safety-safe background-color: $safety-safe
border-color: @background-color border-color: @background-color

13
client/css/post-view.styl
View file

@ -4,10 +4,11 @@
width: 100% width: 100%
display: flex !important display: flex !important
flex-direction: row flex-direction: row
>.sidebar >.sidebar
margin-right: 1em margin-right: 1em
max-width: 20em
min-width: 20em min-width: 20em
max-width: 20em
line-height: 160% line-height: 160%
a:active a:active
@ -42,6 +43,16 @@
.post-content .post-content
margin: 0 margin: 0
@media (max-width: 800px)
.post-view
flex-wrap: wrap
>.sidebar
order: 2
min-width: 100%
max-width: 0
>.content
order: 1
.post-view .readonly-sidebar .post-view .readonly-sidebar
.details .details

7
client/css/user-registration.styl
View file

@ -1,13 +1,16 @@
@import colors @import colors
#user-registration #user-registration
padding-bottom: calc(2vw - 1em) !important
form form
float: left float: left
margin-right: 3em
margin-bottom: 1em
.info .info
float: left float: left
margin-left: 3em
border-radius: 0.2em border-radius: 0.2em
width: 20em width: 20em
margin-bottom: 1em
ul ul
line-height: 1.8em line-height: 1.8em
list-style-type: none list-style-type: none
@ -22,3 +25,5 @@
color: $main-color color: $main-color
p:first-child p:first-child
margin: 0 0 0.5em 0 margin: 0 0 0.5em 0
p:last-child
margin-bottom: 0

58
client/html/comment.tpl
View file

@ -12,37 +12,45 @@
</div> </div>
<div class='body'> <div class='body'>
<header><!-- <header><%
--><span class='nickname'><!-- %><span class='nickname'><%
--><% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %><!-- %><% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %><%
--><a href='/user/<%- encodeURIComponent(ctx.comment.user.name) %>'><!-- %><a href='/user/<%- encodeURIComponent(ctx.comment.user.name) %>'><%
--><% } %><!-- %><% } %><%
--><%- ctx.comment.user ? ctx.comment.user.name : 'Deleted user' %><!-- %><%- ctx.comment.user ? ctx.comment.user.name : 'Deleted user' %><%
--><% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %><!-- %><% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %><%
--></a><!-- %></a><%
--><% } %><!-- %><% } %><%
--></span><!-- %></span><%
--><span class='date'><!-- %><wbr><%
--><%= ctx.makeRelativeTime(ctx.comment.creationTime) %><!--
--></span><!--
--><span class='score-container'></span><!-- %><span class='date'><%
%><%= ctx.makeRelativeTime(ctx.comment.creationTime) %><%
%></span><%
--><% if (ctx.canEditComment) { %><!-- %><wbr><%
--><a href class='edit'><!--
--><i class='fa fa-pencil'></i> edit<!--
--></a><!--
--><% } %><!--
--><% if (ctx.canDeleteComment) { %><!-- %><span class='score-container'></span><%
--><a href class='delete'><!--
--><i class='fa fa-remove'></i> delete<!-- %><wbr><%
--></a><!--
--><% } %><!-- %><% if (ctx.canEditComment) { %><%
--></header> %><a href class='edit'><%
%><i class='fa fa-pencil'></i> edit<%
%></a><%
%><% } %><%
%><wbr><%
%><% if (ctx.canDeleteComment) { %><%
%><a href class='delete'><%
%><i class='fa fa-remove'></i> delete<%
%></a><%
%><% } %><%
%></header>
<div class='comment-form-container'></div> <div class='comment-form-container'></div>
</div> </div>

7
client/html/home_featured_post.tpl
View file

@ -1,10 +1,7 @@
<div class='post-container'></div> <div class='post-container'></div>
<% if (ctx.featuredPost) { %> <% if (ctx.featuredPost) { %>
<aside> <aside>
Featured post: <%= ctx.makePostLink(ctx.featuredPost.id, true) %>, Featured&nbsp;post:&nbsp;<%= ctx.makePostLink(ctx.featuredPost.id, true) %>,<wbr>
posted posted&nbsp;<%= ctx.makeRelativeTime(ctx.featuredPost.creationTime) %>&nbsp;by&nbsp;<%= ctx.makeUserLink(ctx.featuredPost.user) %>
<%= ctx.makeRelativeTime(ctx.featuredPost.creationTime) %>
by
<%= ctx.makeUserLink(ctx.featuredPost.user) %>
</aside> </aside>
<% } %> <% } %>

17
client/html/home_footer.tpl
View file

@ -1,10 +1,7 @@
<%- ctx.postCount %> posts <ul>
<span class=sep>&bull;</span> <li><%- ctx.postCount %> posts</li><span class='sep'>
<%= ctx.makeFileSize(ctx.diskUsage) %> </span><li><%= ctx.makeFileSize(ctx.diskUsage) %></li><span class='sep'>
<span class=sep>&bull;</span> </span><li>Build <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%- ctx.version %></a> from <%= ctx.makeRelativeTime(ctx.buildDate) %></li><span class='sep'>
Build <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%- ctx.version %></a> </span><% if (ctx.canListSnapshots) { %><li><a href='/history'>History</a></li><span class='sep'>
from <%= ctx.makeRelativeTime(ctx.buildDate) %> </span><% } %>
<% if (ctx.canListSnapshots) { %> </ul>
<span class=sep>&bull;</span>
<a href='/history'>History</a>
<% } %>

49
client/html/posts_header.tpl
View file

@ -1,22 +1,27 @@
<div class='post-list-header'> <div class='post-list-header'><%
<form class='horizontal search'> %><form class='horizontal'><%
<%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %> %><%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %><%
<input class='mousetrap' type='submit' value='Search'/> %><wbr/><%
<input data-safety=safe type='button' class='mousetrap safety safety-safe <%- ctx.settings.listPosts.safe ? '' : 'disabled' %>'/> %><input class='mousetrap' type='submit' value='Search'/><%
<input data-safety=sketchy type='button' class='mousetrap safety safety-sketchy <%- ctx.settings.listPosts.sketchy ? '' : 'disabled' %>'/> %><wbr/><%
<input data-safety=unsafe type='button' class='mousetrap safety safety-unsafe <%- ctx.settings.listPosts.unsafe ? '' : 'disabled' %>'/> %><input data-safety=safe type='button' class='mousetrap safety safety-safe <%- ctx.settings.listPosts.safe ? '' : 'disabled' %>'/><%
<a class='mousetrap button append' href='/help/search/posts'>Syntax help</a> %><input data-safety=sketchy type='button' class='mousetrap safety safety-sketchy <%- ctx.settings.listPosts.sketchy ? '' : 'disabled' %>'/><%
</form> %><input data-safety=unsafe type='button' class='mousetrap safety safety-unsafe <%- ctx.settings.listPosts.unsafe ? '' : 'disabled' %>'/><%
<% if (ctx.canMassTag) { %> %><wbr/><%
<form class='masstag horizontal'> %><a class='mousetrap button append' href='/help/search/posts'>Syntax help</a><%
<% if (ctx.parameters.tag) { %> %><% if (ctx.canMassTag) { %><%
<span class='append'>Tagging with:</span> %><wbr/><%
<% } else { %> %><span class='masstag'><%
<a href class='mousetrap button append open-masstag'>Mass tag</a> %><% if (ctx.parameters.tag) { %><%
<% } %> %><span class='append masstag-hint'>Tagging with:</span><%
<%= ctx.makeTextInput({name: 'masstag', value: ctx.parameters.tag}) %> %><% } else { %><%
<input class='mousetrap start-tagging' type='submit' value='Start tagging'/> %><a href class='mousetrap button append open-masstag'>Mass tag</a><%
<a href class='mousetrap button append stop-tagging'>Stop tagging</a> %><% } %><%
</form> %><wbr/><%
<% } %> %><%= ctx.makeTextInput({name: 'masstag', value: ctx.parameters.tag}) %><%
</div> %><input class='mousetrap start-tagging' type='submit' value='Start tagging'/><%
%><a href class='mousetrap button append stop-tagging'>Stop tagging</a><%
%></span><%
%><% } %><%
%></form><%
%></div>

57
client/js/views/posts_header_view.js
View file

@ -26,7 +26,7 @@ class PostsHeaderView {
} }
keyboard.bind('q', () => { keyboard.bind('q', () => {
this._searchFormNode.querySelector('input').focus(); this._formNode.querySelector('input:first-of-type').focus();
}); });
keyboard.bind('p', () => { keyboard.bind('p', () => {
@ -41,52 +41,49 @@ class PostsHeaderView {
safetyButtonNode.addEventListener( safetyButtonNode.addEventListener(
'click', e => this._evtSafetyButtonClick(e)); 'click', e => this._evtSafetyButtonClick(e));
} }
this._searchFormNode.addEventListener( this._formNode.addEventListener(
'submit', e => this._evtSearchFormSubmit(e)); 'submit', e => this._evtFormSubmit(e));
if (this._massTagFormNode) { if (this._massTagInputNode) {
if (this._openMassTagLinkNode) { if (this._openMassTagLinkNode) {
this._openMassTagLinkNode.addEventListener( this._openMassTagLinkNode.addEventListener(
'click', e => this._evtMassTagClick(e)); 'click', e => this._evtMassTagClick(e));
} }
this._stopMassTagLinkNode.addEventListener( this._stopMassTagLinkNode.addEventListener(
'click', e => this._evtStopTaggingClick(e)); 'click', e => this._evtStopTaggingClick(e));
this._massTagFormNode.addEventListener( // this._massTagFormNode.addEventListener(
'submit', e => this._evtMassTagFormSubmit(e)); // 'submit', e => this._evtMassTagFormSubmit(e));
this._toggleMassTagVisibility(!!ctx.parameters.tag); this._toggleMassTagVisibility(!!ctx.parameters.tag);
} }
} }
_toggleMassTagVisibility(state) { _toggleMassTagVisibility(state) {
this._massTagFormNode.classList.toggle('active', state); this._formNode.querySelector('.masstag')
.classList.toggle('active', state);
} }
get _searchFormNode() { get _formNode() {
return this._hostNode.querySelector('form.search'); return this._hostNode.querySelector('form');
}
get _massTagFormNode() {
return this._hostNode.querySelector('form.masstag');
} }
get _safetyButtonNodes() { get _safetyButtonNodes() {
return this._hostNode.querySelectorAll('form.search .safety'); return this._hostNode.querySelectorAll('form .safety');
} }
get _queryInputNode() { get _queryInputNode() {
return this._hostNode.querySelector('form.search [name=search-text]'); return this._hostNode.querySelector('form [name=search-text]');
} }
get _massTagInputNode() { get _massTagInputNode() {
return this._hostNode.querySelector('form.masstag [type=text]'); return this._hostNode.querySelector('form [name=masstag]');
} }
get _openMassTagLinkNode() { get _openMassTagLinkNode() {
return this._hostNode.querySelector('form.masstag .open-masstag'); return this._hostNode.querySelector('form .open-masstag');
} }
get _stopMassTagLinkNode() { get _stopMassTagLinkNode() {
return this._hostNode.querySelector('form.masstag .stop-tagging'); return this._hostNode.querySelector('form .stop-tagging');
} }
_evtMassTagClick(e) { _evtMassTagClick(e) {
@ -113,23 +110,17 @@ class PostsHeaderView {
router.show(router.url); router.show(router.url);
} }
_evtSearchFormSubmit(e) { _evtFormSubmit(e) {
e.preventDefault(); e.preventDefault();
const text = this._queryInputNode.value; let params = {
this._queryInputNode.blur(); query: this._queryInputNode.value,
router.show('/posts/' + misc.formatUrlParameters({query: text}));
}
_evtMassTagFormSubmit(e) {
e.preventDefault();
const text = this._queryInputNode.value;
const tag = this._massTagInputNode.value;
this._massTagInputNode.blur();
router.show('/posts/' + misc.formatUrlParameters({
query: text,
tag: tag,
page: this._ctx.parameters.page, page: this._ctx.parameters.page,
})); };
if (this._massTagInputNode) {
params.tag = this._massTagInputNode.value;
this._massTagInputNode.blur();
}
router.show('/posts/' + misc.formatUrlParameters(params));
} }
} }