Improve diff display

This commit is contained in:
Ondřej 2023-08-17 16:54:52 +02:00
parent bb3bc66434
commit b3b20d8a77
3 changed files with 44 additions and 26 deletions

View file

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

View file

@ -16,6 +16,10 @@
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
} }
.diff-table td:last-child {
width: 100%;
}
.diff-table th { .diff-table th {
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
color: var(--color-muted); color: var(--color-muted);
@ -38,7 +42,18 @@
{% for diff in diffs %} {% for diff in diffs %}
<tr> <tr>
<th>{{ diff.diff_time }}</th> <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> </tr>
{% endfor %} {% endfor %}
</table> </table>

View file

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