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

client/posts: show post relations

Browse source
This commit is contained in:
rr- 2016-07-03 13:46:20 +02:00
parent c472229bae
commit 83cc53be07
2 changed files with 152 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
client/css/posts.styl
View file

@ -36,61 +36,6 @@ $safety-unsafe = #F3985F
font-size: 140%
text-align: center
.details
i
margin-right: 0.6em
display: inline-block
width: 1em
text-align: center
.safety-safe
color: $safety-safe
.safety-sketchy
color: $safety-sketchy
.safety-unsafe
color: $safety-unsafe
.upload-info
.thumbnail
width: 1em
height: 1em
margin: -0.1em 0.6em 0 0
.zoom
margin-top: 1em
a
display: inline-block
.active
text-decoration: underline
.social
margin-top: 1em
.score-container
float: left
margin-right: 3em
.downvote i
text-align: right
i
text-align: left
margin: 0
.value
text-align: center
display: inline-block
width: 2em
.tags
margin-top: 2em
line-height: 130%
word-break: break-all
h1
margin-bottom: 0.5em
i
padding-right: 0.4em
.count
color: $inactive-link-color
padding-left: 0.7em
font-size: 90%
>.content
width: 100%
@ -259,3 +204,72 @@ $safety-unsafe = #F3985F
margin-bottom: 0
p:first-of-type
margin-top: 0
.post-view .readonly-sidebar
.details
i
margin-right: 0.6em
display: inline-block
width: 1em
text-align: center
.safety-safe
color: $safety-safe
.safety-sketchy
color: $safety-sketchy
.safety-unsafe
color: $safety-unsafe
.upload-info
.thumbnail
width: 1em
height: 1em
margin: -0.1em 0.6em 0 0
.zoom
margin-top: 1em
a
display: inline-block
.active
text-decoration: underline
.social
margin-top: 1em
.score-container
float: left
margin-right: 3em
.downvote i
text-align: right
i
text-align: left
margin: 0
.value
text-align: center
display: inline-block
width: 2em
.relations
margin-top: 2em
h1
margin-bottom: 0.5em
.thumbnail
background-position: 50% 30%
width: 4em
height: 3em
margin: 0
li
margin: 0 0.3em 0.3em 0
display: inline-block
.tags
margin-top: 2em
line-height: 130%
word-break: break-all
h1
margin-bottom: 0.5em
i
padding-right: 0.4em
.count
color: $inactive-link-color
padding-left: 0.7em
font-size: 90%

145
client/html/post_readonly_sidebar.tpl
View file

@ -1,70 +1,91 @@
<article class='details'>
<section class='download'>
<a rel='external' href='<%- ctx.post.contentUrl %>'>
<i class='fa fa-download'></i><!--
--><%= ctx.makeFileSize(ctx.post.fileSize) %> <!--
--><%- {
'image/gif': 'GIF',
'image/jpeg': 'JPEG',
'image/png': 'PNG',
'video/webm': 'WEBM',
'application/x-shockwave-flash': 'SWF',
}[ctx.post.mimeType] %>
</a>
(<%- ctx.post.canvasWidth %>x<%- ctx.post.canvasHeight %>)
</section>
<div class='readonly-sidebar'>
<article class='details'>
<section class='download'>
<a rel='external' href='<%- ctx.post.contentUrl %>'>
<i class='fa fa-download'></i><!--
--><%= ctx.makeFileSize(ctx.post.fileSize) %> <!--
--><%- {
'image/gif': 'GIF',
'image/jpeg': 'JPEG',
'image/png': 'PNG',
'video/webm': 'WEBM',
'application/x-shockwave-flash': 'SWF',
}[ctx.post.mimeType] %>
</a>
(<%- ctx.post.canvasWidth %>x<%- ctx.post.canvasHeight %>)
</section>
<section class='upload-info'>
<%= ctx.makeUserLink(ctx.post.user) %>,
<%= ctx.makeRelativeTime(ctx.post.creationTime) %>
</section>
<section class='upload-info'>
<%= ctx.makeUserLink(ctx.post.user) %>,
<%= ctx.makeRelativeTime(ctx.post.creationTime) %>
</section>
<section class='safety'>
<i class='fa fa-circle safety-<%- ctx.post.safety %>'></i><!--
--><%- ctx.post.safety[0].toUpperCase() + ctx.post.safety.slice(1) %>
</section>
<section class='safety'>
<i class='fa fa-circle safety-<%- ctx.post.safety %>'></i><!--
--><%- ctx.post.safety[0].toUpperCase() + ctx.post.safety.slice(1) %>
</section>
<section class='zoom'>
<a class='fit-original' href='#'>Original zoom</a> &middot;
<a class='fit-width' href='#'>fit width</a> &middot;
<a class='fit-height' href='#'>height</a> &middot;
<a class='fit-both' href='#'>both</a>
</section>
<section class='zoom'>
<a class='fit-original' href='#'>Original zoom</a> &middot;
<a class='fit-width' href='#'>fit width</a> &middot;
<a class='fit-height' href='#'>height</a> &middot;
<a class='fit-both' href='#'>both</a>
</section>
<section class='search'>
Search on
<a href='http://iqdb.org/?url=<%- encodeURIComponent(ctx.post.contentUrl) %>'>IQDB</a> &middot;
<a href='https://www.google.com/searchbyimage?&image_url=<%- encodeURIComponent(ctx.post.contentUrl) %>'>Google Images</a>
</section>
<section class='search'>
Search on
<a href='http://iqdb.org/?url=<%- encodeURIComponent(ctx.post.contentUrl) %>'>IQDB</a> &middot;
<a href='https://www.google.com/searchbyimage?&image_url=<%- encodeURIComponent(ctx.post.contentUrl) %>'>Google Images</a>
</section>
<section class='social'>
<div class='score-container'></div>
<section class='social'>
<div class='score-container'></div>
<div class='fav-container'></div>
</section>
</article>
<div class='fav-container'></div>
</section>
</article>
<nav class='tags'>
<h1>Tags (<%- ctx.post.tags.length %>)</h1>
<ul><!--
--><% for (let tag of ctx.post.tags) { %><!--
--><li><!--
--><% if (ctx.canViewTags) { %><!--
--><a href='/tag/<%- encodeURIComponent(tag) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
--><i class='fa fa-tag'></i><!--
<% if (ctx.post.relations.length) { %>
<nav class='relations'>
<h1>Relations (<%- ctx.post.relations.length %>)</h1>
<ul><!--
--><% for (let post of ctx.post.relations) { %><!--
--><li><!--
--><% if (ctx.searchQuery && ctx.searchQuery.text) { %><!--
--><a href='/post/<%- encodeURIComponent(post.id) %>/text=<%- encodeURIComponent(ctx.searchQuery.text) %>'><!--
--><% } else { %><!--
--><a href='/post/<%- encodeURIComponent(post.id) %>'><!--
--><% } %><!--
--><%= ctx.makeThumbnail(post.thumbnailUrl) %><!--
--></a><!--
--></li><!--
--><% } %><!--
--><% if (ctx.canListPosts) { %><!--
--></a><!--
--><% } %><!--
--><% if (ctx.canListPosts) { %><!--
--><a href='/posts/text=<%- encodeURIComponent(tag) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
--><% } %><!--
--><%- tag %><!--
--><% if (ctx.canListPosts) { %><!--
--></a><!--
--><% } %><!--
--><span class='count'><%- ctx.getTagUsages(tag) %></span><!--
--></li><!--
--><% } %><!--
--></ul>
</nav>
--></ul>
</nav>
<% } %>
<nav class='tags'>
<h1>Tags (<%- ctx.post.tags.length %>)</h1>
<ul><!--
--><% for (let tag of ctx.post.tags) { %><!--
--><li><!--
--><% if (ctx.canViewTags) { %><!--
--><a href='/tag/<%- encodeURIComponent(tag) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
--><i class='fa fa-tag'></i><!--
--><% } %><!--
--><% if (ctx.canViewTags) { %><!--
--></a><!--
--><% } %><!--
--><% if (ctx.canListPosts) { %><!--
--><a href='/posts/text=<%- encodeURIComponent(tag) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
--><% } %><!--
--><%- tag %><!--
--><% if (ctx.canListPosts) { %><!--
--></a><!--
--><% } %><!--
--><span class='count'><%- ctx.getTagUsages(tag) %></span><!--
--></li><!--
--><% } %><!--
--></ul>
</nav>
</div>