From b36cb55b36deb2ee2163a0f524867282d6f480bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= <ondrej@nyv.lt>
Date: Thu, 17 Aug 2023 22:49:13 +0200
Subject: [PATCH] Improve mobile view for article detail

---
 view/static/main.css               | 40 ++++++++++++++++++++++++++----
 view/templates/article_detail.html | 18 +++++++++++++-
 2 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/view/static/main.css b/view/static/main.css
index ade233b..0d7b617 100644
--- a/view/static/main.css
+++ b/view/static/main.css
@@ -478,22 +478,52 @@ details[open] summary::before {
 	margin-bottom: 2rem;
 }
 
-.article-detail-diffs th,
-.article-detail-diffs td {
+.article-detail-diffs-s .title {
+	margin-bottom: 1rem;
+}
+
+.article-detail-diffs-s .diff {
+	padding: 0.75rem 1rem;
+}
+
+.article-detail-diffs-s .diff-before {
+	margin-bottom: 0.5rem;
+}
+
+.article-detail-diffs-s .diff:not(:last-of-type) {
+	border-bottom: 1px solid var(--border-color);
+}
+
+.article-detail-diffs-l {
+	display: none;
+}
+
+@media screen and (min-width: 800px) {
+	.article-detail-diffs-s {
+		display: none;
+	}
+
+	.article-detail-diffs-l {
+		display: table;
+	}
+}
+
+.article-detail-diffs-l th,
+.article-detail-diffs-l td {
 	padding: 0.5rem 0.75rem;
 }
 
-.article-detail-diffs td:last-child {
+.article-detail-diffs-l td:last-child {
 	width: 100%;
 }
 
-.article-detail-diffs th {
+.article-detail-diffs-l th {
 	font-size: var(--font-size-xs);
 	color: var(--color-muted);
 	font-weight: 500;
 }
 
-.article-detail-diffs tr:not(:last-of-type) {
+.article-detail-diffs-l tr:not(:last-of-type) {
 	border-bottom: 1px solid var(--border-color);
 }
 
diff --git a/view/templates/article_detail.html b/view/templates/article_detail.html
index d6f91e5..1cc9cab 100644
--- a/view/templates/article_detail.html
+++ b/view/templates/article_detail.html
@@ -7,7 +7,23 @@
 		<a href="{{ article_url }}">{{ article_url|truncate(50) }}</a>
 	</h1>
 	<div class="card">
-		<table class="article-detail-diffs">
+		<div class="article-detail-diffs-s">
+			{% for diff in diffs %}
+			<div class="diff">
+				<p class="text-caption title">{{ diff.diff_time }}</p>
+				<div>
+					<p class="text-caption">Before</p>
+					<p class="diff-before">{{ diff.diff_html|safe }}</p>
+				</div>
+				<div>
+					<p class="text-caption">After</p>
+					<p class="diff-after">{{ diff.diff_html|safe }}</p>
+				</div>
+			</div>
+			{% endfor %}
+		</div>
+
+		<table class="article-detail-diffs-l">
 			{% for diff in diffs %}
 			<tr>
 				<th>{{ diff.diff_time }}</th>