Skip to content

Commit c53ee50

Browse files
Abdur-rahmaanJAbdur-rahmaanJ
committed
Modernize Admin UI with Tailwind and Alpine.js for Contact and ContentType modules
1 parent be8d715 commit c53ee50

5 files changed

Lines changed: 407 additions & 248 deletions

File tree

‎pythoncms/modules/contact/templates/contact/dashboard.html‎

Lines changed: 120 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,137 @@
11
{% extends 'shopyo_dashboard/dashboard_base.html' %}
22

3+
{% block title %}Contact Messages{% endblock %}
34

4-
{%block content%}
5-
<br>
6-
<div class="container">
5+
{% block content %}
6+
<div class="space-y-8" x-data="{ selectedMessage: null, modalOpen: false }">
7+
<!-- Header -->
8+
<div class="flex flex-col md:flex-row justify-between items-end md:items-center gap-4 border-b border-slate-100 dark:border-slate-800 pb-8">
9+
<div>
10+
<h1 class="text-3xl font-black text-slate-900 dark:text-white tracking-tight uppercase">Contact Messages</h1>
11+
<p class="text-slate-500 dark:text-slate-400 font-medium text-xs uppercase tracking-widest mt-1">Manage inquiries from your website</p>
12+
</div>
13+
</div>
714

8-
<div class="card">
9-
<div class="card-body">
10-
<table class="table">
15+
<!-- Table -->
16+
<div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl overflow-hidden shadow-sm">
17+
<div class="overflow-x-auto">
18+
<table class="w-full text-left border-collapse">
1119
<thead>
12-
<th>Name</th>
13-
<th>Mail</th>
14-
<th>Date</th>
15-
<th>Info</th>
20+
<tr class="bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-100 dark:border-slate-800">
21+
<th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Name</th>
22+
<th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Email</th>
23+
<th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Date</th>
24+
<th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] text-right">Actions</th>
25+
</tr>
1626
</thead>
17-
<tbody>
18-
{%for message in messages.items%}
19-
<tr>
20-
<td>{{message.name}}</td>
21-
<td>{{message.email}}</td>
22-
<td>{{message.created_date}}</td>
23-
<td>
24-
<button
25-
type="button"
26-
class="btn btn-primary"
27-
data-bs-toggle="modal"
28-
data-bs-target="#modal-{{message.id}}"
29-
>
30-
view message
27+
<tbody class="divide-y divide-slate-100 dark:divide-slate-800">
28+
{% for message in messages.items %}
29+
<tr class="hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-colors group">
30+
<td class="px-6 py-4">
31+
<span class="text-xs font-bold text-slate-900 dark:text-white">{{ message.name }}</span>
32+
</td>
33+
<td class="px-6 py-4 text-xs text-slate-500 dark:text-slate-400">
34+
{{ message.email }}
35+
</td>
36+
<td class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
37+
{{ message.created_date.strftime('%Y-%m-%d %H:%M') if message.created_date else '' }}
38+
</td>
39+
<td class="px-6 py-4 text-right">
40+
<button
41+
@click="selectedMessage = { name: '{{ message.name }}', email: '{{ message.email }}', content: `{{ message.message | replace('\n', '<br>') | safe }}` }; modalOpen = true"
42+
class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-primary/10 text-primary hover:bg-primary hover:text-white text-[10px] font-black uppercase tracking-widest transition-all">
43+
<i class="fas fa-eye"></i>
44+
View
3145
</button>
3246
</td>
3347
</tr>
34-
<!-- Modal -->
35-
<div class="modal fade" id="modal-{{message.id}}" tabindex="-1" aria-hidden="true">
36-
<div class="modal-dialog" role="document">
37-
<div class="modal-content">
38-
<div class="modal-header">
39-
<h5 class="modal-title" id="exampleModalLabel1">Message</h5>
40-
<button
41-
type="button"
42-
class="btn-close"
43-
data-bs-dismiss="modal"
44-
aria-label="Close"
45-
></button>
46-
</div>
47-
<div class="modal-body">
48-
{{message.message}}
49-
</div>
50-
<div class="modal-footer">
51-
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
52-
Close
53-
</button>
54-
48+
{% endfor %}
49+
{% if not messages.items %}
50+
<tr>
51+
<td colspan="4" class="px-6 py-12 text-center">
52+
<div class="flex flex-col items-center">
53+
<div class="w-12 h-12 rounded-2xl bg-slate-50 dark:bg-slate-800 flex items-center justify-center text-slate-300 dark:text-slate-600 text-xl mb-4">
54+
<i class="fas fa-inbox"></i>
55+
</div>
56+
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest">No messages found</p>
5557
</div>
56-
</div>
57-
</div>
58-
</div>
59-
</div>
60-
</div>
61-
{%endfor%}
58+
</td>
59+
</tr>
60+
{% endif %}
6261
</tbody>
6362
</table>
6463
</div>
64+
65+
<!-- Pagination -->
66+
{% if messages.pages > 1 %}
67+
<div class="px-6 py-4 bg-slate-50/50 dark:bg-slate-800/50 border-t border-slate-100 dark:border-slate-800 flex justify-between items-center">
68+
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
69+
Page {{ messages.page }} of {{ messages.pages }}
70+
</div>
71+
<div class="flex gap-2">
72+
{% if messages.has_prev %}
73+
<a href="{{ url_for('contact.dashboard', page=messages.prev_num) }}" class="px-3 py-1 rounded-lg border border-slate-200 dark:border-slate-700 text-[10px] font-black uppercase tracking-widest hover:bg-white dark:hover:bg-slate-900 transition-all text-slate-600 dark:text-slate-300">Prev</a>
74+
{% endif %}
75+
{% if messages.has_next %}
76+
<a href="{{ url_for('contact.dashboard', page=messages.next_num) }}" class="px-3 py-1 rounded-lg border border-slate-200 dark:border-slate-700 text-[10px] font-black uppercase tracking-widest hover:bg-white dark:hover:bg-slate-900 transition-all text-slate-600 dark:text-slate-300">Next</a>
77+
{% endif %}
78+
</div>
79+
</div>
80+
{% endif %}
6581
</div>
66-
</div>
6782

83+
<!-- Alpine Modal -->
84+
<div
85+
x-show="modalOpen"
86+
class="fixed inset-0 z-50 overflow-y-auto"
87+
x-cloak
88+
>
89+
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
90+
<!-- Overlay -->
91+
<div
92+
x-show="modalOpen"
93+
x-transition:enter="ease-out duration-300"
94+
x-transition:enter-start="opacity-0"
95+
x-transition:enter-end="opacity-100"
96+
x-transition:leave="ease-in duration-200"
97+
x-transition:leave-start="opacity-100"
98+
x-transition:leave-end="opacity-0"
99+
@click="modalOpen = false"
100+
class="fixed inset-0 transition-opacity bg-slate-950/60 backdrop-blur-sm"
101+
></div>
68102

103+
<!-- Modal Panel -->
104+
<div
105+
x-show="modalOpen"
106+
x-transition:enter="ease-out duration-300"
107+
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
108+
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
109+
x-transition:leave="ease-in duration-200"
110+
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
111+
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
112+
class="inline-block w-full max-w-xl p-8 my-8 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-900 shadow-2xl rounded-3xl border border-slate-100 dark:border-slate-800"
113+
>
114+
<div class="flex justify-between items-start mb-6">
115+
<div>
116+
<h3 class="text-xl font-black text-slate-900 dark:text-white uppercase tracking-tight" x-text="selectedMessage?.name"></h3>
117+
<p class="text-[10px] font-bold text-primary uppercase tracking-widest mt-1" x-text="selectedMessage?.email"></p>
118+
</div>
119+
<button @click="modalOpen = false" class="text-slate-400 hover:text-slate-600 dark:hover:text-white transition-colors">
120+
<i class="fas fa-times"></i>
121+
</button>
122+
</div>
123+
124+
<div class="bg-slate-50 dark:bg-slate-800/50 rounded-2xl p-6 border border-slate-100 dark:border-slate-700/50">
125+
<div class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed whitespace-pre-wrap" x-html="selectedMessage?.content"></div>
126+
</div>
69127

70-
{%endblock%}
128+
<div class="mt-8 flex justify-end">
129+
<button @click="modalOpen = false" class="px-6 py-3 rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-[10px] font-black uppercase tracking-[0.2em] hover:bg-slate-200 dark:hover:bg-slate-700 transition-all">
130+
Close
131+
</button>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
</div>
137+
{% endblock %}

0 commit comments

Comments
 (0)