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

Improve post information widget of user comments for devices under 480px width (#183)

Browse Source 
* Fix user comment post link disappearing when < 480px

* Improve user comment metadata design for mobile

* Remove formerly unused CSS class style

The prior commit introduced the usage of the `comment_subreddit` class
to identify the subreddit that the reddit user posted the comment on.

However, this class came with a legacy style within the CSS file that was
previously not used anywhere within the current day Redlib

As such this style has been removed.
This commit is contained in:
syeopite 2024-07-18 01:27:13 +00:00 committed by GitHub
parent 4f21388643
commit c890e809b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
static/style.css
View File

@ -1233,10 +1233,6 @@ a.search_subreddit:hover {
font-weight: bold; font-weight: bold;
} }
.comment_subreddit {
font-weight: bold;
}
.comment_score { .comment_score {
color: var(--accent); color: var(--accent);
background: var(--foreground); background: var(--foreground);
@ -1346,6 +1342,15 @@ summary.comment_data {
cursor: pointer; cursor: pointer;
} }
.user_comment_data_divider {
display: flex;
align-items: center;
}
.user_comment_data_divider .dot {
display: none;
}
.moderator, .admin { opacity: 1; } .moderator, .admin { opacity: 1; }
.op, .moderator, .admin { font-weight: bold; } .op, .moderator, .admin { font-weight: bold; }
@ -1758,8 +1763,23 @@ td, th {
.comment_right { padding: 5px 0 10px 2px; } .comment_right { padding: 5px 0 10px 2px; }
.comment_author { margin-left: 12px; } .comment_author { margin-left: 12px; }
.comment_data { margin-left: 12px; } .comment_data { margin-left: 12px; }
.user-comment .comment_data {
flex-direction: column;
flex-wrap: wrap;
row-gap: 5px;
}
.comment_data::marker { font-size: 25px; } .comment_data::marker { font-size: 25px; }
.created { width: 100%; } .user-comment .comment_data > .comment_link { order: 2 }
.user_comment_data_divider { order: 1; }
.user_comment_data_divider .dot {
display: unset;
margin-left: 5px;
}
.created-in { display: none; }
.comment_score { .comment_score {
min-width: 32px; min-width: 32px;

9
templates/user.html
View File

@ -50,7 +50,7 @@
{% else if !post.title.is_empty() %} {% else if !post.title.is_empty() %}
{% call utils::post_in_list(post) %} {% call utils::post_in_list(post) %}
{% else %} {% else %}
<div class="comment"> <div class="comment user-comment">
<div class="comment_left"> <div class="comment_left">
<p class="comment_score" title="{{ post.score.1 }}"> <p class="comment_score" title="{{ post.score.1 }}">
{% if prefs.hide_score != "on" %} {% if prefs.hide_score != "on" %}
@ -64,9 +64,12 @@
<details class="comment_right" open> <details class="comment_right" open>
<summary class="comment_data"> <summary class="comment_data">
<a class="comment_link" href="{{ post.permalink }}" title="{{ post.link_title }}">{{ post.link_title }}</a> <a class="comment_link" href="{{ post.permalink }}" title="{{ post.link_title }}">{{ post.link_title }}</a>
<span class="created">&nbsp;in&nbsp;</span> <div class="user_comment_data_divider">
<a href="/r/{{ post.community }}">r/{{ post.community }}</a> <span class="created-in">&nbsp;in&nbsp;</span>
<a class="comment_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
<span class="dot">&bull;</span>
<span class="created" title="{{ post.created }}">&nbsp;{{ post.rel_time }}</span> <span class="created" title="{{ post.created }}">&nbsp;{{ post.rel_time }}</span>
</div>
</summary> </summary>
<p class="comment_body">{{ post.body|safe }}</p> <p class="comment_body">{{ post.body|safe }}</p>
</details> </details>