From c4489a14b8b5585a1ee013068a4c5b11ffcab816 Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Sun, 26 Oct 2014 11:09:29 +0100
Subject: [PATCH] Improved image posts scaling

---
 TODO                                   |  1 -
 public_html/css/post.css               | 16 ++++++++++++----
 public_html/templates/post-content.tpl |  5 ++++-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/TODO b/TODO
index 31f68d10..6b16c056 100644
--- a/TODO
+++ b/TODO
@@ -11,7 +11,6 @@ first major release.
 - tags: add tag edit snapshots (backed-only)
 - add /history
 - fix post notes on scaled posts
-- fix image size not being respected
 
 refactors:
     - add enum validation in IValidatables (needs refactors of enums and
diff --git a/public_html/css/post.css b/public_html/css/post.css
index 50e97026..b3d3e7d3 100644
--- a/public_html/css/post.css
+++ b/public_html/css/post.css
@@ -2,9 +2,15 @@
 	max-width: 100%;
 }
 
-.post-type-image img {
-	display: block;
+.post-type-image .image-wrapper {
 	max-width: 100%;
+	position: relative;
+}
+.post-type-image .image-wrapper img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
 }
 
 .post-type-youtube iframe {
@@ -154,7 +160,7 @@
 	position: absolute;
 	background: rgba(255, 255, 255, 0.8);
 	box-shadow: 0 0 1em 0.5em rgba(255, 255, 255, 0.8);
-	z-index: 1;
+	z-index: 2;
 	display: none;
 }
 #post-view>* {
@@ -173,12 +179,14 @@
 
 .post-content {
 	position: relative;
+	margin-bottom: 0.5em;
 }
 .post-notes-target,
 .post-notes {
 	pointer-events: none;
 }
 .post-notes {
+	z-index: 1;
 	position: absolute;
 	left: 0;
 	top: 0;
@@ -190,7 +198,7 @@
 	pointer-events: auto;
 	display: none;
 	position: absolute;
-	z-index: 2;
+	z-index: 3;
 	background: white;
 	border: 1px solid black;
 	padding: 1em;
diff --git a/public_html/templates/post-content.tpl b/public_html/templates/post-content.tpl
index cc43d8fc..7baced3f 100644
--- a/public_html/templates/post-content.tpl
+++ b/public_html/templates/post-content.tpl
@@ -6,7 +6,10 @@
 
 	<%  if (post.contentType === 'image') { %>
 
-		<img alt="<%= post.name %>" src="<%= postContentUrl %>"/>
+		<div class="image-wrapper" style="width: <%= post.imageWidth %>px">
+			<img alt="<%= post.name %>" src="<%= postContentUrl %>"/>
+			<div style="padding-top: calc(100% * <%= post.imageHeight %> / <%= post.imageWidth %>)"></div>
+		</div>
 
 	<% } else if (post.contentType === 'youtube') { %>