client/posts: show post relations

client/css/posts.styl

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

client/html/post_readonly_sidebar.tpl

@@ -1,3 +1,4 @@
+<div class='readonly-sidebar'>
     <article class='details'>
         <section class='download'>
             <a rel='external' href='<%- ctx.post.contentUrl %>'>
@@ -44,6 +45,25 @@
         </section>
     </article>
 
+    <% 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><!--
+                --><% } %><!--
+            --></ul>
+        </nav>
+    <% } %>
+
     <nav class='tags'>
         <h1>Tags (<%- ctx.post.tags.length %>)</h1>
         <ul><!--
@@ -53,7 +73,7 @@
                     --><a href='/tag/<%- encodeURIComponent(tag) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
                         --><i class='fa fa-tag'></i><!--
                     --><% } %><!--
-                --><% if (ctx.canListPosts) { %><!--
+                    --><% if (ctx.canViewTags) { %><!--
                         --></a><!--
                     --><% } %><!--
                     --><% if (ctx.canListPosts) { %><!--
@@ -68,3 +88,4 @@
             --><% } %><!--
         --></ul>
     </nav>
+</div>