Improve diff display

view/static/main.css

@@ -99,6 +99,14 @@ del {
 	text-decoration-color: hsl(0 50% 40% / 50%);
 }
 
+.diff-before ins {
+	display: none;
+}
+
+.diff-after del {
+	display: none;
+}
+
 code {
 	font-size: inherit;
 }
@@ -128,6 +136,8 @@ details[open] summary::before {
 	transform: rotate(90deg);
 }
 
+/* Layout */
+
 .header {
 	padding-top: 1rem;
 	padding-bottom: 1rem;
@@ -218,12 +228,20 @@ details[open] summary::before {
 	margin: 0 0.25rem;
 }
 
+/* Utils & components */
+
 .container {
 	max-width: 1200px;
 	margin: 0 auto;
 	padding: 0 1rem;
 }
 
+.inline-icon {
+	display: inline-block;
+	fill: currentColor;
+	width: 1.25em;
+}
+
 .input {
 	border-radius: var(--radius-s);
 	border: 1px solid var(--border-color);
@@ -389,16 +407,6 @@ details[open] summary::before {
 	font-size: var(--font-size-l);
 }
 
-.inline-icon {
-	display: inline-block;
-	fill: currentColor;
-	width: 1.25em;
-}
-
-.changeset details[open] summary {
-	margin-bottom: 1rem;
-}
-
 .changeset table th {
 	font-size: var(--font-size-s);
 	font-weight: 500;

view/templates/article_detail.html

@@ -16,6 +16,10 @@
 	padding: 0.5rem 0.75rem;
 }
 
+.diff-table td:last-child {
+	width: 100%;
+}
+
 .diff-table th {
 	font-size: var(--font-size-xs);
 	color: var(--color-muted);
@@ -38,7 +42,18 @@
 			{% for diff in diffs %}
 			<tr>
 				<th>{{ diff.diff_time }}</th>
-				<td>{{ diff.diff_html|safe }}</td>
+				<td>
+					<table>
+						<tr>
+							<th>Before</th>
+							<td class="diff-before">{{ diff.diff_html|safe }}</td>
+						</tr>
+						<tr>
+							<th>After</th>
+							<td class="diff-after">{{ diff.diff_html|safe }}</td>
+						</tr>
+					</table>
+				</td>
 			</tr>
 			{% endfor %}
 		</table>

view/templates/index.html

@@ -40,21 +40,16 @@
 				Show change history
 			</a>
 		</p>
-		<details>
-			<summary class="changeset-title">
-				<h2 class="diff">{{ diff.diff_html|safe }}</h2>
-			</summary>
-			<table>
-				<tr>
-					<th>Old</th>
-					<td>{{ diff.title_orig }}</td>
-				</tr>
-				<tr>
-					<th>New</th>
-					<td>{{ diff.title_new }}</td>
-				</tr>
-			</table>
-		</details>
+		<table>
+			<tr>
+				<th>Before</th>
+				<td class="diff-before changeset-title">{{ diff.diff_html|safe }}</td>
+			</tr>
+			<tr>
+				<th>After</th>
+				<td class="diff-after changeset-title">{{ diff.diff_html|safe }}</td>
+			</tr>
+		</table>
 	</article>
 	{% endfor %}
 </div>