Skip to content

Integrate django-unfold for enhanced admin interface #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jonocodes merged 3 commits into from
Feb 22, 2026
Merged

Integrate django-unfold for enhanced admin interface #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dd56773
Update Django admin to use django-unfold theme
claude Feb 22, 2026
82209d1
Add dark mode support to all custom admin templates
claude Feb 22, 2026
cb8f871
update translations
jonocodes Feb 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
483 changes: 227 additions & 256 deletions locale/en/LC_MESSAGES/django.po
View file
Open in desktop

Large diffs are not rendered by default.

483 changes: 227 additions & 256 deletions locale/es/LC_MESSAGES/django.po
View file
Open in desktop

Large diffs are not rendered by default.

483 changes: 227 additions & 256 deletions locale/pt/LC_MESSAGES/django.po
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion media/admin.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
from django.urls import reverse
from django.utils import timezone
from django.utils.html import format_html, mark_safe
from unfold.admin import ModelAdmin as UnfoldModelAdmin

from media.models import MediaItem
from media.tasks import generate_summary, process_media
Expand Down Expand Up @@ -72,7 +73,7 @@ def get_actions(self, request):


@admin.register(MediaItem)
class MediaItemAdmin(admin.ModelAdmin, DemoReadOnlyAdminMixin):
class MediaItemAdmin(UnfoldModelAdmin, DemoReadOnlyAdminMixin):
list_display = [
'title',
'action_links',
Expand Down
12 changes: 11 additions & 1 deletion media/templates/admin/admin_spotify_confirm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,16 @@
--sc-dailymotion: #0066DC;
--sc-podcast: #9333ea;
}
.dark {
--sc-panel-bg: #1e293b;
--sc-panel-fg: #e2e8f0;
--sc-muted: #94a3b8;
--sc-border: #334155;
--sc-border-strong: rgba(255,255,255,0.1);
--sc-primary: #60a5fa;
--sc-primary-fg: #ffffff;
--sc-surface: rgba(255,255,255,0.06);
}
.confirm-container {
max-width: 900px;
margin: 20px auto;
Expand Down Expand Up @@ -153,7 +163,7 @@
}
.result-item.selected {
border-color: var(--sc-primary);
background: rgba(65, 118, 144, 0.1);
background: color-mix(in srgb, var(--sc-primary) 10%, transparent);
}
.result-item input[type="radio"] {
display: none;
Expand Down
10 changes: 10 additions & 0 deletions media/templates/admin/admin_stash_confirm_multiple.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,16 @@
--sc-warning: #f59e0b;
--sc-warning-bg: rgba(245, 158, 11, 0.1);
}
.dark {
--sc-panel-bg: #1e293b;
--sc-panel-fg: #e2e8f0;
--sc-muted: #94a3b8;
--sc-border: #334155;
--sc-border-strong: rgba(255,255,255,0.1);
--sc-primary: #60a5fa;
--sc-primary-fg: #ffffff;
--sc-surface: rgba(255,255,255,0.06);
}
.confirm-container {
max-width: 800px;
margin: 20px auto;
Expand Down
10 changes: 10 additions & 0 deletions media/templates/admin/admin_stash_form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,16 @@
--sc-primary-fg: var(--primary-fg, #ffffff);
--sc-surface: var(--darkened-bg, rgba(0,0,0,0.02));
}
.dark {
--sc-panel-bg: #1e293b;
--sc-panel-fg: #e2e8f0;
--sc-muted: #94a3b8;
--sc-border: #334155;
--sc-border-strong: rgba(255,255,255,0.1);
--sc-primary: #60a5fa;
--sc-primary-fg: #ffffff;
--sc-surface: rgba(255,255,255,0.06);
}
.stash-form-container {
max-width: 800px;
margin: 20px auto;
Expand Down
9 changes: 9 additions & 0 deletions media/templates/admin/admin_stash_progress.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,15 @@
--sc-primary-fg: var(--primary-fg, #ffffff);
--sc-surface: var(--darkened-bg, rgba(0,0,0,0.02));
}
.dark {
--sc-panel-bg: #1e293b;
--sc-panel-fg: #e2e8f0;
--sc-muted: #94a3b8;
--sc-border: #334155;
--sc-primary: #60a5fa;
--sc-primary-fg: #ffffff;
--sc-surface: rgba(255,255,255,0.06);
}
.progress-container {
max-width: 800px;
margin: 20px auto;
Expand Down
19 changes: 15 additions & 4 deletions media/templates/admin/bookmarklet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,15 @@
--sc-primary-fg: var(--primary-fg, #ffffff);
--sc-surface: var(--darkened-bg, rgba(0,0,0,0.02));
}
.dark {
--sc-panel-bg: #1e293b;
--sc-panel-fg: #e2e8f0;
--sc-muted: #94a3b8;
--sc-border: #334155;
--sc-primary: #60a5fa;
--sc-primary-fg: #ffffff;
--sc-surface: rgba(255,255,255,0.06);
}
.container {
background: var(--sc-panel-bg);
color: var(--sc-panel-fg);
Expand Down Expand Up @@ -93,8 +102,8 @@
}
button {
padding: 10px 20px;
background: #28a745;
color: white;
background: var(--sc-primary);
color: var(--sc-primary-fg);
border: none;
border-radius: 4px;
font-weight: 600;
Expand All @@ -105,7 +114,9 @@
filter: brightness(1.05);
}
.copy-button {
background: #6c757d;
background: var(--sc-surface);
color: var(--sc-panel-fg);
border: 1px solid var(--sc-border);
}
.instruction {
background: color-mix(in srgb, #ffc107 20%, transparent);
Expand Down Expand Up @@ -137,7 +148,7 @@
flex-shrink: 0;
}
code {
background: rgba(0, 0, 0, 0.1);
background: var(--sc-surface);
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
Expand Down
11 changes: 10 additions & 1 deletion media/templates/admin/feed_links.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,15 @@
--sc-primary-fg: var(--primary-fg, #ffffff);
--sc-surface: var(--darkened-bg, rgba(0,0,0,0.02));
}
.dark {
--sc-panel-bg: #1e293b;
--sc-panel-fg: #e2e8f0;
--sc-muted: #94a3b8;
--sc-border: #334155;
--sc-primary: #60a5fa;
--sc-primary-fg: #ffffff;
--sc-surface: rgba(255,255,255,0.06);
}
.container {
background: var(--sc-panel-bg);
color: var(--sc-panel-fg);
Expand Down Expand Up @@ -62,7 +71,7 @@
flex-shrink: 0;
}
code {
background: rgba(0, 0, 0, 0.1);
background: var(--sc-surface);
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
Expand Down
59 changes: 39 additions & 20 deletions media/templates/admin/grid_view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,25 @@
{% block extrastyle %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
:root {
--sc-panel-bg: var(--body-bg, #ffffff);
--sc-panel-fg: var(--body-fg, #222222);
--sc-muted: var(--body-quiet-color, #6b7280);
--sc-border: var(--border-color, #d4d4d4);
--sc-primary: var(--primary, #417690);
--sc-primary-fg: var(--primary-fg, #ffffff);
--sc-surface: var(--darkened-bg, rgba(0,0,0,0.02));
}
.dark {
--sc-panel-bg: #1e293b;
--sc-panel-fg: #e2e8f0;
--sc-muted: #94a3b8;
--sc-border: #334155;
--sc-primary: #60a5fa;
--sc-primary-fg: #ffffff;
--sc-surface: rgba(255,255,255,0.06);
}

.grid-container {
max-width: 1400px;
margin: 20px auto;
Expand All @@ -18,22 +37,22 @@
gap: 15px;
margin-bottom: 30px;
padding: 15px;
background: var(--body-bg);
border: 1px solid var(--border-color, #ddd);
background: var(--sc-panel-bg);
border: 1px solid var(--sc-border);
border-radius: 8px;
}

.filters select {
padding: 8px 12px;
border: 1px solid var(--border-color, #ddd);
border: 1px solid var(--sc-border);
border-radius: 4px;
font-size: 14px;
background: var(--body-bg);
color: var(--body-fg);
background: var(--sc-panel-bg);
color: var(--sc-panel-fg);
}

.filters label {
color: var(--body-fg);
color: var(--sc-panel-fg);
}

.grid {
Expand All @@ -43,8 +62,8 @@
}

.grid-item {
background: var(--body-bg);
border: 1px solid var(--border-color, #ddd);
background: var(--sc-panel-bg);
border: 1px solid var(--sc-border);
border-radius: 8px;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
Expand Down Expand Up @@ -95,7 +114,7 @@
font-size: 14px;
font-weight: 500;
margin: 0 0 8px 0;
color: var(--body-fg);
color: var(--sc-panel-fg);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
Expand All @@ -105,7 +124,7 @@

.item-meta {
font-size: 12px;
color: var(--body-quiet-color, #666);
color: var(--sc-muted);
display: flex;
gap: 8px;
flex-wrap: wrap;
Expand All @@ -124,10 +143,10 @@
.status-error { background: color-mix(in srgb, #dc3545 25%, transparent); color: #dc3545; }
.status-processing { background: color-mix(in srgb, #ffc107 25%, transparent); color: #b38600; }
.status-downloading { background: color-mix(in srgb, #17a2b8 25%, transparent); color: #17a2b8; }
.status-prefetching { background: color-mix(in srgb, #6c757d 25%, transparent); color: var(--body-quiet-color, #6c757d); }
.status-prefetching { background: color-mix(in srgb, #6c757d 25%, transparent); color: var(--sc-muted); }

.type-badge {
color: var(--body-quiet-color, #666);
color: var(--sc-muted);
font-size: 14px;
display: inline-flex;
align-items: center;
Expand All @@ -137,12 +156,12 @@
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--body-quiet-color, #666);
color: var(--sc-muted);
}

.empty-state h2 {
margin: 0 0 10px 0;
color: var(--body-quiet-color, #999);
color: var(--sc-muted);
}

.view-switcher {
Expand All @@ -153,27 +172,27 @@

.view-switcher a {
padding: 8px 16px;
background: var(--darkened-bg);
background: var(--sc-surface);
border-radius: 4px;
text-decoration: none;
color: var(--body-fg);
color: var(--sc-panel-fg);
font-size: 14px;
transition: background 0.2s;
}

.view-switcher a:hover {
background: var(--border-color, #e0e0e0);
background: var(--sc-border);
}

.view-switcher a.active {
background: var(--primary);
color: var(--primary-fg);
background: var(--sc-primary);
color: var(--sc-primary-fg);
}

.filters .storage-info {
margin-left: auto;
font-weight: 500;
color: var(--body-fg);
color: var(--sc-panel-fg);
}
</style>
{% endblock %}
Expand Down
Loading