Added tags in post view

TODO

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

public_html/css/core.css

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

public_html/css/post.css

@@ -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;
+}

public_html/index.html

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

public_html/js/Presenters/PostPresenter.js

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

public_html/templates/post-content.tpl

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

public_html/templates/post.tpl

@@ -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')) } %>