Skip to content

Commit f89fb65

Browse files
matteiusmatteius
committed
Clean up push/pull diff styling
- Extract shared diff styles into reusable _sync_diff.html include - Replace inline-styled dense badges with clean list layout: readable tags (+ − Δ i) with soft color backgrounds, proper spacing, separator lines between items - Consistent status labels: ✚ New / — No changes / ▸ N changes - Both push and pull templates use the same style system - Bump version to 0.26.1
1 parent 5a54bb6 commit f89fb65

4 files changed

Lines changed: 95 additions & 21 deletions

File tree

‎django_forms_workflows/templates/admin/django_forms_workflows/_sync_diff.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{# Reusable diff summary styles + macros for push/pull templates #}
2+
<style>
3+
.sync-status-new { color: #1a7f37; font-weight: 600; }
4+
.sync-status-identical { color: #57606a; }
5+
.sync-status-link { color: #0969da; font-weight: 600; cursor: pointer; text-decoration: none; }
6+
.sync-status-link:hover { text-decoration: underline; }
7+
.sync-diff-panel {
8+
background: #f6f8fa;
9+
border-top: 1px solid #d0d7de;
10+
padding: 12px 20px;
11+
}
12+
.sync-diff-list { list-style: none; margin: 0; padding: 0; }
13+
.sync-diff-list li {
14+
padding: 6px 0;
15+
font-size: 13px;
16+
line-height: 1.5;
17+
color: #24292f;
18+
border-bottom: 1px solid #eaeef2;
19+
}
20+
.sync-diff-list li:last-child { border-bottom: none; }
21+
.sync-diff-tag {
22+
display: inline-block;
23+
font-size: 11px;
24+
font-weight: 700;
25+
width: 20px;
26+
height: 20px;
27+
line-height: 20px;
28+
text-align: center;
29+
border-radius: 4px;
30+
margin-right: 10px;
31+
vertical-align: middle;
32+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
33+
}
34+
.sync-diff-tag-add { background: #dafbe1; color: #1a7f37; }
35+
.sync-diff-tag-remove { background: #ffebe9; color: #cf222e; }
36+
.sync-diff-tag-change { background: #fff8c5; color: #9a6700; }
37+
.sync-diff-tag-info { background: #ddf4ff; color: #0969da; }
38+
</style>

‎django_forms_workflows/templates/admin/django_forms_workflows/sync_pull.html‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
{% endblock %}
1717

1818
{% block content %}
19+
{% include "admin/django_forms_workflows/_sync_diff.html" %}
1920
<h1>Pull Forms from Remote</h1>
2021

2122
{% if error %}
@@ -87,18 +88,38 @@ <h2>Import Results</h2>
8788
<td>{{ form.form.name }}</td>
8889
<td>{{ form.category.name|default:"—" }}</td>
8990
<td>
90-
{% for d in form_diffs %}{% if d.slug == slug %}{% if d.is_new %}<span style="color:#1a7f37;font-weight:600;">New</span>{% elif d.summary.identical %}<span style="color:#6e7781;">Identical</span>{% else %}<a href="#" onclick="document.getElementById('diff-{{slug}}').style.display=document.getElementById('diff-{{slug}}').style.display==='none'?'':'none';return false;" style="font-weight:600;">{{ d.summary.diffs|length }} change{{ d.summary.diffs|length|pluralize }}</a>{% endif %}{% endif %}{% endfor %}
91+
{% for d in form_diffs %}{% if d.slug == slug %}
92+
{% if d.is_new %}
93+
<span class="sync-status-new">✚ New</span>
94+
{% elif d.summary.identical %}
95+
<span class="sync-status-identical">— No changes</span>
96+
{% else %}
97+
<a href="#" class="sync-status-link" onclick="var el=document.getElementById('diff-{{slug}}');el.style.display=el.style.display==='none'?'':'none';return false;">
98+
▸ {{ d.summary.diffs|length }} change{{ d.summary.diffs|length|pluralize }}
99+
</a>
100+
{% endif %}
101+
{% endif %}{% endfor %}
91102
</td>
92103
</tr>
93104
{% for d in form_diffs %}{% if d.slug == slug and not d.is_new and not d.summary.identical %}
94105
<tr id="diff-{{ slug }}" style="display:none;">
95-
<td colspan="5" style="padding:8px 16px;background:#f6f8fa;">
96-
{% for item in d.summary.diffs %}
97-
<div style="padding:3px 0;font-size:13px;">
98-
{% if "added" in item|lower %}<span style="background:#1a7f37;color:#fff;padding:1px 6px;border-radius:10px;font-size:11px;font-weight:600;margin-right:6px;">+</span>{% elif "removed" in item|lower %}<span style="background:#cf222e;color:#fff;padding:1px 6px;border-radius:10px;font-size:11px;font-weight:600;margin-right:6px;">−</span>{% else %}<span style="background:#9a6700;color:#fff;padding:1px 6px;border-radius:10px;font-size:11px;font-weight:600;margin-right:6px;">Δ</span>{% endif %}
99-
{{ item }}
100-
</div>
101-
{% endfor %}
106+
<td colspan="5" class="sync-diff-panel">
107+
<ul class="sync-diff-list">
108+
{% for item in d.summary.diffs %}
109+
<li>
110+
{% if "added" in item|lower %}
111+
<span class="sync-diff-tag sync-diff-tag-add">+</span>
112+
{% elif "removed" in item|lower %}
113+
<span class="sync-diff-tag sync-diff-tag-remove">−</span>
114+
{% elif "modified" in item|lower or "→" in item %}
115+
<span class="sync-diff-tag sync-diff-tag-change">Δ</span>
116+
{% else %}
117+
<span class="sync-diff-tag sync-diff-tag-info">i</span>
118+
{% endif %}
119+
{{ item }}
120+
</li>
121+
{% endfor %}
122+
</ul>
102123
</td>
103124
</tr>
104125
{% endif %}{% endfor %}

‎django_forms_workflows/templates/admin/django_forms_workflows/sync_push.html‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
{% endblock %}
1717

1818
{% block content %}
19+
{% include "admin/django_forms_workflows/_sync_diff.html" %}
1920
<h1>Push Forms to Remote</h1>
2021

2122
{% if error %}
@@ -85,22 +86,36 @@ <h1>Push Forms to Remote</h1>
8586
<td><code>{{ d.slug }}</code></td>
8687
<td>{{ d.name }}</td>
8788
<td>
88-
{% if d.is_new %}<span style="color:#1a7f37;font-weight:600;">New (will be created)</span>
89-
{% elif d.summary.identical %}<span style="color:#6e7781;">No changes</span>
90-
{% else %}<a href="#" onclick="document.getElementById('push-diff-{{ d.slug }}').style.display=document.getElementById('push-diff-{{ d.slug }}').style.display==='none'?'':'none';return false;" style="font-weight:600;">{{ d.summary.diffs|length }} change{{ d.summary.diffs|length|pluralize }}</a>{% endif %}
89+
{% if d.is_new %}
90+
<span class="sync-status-new">✚ New</span>
91+
{% elif d.summary.identical %}
92+
<span class="sync-status-identical">— No changes</span>
93+
{% else %}
94+
<a href="#" class="sync-status-link" onclick="var el=document.getElementById('push-diff-{{ d.slug }}');el.style.display=el.style.display==='none'?'':'none';return false;">
95+
▸ {{ d.summary.diffs|length }} change{{ d.summary.diffs|length|pluralize }}
96+
</a>
97+
{% endif %}
9198
</td>
9299
</tr>
93100
{% if not d.is_new and not d.summary.identical %}
94101
<tr id="push-diff-{{ d.slug }}" style="display:none;">
95-
<td colspan="4" style="padding:8px 16px;background:#f6f8fa;">
96-
{% for item in d.summary.diffs %}
97-
<div style="padding:3px 0;font-size:13px;">
98-
{% if "added" in item|lower %}<span style="background:#1a7f37;color:#fff;padding:1px 6px;border-radius:10px;font-size:11px;font-weight:600;margin-right:6px;">+</span>
99-
{% elif "removed" in item|lower %}<span style="background:#cf222e;color:#fff;padding:1px 6px;border-radius:10px;font-size:11px;font-weight:600;margin-right:6px;">−</span>
100-
{% else %}<span style="background:#9a6700;color:#fff;padding:1px 6px;border-radius:10px;font-size:11px;font-weight:600;margin-right:6px;">Δ</span>{% endif %}
101-
{{ item }}
102-
</div>
103-
{% endfor %}
102+
<td colspan="4" class="sync-diff-panel">
103+
<ul class="sync-diff-list">
104+
{% for item in d.summary.diffs %}
105+
<li>
106+
{% if "added" in item|lower %}
107+
<span class="sync-diff-tag sync-diff-tag-add">+</span>
108+
{% elif "removed" in item|lower %}
109+
<span class="sync-diff-tag sync-diff-tag-remove">−</span>
110+
{% elif "modified" in item|lower or "→" in item %}
111+
<span class="sync-diff-tag sync-diff-tag-change">Δ</span>
112+
{% else %}
113+
<span class="sync-diff-tag sync-diff-tag-info">i</span>
114+
{% endif %}
115+
{{ item }}
116+
</li>
117+
{% endfor %}
118+
</ul>
104119
</td>
105120
</tr>
106121
{% endif %}

‎pyproject.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[tool.poetry]
22
name = "django-forms-workflows"
3-
version = "0.26.0"
3+
version = "0.26.1"
44
description = "Enterprise-grade, database-driven form builder with approval workflows and external data integration"
55
license = "LGPL-3.0-only"
66
readme = "README.md"

0 commit comments

Comments
 (0)