From d19e73f059eada182c1024c2b0bb4afb82f4eb69 Mon Sep 17 00:00:00 2001
From: robrobinbin <>
Date: Thu, 14 Jan 2021 21:45:43 +0100
Subject: [PATCH] Add placeholder for posts without thumbnail

---
 static/style.css         | 15 +++++++++++++--
 templates/search.html    | 16 +++++++++++++++-
 templates/subreddit.html | 13 ++++++++++---
 templates/user.html      | 13 ++++++++++---
 4 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/static/style.css b/static/style.css
index 0d0cf00..33d1964 100644
--- a/static/style.css
+++ b/static/style.css
@@ -506,7 +506,7 @@ a.search_subreddit:hover {
 	display: grid;
 	overflow: hidden;
 	flex-shrink: 0;
-	background-color: var(--highlighted);
+	background-color: black;
 }
 
 .post_thumbnail img {
@@ -517,12 +517,23 @@ a.search_subreddit:hover {
 	justify-self: center;
 }
 
+.post_thumbnail.no_thumbnail {
+	background-color: var(--highlighted)
+}
+
+.post_thumbnail svg {
+	grid-area: 1 / 1 / 2 / 2;
+	align-self: center;
+	justify-self: center;
+	stroke: var(--text);
+}
+
 .post_thumbnail span {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
 	text-align: center;
-	background-color: rgba(0,0,0,0.6);
+	background-color: rgba(0,0,0,0.8);
 	color: white;
 	grid-area: 1 / 1 / 2 / 2;
 	padding: 5px;
diff --git a/templates/search.html b/templates/search.html
index 4bab330..1e5eb86 100644
--- a/templates/search.html
+++ b/templates/search.html
@@ -64,7 +64,21 @@
 				</div>
 				
 				<!-- POST THUMBNAIL -->
-				<img class="post_thumbnail" src="{{ post.thumbnail }}">
+				<!-- POST MEDIA/THUMBNAIL -->
+				{% if prefs.layout == "card" && post.post_type == "image" %}
+					<img class="post_media" src="{{ post.media }}"/>
+				{% else if post.post_type != "self" %}
+					<a class="post_thumbnail {% if post.thumbnail == "" %}no_thumbnail{% endif %}" href="{% if post.post_type == "link" %}{{ post.media }}{% else %}{{ post.permalink }}{% endif %}">
+						{% if post.thumbnail == "" %}
+							<svg viewBox="0 0 100 106" width="50" height="53" xmlns="http://www.w3.org/2000/svg">
+								<path d="M35,15h-15a10,10 0,0,0 0,20h25a10,10 0,0,0 10,-10m-12.5,0a10, 10 0,0,1 10, -10h25a10,10 0,0,1 0,20h-15" fill="none" stroke-width="5" stroke-linecap="round"/>
+							</svg>
+						{% else %}
+							<img src="{{ post.thumbnail }}">
+						{% endif %}
+						<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
+					</a>
+				{% endif %}
 			</div>
 		</div>
 		{% else %}
diff --git a/templates/subreddit.html b/templates/subreddit.html
index 734d295..0a61ff0 100644
--- a/templates/subreddit.html
+++ b/templates/subreddit.html
@@ -56,10 +56,17 @@
 					<!-- POST MEDIA/THUMBNAIL -->
 					{% if prefs.layout == "card" && post.post_type == "image" %}
 						<img class="post_media" src="{{ post.media }}"/>
-					{% else if post.post_type == "link" %}
-						<a class="post_thumbnail" href="{{ post.media }}"><img src="{{ post.thumbnail }}"><span>{{ post.domain }}</span></a>
 					{% else if post.post_type != "self" %}
-						<a class="post_thumbnail" href="{{ post.permalink }}"><img src="{{ post.thumbnail }}"><span>{{ post.post_type }}</span></a>
+						<a class="post_thumbnail {% if post.thumbnail == "" %}no_thumbnail{% endif %}" href="{% if post.post_type == "link" %}{{ post.media }}{% else %}{{ post.permalink }}{% endif %}">
+							{% if post.thumbnail == "" %}
+								<svg viewBox="0 0 100 106" width="50" height="53" xmlns="http://www.w3.org/2000/svg">
+									<path d="M35,15h-15a10,10 0,0,0 0,20h25a10,10 0,0,0 10,-10m-12.5,0a10, 10 0,0,1 10, -10h25a10,10 0,0,1 0,20h-15" fill="none" stroke-width="5" stroke-linecap="round"/>
+								</svg>
+							{% else %}
+								<img src="{{ post.thumbnail }}">
+							{% endif %}
+							<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
+						</a>
 					{% endif %}
 				</div>
 			</div>
diff --git a/templates/user.html b/templates/user.html
index 070e253..841d295 100644
--- a/templates/user.html
+++ b/templates/user.html
@@ -51,10 +51,17 @@
 					<!-- POST MEDIA/THUMBNAIL -->
 					{% if prefs.layout == "card" && post.post_type == "image" %}
 						<img class="post_media" src="{{ post.media }}"/>
-					{% else if post.post_type == "link" %}
-						<a class="post_thumbnail" href="{{ post.media }}"><img src="{{ post.thumbnail }}"><span>{{ post.domain }}</span></a>
 					{% else if post.post_type != "self" %}
-						<a class="post_thumbnail" href="{{ post.permalink }}"><img src="{{ post.thumbnail }}"><span>{{ post.post_type }}</span></a>
+						<a class="post_thumbnail {% if post.thumbnail == "" %}no_thumbnail{% endif %}" href="{% if post.post_type == "link" %}{{ post.media }}{% else %}{{ post.permalink }}{% endif %}">
+							{% if post.thumbnail == "" %}
+								<svg viewBox="0 0 100 106" width="50" height="53" xmlns="http://www.w3.org/2000/svg">
+									<path d="M35,15h-15a10,10 0,0,0 0,20h25a10,10 0,0,0 10,-10m-12.5,0a10, 10 0,0,1 10, -10h25a10,10 0,0,1 0,20h-15" fill="none" stroke-width="5" stroke-linecap="round"/>
+								</svg>
+							{% else %}
+								<img src="{{ post.thumbnail }}">
+							{% endif %}
+							<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
+						</a>
 					{% endif %}
 				</div>
 			</div>