Improved post view on small layout
- post notes no longer disappear - post image is larger - sidebar stacks into columns - things from sidebar are centered
This commit is contained in:
rr-
parent
1969f0e3fa
commit
37eabe1556
2 changed files with 188 additions and 182 deletions
|
|
@ -22,12 +22,9 @@
|
|||
line-height: 1.33em;
|
||||
}
|
||||
|
||||
#post-view-wrapper #sidebar h1 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
#post-view-wrapper #sidebar h1:first-of-type {
|
||||
margin-top: 0;
|
||||
#post-view-wrapper #sidebar .box {
|
||||
margin-bottom: 1.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media all and (min-width: 62.5em) {
|
||||
|
|
@ -59,10 +56,16 @@
|
|||
#post-view-wrapper #sidebar {
|
||||
order: 2;
|
||||
margin-bottom: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
#post-view-wrapper #sidebar .box {
|
||||
display: inline-block;
|
||||
width: 15em;
|
||||
vertical-align: top;
|
||||
}
|
||||
#post-view-wrapper #post-view {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -131,7 +134,6 @@
|
|||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 2em;
|
||||
max-width: 30em;
|
||||
}
|
||||
#sidebar .essential li {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -81,203 +81,207 @@ if (forceHttpInPermalinks > 0) {
|
|||
<% } %>
|
||||
</ul>
|
||||
|
||||
<h1>Tags (<%= _.size(post.tags) %>)</h1>
|
||||
<ul class="tags">
|
||||
<% _.each(post.tags, function(tag) { %>
|
||||
<li class="tag-category-<%= tag.category %>"><!--
|
||||
--><a class="tag-edit" href="#/tag/<%= tag.name %>"><!--
|
||||
--><i class="fa fa-tag"></i><!--
|
||||
--></a><!--
|
||||
<div class="box">
|
||||
<h1>Tags (<%= _.size(post.tags) %>)</h1>
|
||||
<ul class="tags">
|
||||
<% _.each(post.tags, function(tag) { %>
|
||||
<li class="tag-category-<%= tag.category %>"><!--
|
||||
--><a class="tag-edit" href="#/tag/<%= tag.name %>"><!--
|
||||
--><i class="fa fa-tag"></i><!--
|
||||
--></a><!--
|
||||
|
||||
--><a class="post-search" href="#/posts/query=<%= tag.name %>"><!--
|
||||
--><span class="tag-name"><%= tag.name %></span><!--
|
||||
--><span class="usages"><%= (tag.usages) %></span>
|
||||
</a>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
|
||||
<h1>Details</h1>
|
||||
|
||||
<div class="author-box">
|
||||
<% if (post.user.name) { %>
|
||||
<a href="#/user/<%= post.user.name %>">
|
||||
<% } %>
|
||||
|
||||
<img width="40" height="40" class="author-avatar"
|
||||
src="/data/thumbnails/40x40/avatars/<%= post.user.name || '!' %>"
|
||||
alt="<%= post.user.name || 'Anonymous user' %>"/>
|
||||
|
||||
<span class="author-name">
|
||||
<%= post.user.name || 'Anonymous user' %>
|
||||
</span>
|
||||
|
||||
<% if (post.user.name) { %>
|
||||
</a>
|
||||
<% } %>
|
||||
|
||||
<br/>
|
||||
|
||||
<span class="date" title="<%= util.formatAbsoluteTime(post.uploadTime) %>">
|
||||
<%= util.formatRelativeTime(post.uploadTime) %>
|
||||
</span>
|
||||
--><a class="post-search" href="#/posts/query=<%= tag.name %>"><!--
|
||||
--><span class="tag-name"><%= tag.name %></span><!--
|
||||
--><span class="usages"><%= (tag.usages) %></span>
|
||||
</a>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="other-info">
|
||||
<div class="box">
|
||||
<h1>Details</h1>
|
||||
<div class="author-box">
|
||||
<% if (post.user.name) { %>
|
||||
<a href="#/user/<%= post.user.name %>">
|
||||
<% } %>
|
||||
|
||||
<li>
|
||||
Rating:
|
||||
<span class="safety-<%= post.safety %>">
|
||||
<%= post.safety %>
|
||||
<img width="40" height="40" class="author-avatar"
|
||||
src="/data/thumbnails/40x40/avatars/<%= post.user.name || '!' %>"
|
||||
alt="<%= post.user.name || 'Anonymous user' %>"/>
|
||||
|
||||
<span class="author-name">
|
||||
<%= post.user.name || 'Anonymous user' %>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<% if (post.originalFileSize) { %>
|
||||
<li>
|
||||
File size:
|
||||
<%= util.formatFileSize(post.originalFileSize) %>
|
||||
</li>
|
||||
<% } %>
|
||||
<% if (post.user.name) { %>
|
||||
</a>
|
||||
<% } %>
|
||||
|
||||
<% if (post.contentType == 'image') { %>
|
||||
<li>
|
||||
Image size:
|
||||
<%= post.imageWidth + 'x' + post.imageHeight %>
|
||||
</li>
|
||||
<% } %>
|
||||
<br/>
|
||||
|
||||
<% if (post.lastEditTime !== post.uploadTime) { %>
|
||||
<span class="date" title="<%= util.formatAbsoluteTime(post.uploadTime) %>">
|
||||
<%= util.formatRelativeTime(post.uploadTime) %>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul class="other-info">
|
||||
<li>
|
||||
Edited:
|
||||
<span title="<%= util.formatAbsoluteTime(post.lastEditTime) %>">
|
||||
<%= util.formatRelativeTime(post.lastEditTime) %>
|
||||
Rating:
|
||||
<span class="safety-<%= post.safety %>">
|
||||
<%= post.safety %>
|
||||
</span>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (post.featureCount > 0) { %>
|
||||
<li>
|
||||
Featured: <%= post.featureCount %> <%= post.featureCount < 2 ? 'time' : 'times' %>
|
||||
<small>(<%= util.formatRelativeTime(post.lastFeatureTime) %>)</small>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (post.source) { %>
|
||||
<li><!--
|
||||
--><% var link = post.source.match(/^(\/\/|https?:\/\/)/); %><!--
|
||||
-->Source: <!--
|
||||
--><% if (link) { %><!--
|
||||
--><a href="<%= post.source %>"><!--
|
||||
--><% } %><!--
|
||||
--><%= post.source.trim() %><!--
|
||||
--><% if (link) { %><!--
|
||||
--></a><!--
|
||||
--><% } %><!--
|
||||
--></li>
|
||||
<% } %>
|
||||
|
||||
<li>
|
||||
Score: <%= post.score %>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<% if (_.any(postFavorites)) { %>
|
||||
<p>Favorites:</p>
|
||||
|
||||
<ul class="favorites">
|
||||
<% _.each(postFavorites, function(user) { %>
|
||||
<% if (post.originalFileSize) { %>
|
||||
<li>
|
||||
<a href="#/user/<%= user.name %>">
|
||||
<img class="fav-avatar"
|
||||
src="/data/thumbnails/25x25/avatars/<%= user.name || '!' %>"
|
||||
alt="<%= user.name || 'Anonymous user' %>"/>
|
||||
</a>
|
||||
File size:
|
||||
<%= util.formatFileSize(post.originalFileSize) %>
|
||||
</li>
|
||||
<% }) %>
|
||||
<% } %>
|
||||
|
||||
<% if (post.contentType == 'image') { %>
|
||||
<li>
|
||||
Image size:
|
||||
<%= post.imageWidth + 'x' + post.imageHeight %>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (post.lastEditTime !== post.uploadTime) { %>
|
||||
<li>
|
||||
Edited:
|
||||
<span title="<%= util.formatAbsoluteTime(post.lastEditTime) %>">
|
||||
<%= util.formatRelativeTime(post.lastEditTime) %>
|
||||
</span>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (post.featureCount > 0) { %>
|
||||
<li>
|
||||
Featured: <%= post.featureCount %> <%= post.featureCount < 2 ? 'time' : 'times' %>
|
||||
<small>(<%= util.formatRelativeTime(post.lastFeatureTime) %>)</small>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (post.source) { %>
|
||||
<li><!--
|
||||
--><% var link = post.source.match(/^(\/\/|https?:\/\/)/); %><!--
|
||||
-->Source: <!--
|
||||
--><% if (link) { %><!--
|
||||
--><a href="<%= post.source %>"><!--
|
||||
--><% } %><!--
|
||||
--><%= post.source.trim() %><!--
|
||||
--><% if (link) { %><!--
|
||||
--></a><!--
|
||||
--><% } %><!--
|
||||
--></li>
|
||||
<% } %>
|
||||
|
||||
<li>
|
||||
Score: <%= post.score %>
|
||||
</li>
|
||||
</ul>
|
||||
<% } %>
|
||||
|
||||
<% if (_.any(postFavorites)) { %>
|
||||
<p>Favorites:</p>
|
||||
|
||||
<ul class="favorites">
|
||||
<% _.each(postFavorites, function(user) { %>
|
||||
<li>
|
||||
<a href="#/user/<%= user.name %>">
|
||||
<img class="fav-avatar"
|
||||
src="/data/thumbnails/25x25/avatars/<%= user.name || '!' %>"
|
||||
alt="<%= user.name || 'Anonymous user' %>"/>
|
||||
</a>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<% if (_.any(post.relations)) { %>
|
||||
<h1>Related posts</h1>
|
||||
<ul class="related">
|
||||
<% _.each(post.relations, function(relatedPost) { %>
|
||||
<li>
|
||||
<a href="#/post/<%= relatedPost.id %>">
|
||||
<%= relatedPost.idMarkdown %>
|
||||
</a>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
<div class="box">
|
||||
<h1>Related posts</h1>
|
||||
<ul class="related">
|
||||
<% _.each(post.relations, function(relatedPost) { %>
|
||||
<li>
|
||||
<a href="#/post/<%= relatedPost.id %>">
|
||||
<%= relatedPost.idMarkdown %>
|
||||
</a>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<% if (_.any(privileges) || _.any(editPrivileges) || post.contentType === 'image') { %>
|
||||
<h1>Options</h1>
|
||||
<div class="box">
|
||||
<h1>Options</h1>
|
||||
<ul class="operations">
|
||||
<% if (_.any(editPrivileges)) { %>
|
||||
<li>
|
||||
<a class="edit" href="#">
|
||||
Edit
|
||||
</a>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<ul class="operations">
|
||||
<% if (_.any(editPrivileges)) { %>
|
||||
<li>
|
||||
<a class="edit" href="#">
|
||||
Edit
|
||||
</a>
|
||||
<% if (privileges.canAddPostNotes) { %>
|
||||
<li>
|
||||
<a class="add-note" href="#">
|
||||
Add new note
|
||||
</a>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (privileges.canDeletePosts) { %>
|
||||
<li>
|
||||
<a class="delete" href="#">
|
||||
Delete
|
||||
</a>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (privileges.canFeaturePosts) { %>
|
||||
<li>
|
||||
<a class="feature" href="#">
|
||||
Feature
|
||||
</a>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (privileges.canViewHistory) { %>
|
||||
<li>
|
||||
<a class="history" href="#">
|
||||
History
|
||||
</a>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (post.contentType === 'image') { %>
|
||||
<li>
|
||||
<a href="http://iqdb.org/?url=<%= permaLink %>">
|
||||
Search on IQDB
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://www.google.com/searchbyimage?&image_url=<%= permaLink %>">
|
||||
Search on Google Images
|
||||
</a>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<li class="fit-mode">
|
||||
Fit:
|
||||
<a data-fit-mode="fit-width" href="#">width</a>,
|
||||
<a data-fit-mode="fit-height" href="#">height</a>,
|
||||
<a data-fit-mode="fit-both" href="#">both</a>,
|
||||
<a data-fit-mode="original" href="#">original</a>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (privileges.canAddPostNotes) { %>
|
||||
<li>
|
||||
<a class="add-note" href="#">
|
||||
Add new note
|
||||
</a>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (privileges.canDeletePosts) { %>
|
||||
<li>
|
||||
<a class="delete" href="#">
|
||||
Delete
|
||||
</a>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (privileges.canFeaturePosts) { %>
|
||||
<li>
|
||||
<a class="feature" href="#">
|
||||
Feature
|
||||
</a>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (privileges.canViewHistory) { %>
|
||||
<li>
|
||||
<a class="history" href="#">
|
||||
History
|
||||
</a>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (post.contentType === 'image') { %>
|
||||
<li>
|
||||
<a href="http://iqdb.org/?url=<%= permaLink %>">
|
||||
Search on IQDB
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://www.google.com/searchbyimage?&image_url=<%= permaLink %>">
|
||||
Search on Google Images
|
||||
</a>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<li class="fit-mode">
|
||||
Fit:
|
||||
<a data-fit-mode="fit-width" href="#">width</a>,
|
||||
<a data-fit-mode="fit-height" href="#">height</a>,
|
||||
<a data-fit-mode="fit-both" href="#">both</a>,
|
||||
<a data-fit-mode="original" href="#">original</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="post-view">
|
||||
|
|
|
|||
Loading…
Reference in a new issue