Add placeholder for posts without thumbnail

This commit is contained in:
robrobinbin 2021-01-14 21:45:43 +01:00
parent 292f8fbbb7
commit d19e73f059
4 changed files with 48 additions and 9 deletions

View file

@ -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;

View file

@ -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 %}

View file

@ -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>

View file

@ -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>