Merge pull request #55 from robrobinbin/master

Add placeholder image for posts without thumbnail

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;

templates/search.html

@@ -38,7 +38,7 @@
 
 		{% if post.flags.nsfw && prefs.hide_nsfw == "on" %}
 		{% else if post.title != "Comment" %}
-		<div class="post">
+		<div class="post {% if prefs.layout == "card" && post.post_type == "image" %}card_post{% endif %}">
 			<div class="post_left">
 				<p class="post_score">{{ post.score }}</p>
 				{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
@@ -63,8 +63,21 @@
 					</p>
 				</div>
 				
-				<!-- POST THUMBNAIL -->
+				<!-- POST MEDIA/THUMBNAIL -->
-				<img class="post_thumbnail" src="{{ post.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 %}

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>

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>