Fixed post resizing, alignment etc.

public_html/css/home.css

@@ -10,10 +10,11 @@
 }
 
 #home .post {
-	text-align: left;
+	text-align: center;
 	margin: 0 auto;
 	display: inline-block;
 	max-width: 60%;
+	min-width: 32em;
 }
 #home .post .left {
 	display: inline-block;

public_html/css/post.css

@@ -1,34 +1,3 @@
-.post-type-image .object-wrapper {
-	max-width: 100%;
-	position: relative;
-}
-.post-type-image .object-wrapper img {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-}
-
-.post-type-youtube .object-wrapper {
-	max-width: 800px;
-	position: relative;
-}
-.post-type-youtube .object-wrapper .padding-fix {
-	padding-bottom: 75%;
-}
-.post-type-youtube .object-wrapper iframe {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	border: 0;
-}
-
-.post-type-video .object-wrapper {
-	max-width: 100%;
-}
-.post-type-video .object-wrapper video {
-	width: 100%;
-}
-
 #post-current-search-wrapper {
 	text-align: center;
 }
@@ -195,6 +164,25 @@
 	position: relative;
 	margin-bottom: 0.5em;
 }
+.post-content .object-wrapper {
+	max-width: 100%;
+	position: relative;
+}
+.post-content .object-wrapper img,
+.post-content .object-wrapper object,
+.post-content .object-wrapper iframe,
+.post-content .object-wrapper video {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	top: 0;
+	border: 0;
+}
+.post-content .object-wrapper video {
+	background: black;
+}
+
 .post-notes-target {
 	position: absolute;
 	pointer-events: none;

public_html/js/Presenters/HomePresenter.js

@@ -41,7 +41,14 @@ App.Presenters.HomePresenter = function(
 				if ($el.find('#post-content-target').length > 0) {
 					presenterManager.initPresenters([
 						[postContentPresenter, {post: post, $target: $el.find('#post-content-target')}]],
-						function() {});
+						function() {
+							var $wrapper = $el.find('.object-wrapper');
+							$wrapper.css({
+								maxWidth: $wrapper.attr('data-width') + 'px',
+								width: 'auto',
+								margin: '0 auto'});
+							postContentPresenter.updatePostNotesSize();
+						});
 				}
 
 			}).fail(function(response) {

public_html/js/Presenters/PostContentPresenter.js

@@ -45,8 +45,14 @@ App.Presenters.PostContentPresenter = function(
 	}
 
 	function updatePostNotesSize() {
-		$target.find('.post-notes-target').width($target.find('.object-wrapper').outerWidth());
+		var $postNotes = $target.find('.post-notes-target');
-		$target.find('.post-notes-target').height($target.find('.object-wrapper').outerHeight());
+		var $objectWrapper = $target.find('.object-wrapper');
+		$postNotes.css({
+			width: $objectWrapper.outerWidth() + 'px',
+			height: $objectWrapper.outerHeight() + 'px',
+			left: ($objectWrapper.offset().left - $objectWrapper.parent().offset().left) + 'px',
+			top: ($objectWrapper.offset().top - $objectWrapper.parent().offset().top) + 'px',
+		});
 	}
 
 	function addNewPostNote() {

public_html/templates/home.tpl

@@ -5,7 +5,7 @@
 	</p>
 
 	<% if (post && post.id) { %>
-		<div class="post">
+		<div class="post" style="width: <%= post.imageWidth || 800 %>px">
 			<div id="post-content-target">
 			</div>
 

public_html/templates/post-content.tpl

@@ -1,43 +1,47 @@
-<% var postContentUrl = '/data/posts/' + post.name + '?x=' + Math.random() /* reset gif animations */ %>
+<%
+	var postContentUrl = '/data/posts/' + post.name + '?x=' + Math.random() /* reset gif animations */
+	var width;
+	var height;
+	if (post.contentType === 'image' || post.contentType === 'flash') {
+		width = post.imageWidth;
+		height = post.imageHeight;
+	} else {
+		width = 800;
+		height = 600;
+	}
+%>
 
 <div class="post-content post-type-<%= post.contentType %>">
 	<div class="post-notes-target">
 	</div>
 
-	<%  if (post.contentType === 'image') { %>
+	<div
+		class="object-wrapper"
+		data-width="<%= width %>"
+		data-height="<%= height %>"
+		style="max-width: <%= width %>px">
+
+		<%  if (post.contentType === 'image') { %>
 
-		<div
-				class="object-wrapper"
-				data-width="<%= post.imageWidth %>"
-				data-height="<%= post.imageWidth %>"
-				style="max-width: <%= post.imageWidth %>px">
 			<img alt="<%= post.name %>" src="<%= postContentUrl %>"/>
-			<div class="padding-fix" style="padding-bottom: calc(100% * <%= post.imageHeight %> / <%= post.imageWidth %>)"></div>
-		</div>
 
-	<% } else if (post.contentType === 'youtube') { %>
+		<% } else if (post.contentType === 'youtube') { %>
 
-		<div class="object-wrapper">
 			<iframe src="//www.youtube.com/embed/<%= post.contentChecksum %>?wmode=opaque" allowfullscreen></iframe>
-			<div class="padding-fix"></div>
-		</div>
 
-	<% } else if (post.contentType === 'flash') { %>
+		<% } else if (post.contentType === 'flash') { %>
 
-		<div class="object-wrapper">
 			<object
 					type="<%= post.contentMimeType %>"
-					width="<%= post.imageWidth %>"
+					width="<%= width %>"
-					height="<%= post.imageHeight %>"
+					height="<%= height %>"
 					data="<%= postContentUrl %>">
 				<param name="wmode" value="opaque"/>
 				<param name="movie" value="<%= postContentUrl %>"/>
 			</object>
-		</div>
 
-	<% } else if (post.contentType === 'video') { %>
+		<% } else if (post.contentType === 'video') { %>
 
-		<div class="object-wrapper">
 			<% if (post.flags.loop) { %>
 				<video id="video" controls loop="loop">
 			<% } else { %>
@@ -48,8 +52,10 @@
 
 				Your browser doesn't support HTML5 videos.
 			</video>
-		</div>
 
-	<% } else { console.log(new Error('Unknown post type')) } %>
+		<% } else { console.log(new Error('Unknown post type')) } %>
+
+		<div class="padding-fix" style="padding-bottom: calc(100% * <%= height %> / <%= width %>)"></div>
+	</div>
 
 </div>