client/posts: show post relations
This commit is contained in:
rr-
parent
c472229bae
commit
83cc53be07
|
|
@ -36,61 +36,6 @@ $safety-unsafe = #F3985F
|
||||||
font-size: 140%
|
font-size: 140%
|
||||||
text-align: center
|
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
|
>.content
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
|
|
@ -259,3 +204,72 @@ $safety-unsafe = #F3985F
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
p:first-of-type
|
p:first-of-type
|
||||||
margin-top: 0
|
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%
|
||||||
|
|
|
||||||
|
|
@ -1,70 +1,91 @@
|
||||||
<article class='details'>
|
<div class='readonly-sidebar'>
|
||||||
<section class='download'>
|
<article class='details'>
|
||||||
<a rel='external' href='<%- ctx.post.contentUrl %>'>
|
<section class='download'>
|
||||||
<i class='fa fa-download'></i><!--
|
<a rel='external' href='<%- ctx.post.contentUrl %>'>
|
||||||
--><%= ctx.makeFileSize(ctx.post.fileSize) %> <!--
|
<i class='fa fa-download'></i><!--
|
||||||
--><%- {
|
--><%= ctx.makeFileSize(ctx.post.fileSize) %> <!--
|
||||||
'image/gif': 'GIF',
|
--><%- {
|
||||||
'image/jpeg': 'JPEG',
|
'image/gif': 'GIF',
|
||||||
'image/png': 'PNG',
|
'image/jpeg': 'JPEG',
|
||||||
'video/webm': 'WEBM',
|
'image/png': 'PNG',
|
||||||
'application/x-shockwave-flash': 'SWF',
|
'video/webm': 'WEBM',
|
||||||
}[ctx.post.mimeType] %>
|
'application/x-shockwave-flash': 'SWF',
|
||||||
</a>
|
}[ctx.post.mimeType] %>
|
||||||
(<%- ctx.post.canvasWidth %>x<%- ctx.post.canvasHeight %>)
|
</a>
|
||||||
</section>
|
(<%- ctx.post.canvasWidth %>x<%- ctx.post.canvasHeight %>)
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class='upload-info'>
|
<section class='upload-info'>
|
||||||
<%= ctx.makeUserLink(ctx.post.user) %>,
|
<%= ctx.makeUserLink(ctx.post.user) %>,
|
||||||
<%= ctx.makeRelativeTime(ctx.post.creationTime) %>
|
<%= ctx.makeRelativeTime(ctx.post.creationTime) %>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class='safety'>
|
<section class='safety'>
|
||||||
<i class='fa fa-circle safety-<%- ctx.post.safety %>'></i><!--
|
<i class='fa fa-circle safety-<%- ctx.post.safety %>'></i><!--
|
||||||
--><%- ctx.post.safety[0].toUpperCase() + ctx.post.safety.slice(1) %>
|
--><%- ctx.post.safety[0].toUpperCase() + ctx.post.safety.slice(1) %>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class='zoom'>
|
<section class='zoom'>
|
||||||
<a class='fit-original' href='#'>Original zoom</a> ·
|
<a class='fit-original' href='#'>Original zoom</a> ·
|
||||||
<a class='fit-width' href='#'>fit width</a> ·
|
<a class='fit-width' href='#'>fit width</a> ·
|
||||||
<a class='fit-height' href='#'>height</a> ·
|
<a class='fit-height' href='#'>height</a> ·
|
||||||
<a class='fit-both' href='#'>both</a>
|
<a class='fit-both' href='#'>both</a>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class='search'>
|
<section class='search'>
|
||||||
Search on
|
Search on
|
||||||
<a href='http://iqdb.org/?url=<%- encodeURIComponent(ctx.post.contentUrl) %>'>IQDB</a> ·
|
<a href='http://iqdb.org/?url=<%- encodeURIComponent(ctx.post.contentUrl) %>'>IQDB</a> ·
|
||||||
<a href='https://www.google.com/searchbyimage?&image_url=<%- encodeURIComponent(ctx.post.contentUrl) %>'>Google Images</a>
|
<a href='https://www.google.com/searchbyimage?&image_url=<%- encodeURIComponent(ctx.post.contentUrl) %>'>Google Images</a>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class='social'>
|
<section class='social'>
|
||||||
<div class='score-container'></div>
|
<div class='score-container'></div>
|
||||||
|
|
||||||
<div class='fav-container'></div>
|
<div class='fav-container'></div>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<nav class='tags'>
|
<% if (ctx.post.relations.length) { %>
|
||||||
<h1>Tags (<%- ctx.post.tags.length %>)</h1>
|
<nav class='relations'>
|
||||||
<ul><!--
|
<h1>Relations (<%- ctx.post.relations.length %>)</h1>
|
||||||
--><% for (let tag of ctx.post.tags) { %><!--
|
<ul><!--
|
||||||
--><li><!--
|
--><% for (let post of ctx.post.relations) { %><!--
|
||||||
--><% if (ctx.canViewTags) { %><!--
|
--><li><!--
|
||||||
--><a href='/tag/<%- encodeURIComponent(tag) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
|
--><% if (ctx.searchQuery && ctx.searchQuery.text) { %><!--
|
||||||
--><i class='fa fa-tag'></i><!--
|
--><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) { %><!--
|
--></ul>
|
||||||
--></a><!--
|
</nav>
|
||||||
--><% } %><!--
|
<% } %>
|
||||||
--><% if (ctx.canListPosts) { %><!--
|
|
||||||
--><a href='/posts/text=<%- encodeURIComponent(tag) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
|
<nav class='tags'>
|
||||||
--><% } %><!--
|
<h1>Tags (<%- ctx.post.tags.length %>)</h1>
|
||||||
--><%- tag %><!--
|
<ul><!--
|
||||||
--><% if (ctx.canListPosts) { %><!--
|
--><% for (let tag of ctx.post.tags) { %><!--
|
||||||
--></a><!--
|
--><li><!--
|
||||||
--><% } %><!--
|
--><% if (ctx.canViewTags) { %><!--
|
||||||
--><span class='count'><%- ctx.getTagUsages(tag) %></span><!--
|
--><a href='/tag/<%- encodeURIComponent(tag) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
|
||||||
--></li><!--
|
--><i class='fa fa-tag'></i><!--
|
||||||
--><% } %><!--
|
--><% } %><!--
|
||||||
--></ul>
|
--><% if (ctx.canViewTags) { %><!--
|
||||||
</nav>
|
--></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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue