From c890e809b76275e01b8b4057439a318b14cb35c6 Mon Sep 17 00:00:00 2001
From: syeopite <70992037+syeopite@users.noreply.github.com>
Date: Thu, 18 Jul 2024 01:27:13 +0000
Subject: [PATCH] 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.
---
 static/style.css    | 30 +++++++++++++++++++++++++-----
 templates/user.html | 11 +++++++----
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/static/style.css b/static/style.css
index 8fa4b31..8835417 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1233,10 +1233,6 @@ a.search_subreddit:hover {
 	font-weight: bold;
 }
 
-.comment_subreddit {
-	font-weight: bold;
-}
-
 .comment_score {
 	color: var(--accent);
 	background: var(--foreground);
@@ -1346,6 +1342,15 @@ summary.comment_data {
 	cursor: pointer;
 }
 
+.user_comment_data_divider {
+	display: flex;
+	align-items: center;
+}
+
+.user_comment_data_divider .dot {
+	display: none;
+}
+
 .moderator, .admin { opacity: 1; }
 .op, .moderator, .admin { font-weight: bold; }
 
@@ -1758,8 +1763,23 @@ td, th {
 	.comment_right { padding: 5px 0 10px 2px; }
 	.comment_author { 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; }
-	.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 {
 		min-width: 32px;
diff --git a/templates/user.html b/templates/user.html
index 35e58b2..ccaa0f1 100644
--- a/templates/user.html
+++ b/templates/user.html
@@ -50,7 +50,7 @@
 			{% else if !post.title.is_empty() %}
 			{% call utils::post_in_list(post) %}
 			{% else %}
-			<div class="comment">
+			<div class="comment user-comment">
 				<div class="comment_left">
 					<p class="comment_score" title="{{ post.score.1 }}">
                     {% if prefs.hide_score != "on" %}
@@ -64,9 +64,12 @@
 				<details class="comment_right" open>
 					<summary class="comment_data">
                         <a class="comment_link" href="{{ post.permalink }}" title="{{ post.link_title }}">{{ post.link_title }}</a>
-                        <span class="created">&nbsp;in&nbsp;</span>
-                        <a href="/r/{{ post.community }}">r/{{ post.community }}</a>
-                        <span class="created" title="{{ post.created }}">&nbsp;{{ post.rel_time }}</span>
+						<div class="user_comment_data_divider">
+							<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>
+						</div>
 					</summary>
 					<p class="comment_body">{{ post.body|safe }}</p>
 				</details>