From c299e128ab2b909c7b123f7f5db9932d85bc6507 Mon Sep 17 00:00:00 2001
From: robin <8597693+robrobinbin@users.noreply.github.com>
Date: Thu, 21 Jan 2021 00:12:54 +0100
Subject: [PATCH] Inline images rework

---
 static/style.css         | 22 +++++++++++++++++++---
 templates/subreddit.html |  2 +-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/static/style.css b/static/style.css
index e9f9319..aa9a6ce 100644
--- a/static/style.css
+++ b/static/style.css
@@ -522,14 +522,30 @@ a.search_subreddit:hover {
 }
 
 .post_media {
+	grid-area: post_media;
+	text-align: center;
+}
+
+.post_media img {
 	max-width: calc(100% - 40px);
-	align-self: center;
 	margin-top: 15px;
 	margin: 5px auto;
 	height: auto;
-	grid-area: post_media;
 	background-color: var(--highlighted);
-	display: table;
+	display: block;
+	width: auto;
+	color: transparent;
+	/* TODO, add background image placeholder? */
+	/*
+	<svg viewBox="0 0 100 100" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+	  <path d="M15,20 h70 a10,10 0 0 1 10,10 v40 a10,10 0 0 1 -10,10 h-70 a10,10 0 0 1 -10,-10 v-40 a10,10 0 0 1 10,-10 z" fill="none" stroke="RGBA(128,128,128,0.5)" stroke-width="5" />
+	  <path d="M15,70 l25,-35 l15,20 l10,-10 l20, 25 z" stroke="none" fill="RGBA(128,128,128,0.5)" />
+	</svg>
+	*/
+}
+
+.post_media img.short {
+	max-height: 512px;
 }
 
 #post_url {
diff --git a/templates/subreddit.html b/templates/subreddit.html
index becf8cf..5dbba2c 100644
--- a/templates/subreddit.html
+++ b/templates/subreddit.html
@@ -55,7 +55,7 @@
 				</p>
 				<!-- POST MEDIA/THUMBNAIL -->
 				{% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %}
-				<img class="post_media" alt="Post image" width="{{ post.media.width }}px" height="{{ post.media.height }}px" src="{{ post.media.url }}"/>
+				<a href="{{ post.media.url }}" class="post_media" ><img  alt="Post image" width="{{ post.media.width }}px" height="{{ post.media.height }}px" src="{{ post.media.url }}" class="{% if post.media.height /  post.media.width < 3 %}short{% endif %}"/></a>
 				{% else if post.post_type != "self" %}
 				<a class="post_thumbnail {% if post.thumbnail.url.is_empty() %}no_thumbnail{% endif %}" href="{% if post.post_type == "link" %}{{ post.media.url }}{% else %}{{ post.permalink }}{% endif %}">
 					{% if post.thumbnail.url.is_empty() %}