Improve post information widget of user comments for devices under 480px width (#183)
* 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:
parent
4f21388643
commit
c890e809b7
@ -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;
|
||||||
|
@ -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"> in </span>
|
<div class="user_comment_data_divider">
|
||||||
<a href="/r/{{ post.community }}">r/{{ post.community }}</a>
|
<span class="created-in"> in </span>
|
||||||
|
<a class="comment_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
|
||||||
|
<span class="dot">•</span>
|
||||||
<span class="created" title="{{ post.created }}"> {{ post.rel_time }}</span>
|
<span class="created" title="{{ post.created }}"> {{ 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>
|
||||||
|
Loading…
Reference in New Issue
Block a user