iridium/redsunlib
iridium/redsunlib
2
2
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 4 Wiki Activity

Inline images rework

Browse Source
This commit is contained in:
robin 2021-01-21 00:12:54 +01:00
parent 5d44a071f9
commit c299e128ab
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
static/style.css
View File

@ -522,14 +522,30 @@ a.search_subreddit:hover {
} }
.post_media { .post_media {
grid-area: post_media;
text-align: center;
}
.post_media img {
max-width: calc(100% - 40px); max-width: calc(100% - 40px);
align-self: center;
margin-top: 15px; margin-top: 15px;
margin: 5px auto; margin: 5px auto;
height: auto; height: auto;
grid-area: post_media;
background-color: var(--highlighted); 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 { #post_url {

2
templates/subreddit.html
View File

@ -55,7 +55,7 @@
</p> </p>
<!-- POST MEDIA/THUMBNAIL --> <!-- POST MEDIA/THUMBNAIL -->
{% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %} {% 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" %} {% 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 %}"> <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() %} {% if post.thumbnail.url.is_empty() %}