Added tags in post view

This commit is contained in:
Marcin Kurczewski 2014-09-21 10:56:37 +02:00
parent 34f047de85
commit fa72060502
7 changed files with 135 additions and 37 deletions

3
TODO
View file

@ -3,9 +3,6 @@ first major release.
everything related to posts: everything related to posts:
- single post view - single post view
- post content
- post tags
- number of tag usages
- basic information - basic information
- uploader's picture - uploader's picture
- remember about support for anonymous uploads - remember about support for anonymous uploads

View file

@ -24,6 +24,7 @@ h2 {
padding: 0; padding: 0;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
max-width: 100%;
} }
a { a {

72
public_html/css/post.css Normal file
View file

@ -0,0 +1,72 @@
.post-type-image img,
.post-type-video video {
max-width: 100%;
}
.post-type-youtube iframe {
width: 800px;
height: 600px;
border: 0;
}
#post-view-wrapper #sidebar {
line-height: 1.33em;
font-size: 90%;
}
#post-view-wrapper #sidebar h1:first-of-type {
margin-top: 0;
}
@media all and (min-width: 62.5em) {
#post-view-wrapper {
display: flex;
}
#post-view-wrapper #sidebar {
min-width: 15em;
margin-right: 1em;
flex: 1;
}
#post-view-wrapper #post-view {
min-width: 40em;
flex: 5;
}
}
@media all and (max-width: 62.5em) {
#post-view-wrapper {
display: block;
}
#post-view-wrapper #sidebar {
order: 2;
margin-bottom: 1em;
}
#post-view-wrapper #post-view {
order: 1;
}
}
#post-view-wrapper #sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#sidebar .tags .tag-wrapper {
max-width: 100%;
position: relative;
display: inline-block;
}
#sidebar .tags li a {
display: block;
padding-left: 1em;
word-break: break-all;
text-indent: -1em;
}
#sidebar .tags li .usages {
color: silver;
padding-left: 0.5em;
}

View file

@ -30,6 +30,7 @@
<link rel="stylesheet" type="text/css" href="/css/user-list.css"/> <link rel="stylesheet" type="text/css" href="/css/user-list.css"/>
<link rel="stylesheet" type="text/css" href="/css/user.css"/> <link rel="stylesheet" type="text/css" href="/css/user.css"/>
<link rel="stylesheet" type="text/css" href="/css/post-list.css"/> <link rel="stylesheet" type="text/css" href="/css/post-list.css"/>
<link rel="stylesheet" type="text/css" href="/css/post.css"/>
<!-- /build --> <!-- /build -->
</head> </head>
@ -46,7 +47,6 @@
</div> </div>
</div> </div>
<div id="sidebar"></div>
<div id="content"></div> <div id="content"></div>
</div> </div>
</div> </div>

View file

@ -12,7 +12,8 @@ App.Presenters.PostPresenter = function(
var $el = jQuery('#content'); var $el = jQuery('#content');
var $messages = $el; var $messages = $el;
var template; var postTemplate;
var postContentTemplate;
var post; var post;
var postNameOrId; var postNameOrId;
@ -22,12 +23,15 @@ App.Presenters.PostPresenter = function(
promise.waitAll( promise.waitAll(
util.promiseTemplate('post'), util.promiseTemplate('post'),
util.promiseTemplate('post-content'),
api.get('/posts/' + postNameOrId)) api.get('/posts/' + postNameOrId))
.then(function( .then(function(
templatehtml, postTemplateHtml,
postContentTemplateHtml,
response) { response) {
$messages = $el.find('.messages'); $messages = $el.find('.messages');
template = _.template(templatehtml); postTemplate = _.template(postTemplateHtml);
postContentTemplate = _.template(postContentTemplateHtml);
post = response.json; post = response.json;
topNavigationPresenter.changeTitle('@' + post.id); topNavigationPresenter.changeTitle('@' + post.id);
@ -41,9 +45,10 @@ App.Presenters.PostPresenter = function(
} }
function render() { function render() {
$el.html(template({ $el.html(postTemplate({
post: post, post: post,
formatRelativeTime: util.formatRelativeTime, formatRelativeTime: util.formatRelativeTime,
postContentTemplate: postContentTemplate,
})); }));
} }

View file

@ -0,0 +1,34 @@
<% var postContentUrl = '/data/posts/' + post.name %>
<div class="post-type-<%= post.contentType %>">
<% if (post.contentType == 'image') { %>
<img alt="<%= post.name %>" src="<%= postContentUrl %>"/>
<% } else if (post.contentType == 'youtube') { %>
<iframe src="//www.youtube.com/embed/<%= post.contentChecksum %>?wmode=opaque" allowfullscreen></iframe>
<% } else if (post.contentType == 'flash') { %>
<object
type="<%= post.contentMimeType %>"
width="<%= post.imageWidth %>"
height="<%= post.imageHeight %>"
data="<%= postContentUrl %>">
<param name="wmode" value="opaque"/>
<param name="movie" value="<%= postContentUrl %>"/>
</object>
<% } else if (post.contentType == 'video') { %>
<video controls>
<source type="<%= post.contentMimeType %>" src="<%= postContentUrl %>"/>
Your browser doesn't support HTML5 videos.
</video>
<% } else { console.log(new Error('Unknown post type')) } %>
</div>

View file

@ -1,30 +1,19 @@
<% var postContentUrl = '/data/posts/' + post.name %> <div id="post-view-wrapper">
<div id="sidebar">
<h1>Tags (<%= _.size(post.tags) %>)</h1>
<ul class="tags">
<% _.each(post.tags, function(tag) { %>
<li>
<a href="#/posts/search=<%= tag.name %>">
<%= tag.name %>
<span class="usages"><%= (tag.usages) %></span>
</a>
</li>
<% }) %>
</ul>
</div>
<% if (post.contentType == 'image') { %> <div id="post-view">
<%= postContentTemplate({post: post}) %>
<img alt="<%= post.name %>" src="<%= postContentUrl %>"/> </div>
</div>
<% } else if (post.contentType == 'youtube') { %>
<iframe src="//www.youtube.com/embed/<%= post.contentChecksum %>?wmode=opaque" allowfullscreen></iframe>
<% } else if (post.contentType == 'flash') { %>
<object
type="<%= post.contentMimeType %>"
width="<%= post.imageWidth %>"
height="<%= post.imageHeight %>"
data="<%= postContentUrl %>">
<param name="wmode" value="opaque"/>
<param name="movie" value="<%= postContentUrl %>"/>
</object>
<% } else if (post.contentType == 'video') { %>
<video controls>
<source type="<%= post.contentMimeType %>" src="<%= postContentUrl %>"/>
Your browser doesn't support HTML5 videos.
</video>
<% } else { console.log(new Error('Unknown post type')) } %>