Improved post sizing, added [F]ullscreen hotkey

public_html/css/post.css

@@ -1,24 +1,34 @@
-.post-type-video video {
-	max-width: 100%;
-}
-
-.post-type-image .image-wrapper {
+.post-type-image .object-wrapper {
 	max-width: 100%;
 	position: relative;
 }
-.post-type-image .image-wrapper img {
+.post-type-image .object-wrapper img {
 	position: absolute;
-	top: 0;
-	left: 0;
 	width: 100%;
+	height: 100%;
 }
 
-.post-type-youtube iframe {
-	width: 800px;
-	height: 600px;
+.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;
 }

public_html/js/Presenters/PostContentPresenter.js

@@ -45,8 +45,8 @@ App.Presenters.PostContentPresenter = function(
 	}
 
 	function updatePostNotesSize() {
-		$target.find('.post-notes-target').width($target.find('.image-wrapper').outerWidth());
-		$target.find('.post-notes-target').height($target.find('.image-wrapper').outerHeight());
+		$target.find('.post-notes-target').width($target.find('.object-wrapper').outerWidth());
+		$target.find('.post-notes-target').height($target.find('.object-wrapper').outerHeight());
 	}
 
 	function addNewPostNote() {
@@ -57,6 +57,7 @@ App.Presenters.PostContentPresenter = function(
 		init: init,
 		render: render,
 		addNewPostNote: addNewPostNote,
+		updatePostNotesSize: updatePostNotesSize,
 	};
 
 };

public_html/js/Presenters/PostPresenter.js

@@ -134,6 +134,18 @@ App.Presenters.PostPresenter = function(
 			editButtonClicked(null);
 		});
 
+		keyboard.keyup('f', function() {
+			var $wrapper = $el.find('.object-wrapper');
+			if ($wrapper.data('full')) {
+				$wrapper.css({maxWidth: $wrapper.attr('data-width') + 'px', width: 'auto'});
+				$wrapper.data('full', false);
+			} else {
+				$wrapper.css({maxWidth: null, width: $wrapper.attr('data-width')});
+				$wrapper.data('full', true);
+			}
+			postContentPresenter.updatePostNotesSize();
+		});
+
 		attachSidebarEvents();
 
 		attachLinksToPostsAround();

public_html/templates/help.tpl

@@ -64,6 +64,11 @@
 				<td>Go to newer/older page or post</td>
 			</tr>
 
+			<tr>
+				<td><code>[F]</code></td>
+				<td>Toggle full post size</td>
+			</tr>
+
 			<tr>
 				<td><code>[E]</code></td>
 				<td>Edit post</td>

public_html/templates/post-content.tpl

@@ -6,17 +6,25 @@
 
 	<%  if (post.contentType === 'image') { %>
 
-		<div class="image-wrapper" style="width: <%= post.imageWidth %>px">
+		<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 style="padding-top: calc(100% * <%= post.imageHeight %> / <%= post.imageWidth %>)"></div>
+			<div class="padding-fix" style="padding-bottom: calc(100% * <%= post.imageHeight %> / <%= post.imageWidth %>)"></div>
 		</div>
 
 	<% } 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') { %>
 
+		<div class="object-wrapper">
 			<object
 					type="<%= post.contentMimeType %>"
 					width="<%= post.imageWidth %>"
@@ -25,8 +33,11 @@
 				<param name="wmode" value="opaque"/>
 				<param name="movie" value="<%= postContentUrl %>"/>
 			</object>
+		</div>
 
 	<% } else if (post.contentType === 'video') { %>
+
+		<div class="object-wrapper">
 			<% if (post.flags.loop) { %>
 				<video id="video" controls loop="loop">
 			<% } else { %>
@@ -37,6 +48,7 @@
 
 				Your browser doesn't support HTML5 videos.
 			</video>
+		</div>
 
 	<% } else { console.log(new Error('Unknown post type')) } %>