Add direct link to thumbnail

This commit is contained in:
robrobinbin 2021-01-11 23:08:12 +01:00
parent bf6245a505
commit 6dbd002acd
4 changed files with 43 additions and 11 deletions

View File

@ -106,6 +106,7 @@ async fn parse_post(json: &serde_json::Value) -> Post {
stickied: post["data"]["stickied"].as_bool().unwrap_or(false),
},
media,
domain: val(post, "domain"),
time: OffsetDateTime::from_unix_timestamp(unix_time).format("%b %d %Y %H:%M UTC"),
}
}

View File

@ -37,6 +37,7 @@ pub struct Post {
pub flags: Flags,
pub thumbnail: String,
pub media: String,
pub domain: String,
pub time: String,
}
@ -169,6 +170,9 @@ pub async fn media(data: &serde_json::Value) -> (String, String) {
} else if data["post_hint"].as_str().unwrap_or("") == "image" {
post_type = "image";
format_url(data["preview"]["images"][0]["source"]["url"].as_str().unwrap_or_default().to_string())
} else if data["is_self"].as_bool().unwrap_or_default() {
post_type = "self";
data["permalink"].as_str().unwrap_or_default().to_string()
} else {
post_type = "link";
data["url"].as_str().unwrap_or_default().to_string()
@ -240,6 +244,7 @@ pub async fn fetch_posts(path: &str, fallback_title: String) -> Result<(Vec<Post
post_type,
thumbnail: format_url(val(post, "thumbnail")),
media,
domain: val(post, "domain"),
flair: Flair(
val(post, "link_flair_text"),
val(post, "link_flair_background_color"),

View File

@ -453,11 +453,35 @@ input[type="submit"]:hover { color: var(--accent); }
}
.post_thumbnail {
object-fit: cover;
width: auto;
border-radius: 5px;
border: 1px solid var(--foreground);
max-width: 20%;
width: 20%;
max-width: 140px;
display: grid;
overflow: hidden;
flex-shrink: 0;
background-color: var(--highlighted);
}
.post_thumbnail img {
grid-area: 1 / 1 / 2 / 2;
height: 100%;
width: 100%;
object-fit: cover;
align-self: center;
justify-self: center;
}
.post_thumbnail span {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
background-color: rgba(0,0,0,0.8);
color: white;
grid-area: 1 / 1 / 2 / 2;
padding: 5px;
align-self: end;
}
.post_flair {
@ -634,19 +658,19 @@ input[type="submit"]:hover { color: var(--accent); }
}
.compact .post_thumbnail {
max-width: 75px;
max-height: 75px;
width: 75px;
height: 75px;
}
.compact footer {
margin-top: 20px;
}
.card .post_right {
.card_post .post_right {
flex-direction: column;
}
.card .post:not(.highlighted) .post_media {
.card_post:not(.highlighted) .post_media {
margin-top: 0;
margin-bottom: 15px;
}

View File

@ -31,7 +31,7 @@
<div id="posts">
{% for post in posts %}
{% if !(post.flags.nsfw && prefs.hide_nsfw == "on") %}
<div class="post {% if post.flags.stickied %}stickied{% endif %}">
<div class="post {% if post.flags.stickied %}stickied{% endif %} {% 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 %}
@ -56,8 +56,10 @@
<!-- POST MEDIA/THUMBNAIL -->
{% if prefs.layout == "card" && post.post_type == "image" %}
<img class="post_media" src="{{ post.media }}"/>
{% else if prefs.layout != "card" %}
<img class="post_thumbnail" src="{{ post.thumbnail }}">
{% 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>
{% endif %}
</div>
</div>