Templates update
This commit is contained in:
Alphonse Paix
2349
assets/css/main.css
2349
assets/css/main.css
File diff suppressed because one or more lines are too long
@@ -1,24 +1,34 @@
|
|||||||
<div id="subscriber-{{ subscriber.id }}"
|
<div id="subscriber-{{ subscriber.id }}"
|
||||||
class="bg-gray-50 rounded-lg p-4 border border-gray-200 {% if subscriber.confirmed() %}border-l-4 border-l-green-500{% else %}border-l-4 border-l-yellow-500{% endif %}">
|
class="block py-4 hover:bg-gray-50 -mx-6 px-6 transition-colors group {% if subscriber.confirmed() %}border-l-4 border-l-green-500{% else %}border-l-4 border-l-yellow-500{% endif %}">
|
||||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between">
|
<div class="flex items-start justify-between">
|
||||||
<div class="flex-1">
|
<div class="flex-1 min-w-0">
|
||||||
<div class="text-md font-medium text-gray-900 break-all">{{ subscriber.email }}</div>
|
<h3 class="text-sm font-medium text-gray-900 group-hover:text-blue-600 transition-colors mb-1 break-all">
|
||||||
<div class="text-sm text-gray-500 mt-1">{{ subscriber.formatted_date() }}</div>
|
{{ subscriber.email }}</h3>
|
||||||
</div>
|
<div class="flex items-center text-sm text-gray-500">
|
||||||
<div class="mt-3 sm:mt-0 sm:ml-4">
|
<svg class="w-4 h-4 mr-1.5"
|
||||||
<button hx-delete="/admin/subscribers/{{ subscriber.id }}"
|
|
||||||
hx-target="#subscriber-{{ subscriber.id }}"
|
|
||||||
hx-swap="outerHTML"
|
|
||||||
hx-confirm="Are you sure you want to delete this subscriber?"
|
|
||||||
class="inline-flex items-center py-1 px-2 text-sm font-medium text-red-500 bg-red-50 border-2 border-dashed border-red-300 rounded-md hover:bg-red-100 hover:border-red-400 hover:text-red-600 transition-all duration-200 group">
|
|
||||||
<svg class="w-4 h-4 mr-2 group-hover:scale-110 transition-transform"
|
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor">
|
stroke="currentColor">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||||
</svg>
|
</svg>
|
||||||
Delete
|
<time datetime="{{ subscriber.subscribed_at }}">
|
||||||
</button>
|
{{ subscriber.formatted_date() }}
|
||||||
|
</time>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<button hx-delete="/admin/subscribers/{{ subscriber.id }}"
|
||||||
|
hx-target="#subscriber-{{ subscriber.id }}"
|
||||||
|
hx-swap="outerHTML"
|
||||||
|
hx-confirm="Are you sure you want to delete this subscriber?"
|
||||||
|
class="inline-flex items-center p-2 text-sm font-medium text-red-500 bg-red-50 border-2 border-dashed border-red-300 rounded-md hover:bg-red-100 hover:border-red-400 hover:text-red-600 transition-all duration-200 flex-shrink-0 ml-4">
|
||||||
|
<svg class="w-4 h-4 group-hover:scale-110 transition-transform"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -7,10 +7,11 @@
|
|||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor">
|
stroke="currentColor">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
<circle cx="9" cy="7" r="4" />
|
d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
<circle cx="9" cy="7" r="4"/>
|
||||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||||
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||||
</svg>
|
</svg>
|
||||||
Subscribers management
|
Subscribers management
|
||||||
</h2>
|
</h2>
|
||||||
@@ -18,41 +19,45 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="subscribers-list" class="p-6 space-y-4">
|
<div id="subscribers-list" class="py-6 space-y-6">
|
||||||
{% block subs %}
|
{% block subs %}
|
||||||
{% if subscribers.is_empty() %}
|
{% if subscribers.is_empty() %}
|
||||||
<div class="bg-gray-50 rounded-lg p-8 border-2 border-dashed border-gray-300 text-center">
|
<div class="bg-gray-50 rounded-lg p-8 border-2 border-dashed border-gray-300 text-center">
|
||||||
<div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
|
<div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
<svg class="w-8 h-8 text-gray-500"
|
<svg class="w-8 h-8 text-gray-500"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor">
|
stroke="currentColor">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
</svg>
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||||
</div>
|
</svg>
|
||||||
<h3 class="text-lg font-medium text-gray-900 mb-2">No data available</h3>
|
|
||||||
<p class="text-gray-600">Content may have shifted due to recent updates or list is empty.</p>
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
{% for subscriber in subscribers %}
|
|
||||||
{% include "dashboard/subscribers/card.html" %}
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
<div class="flex items-center justify-center space-x-2">
|
|
||||||
<button hx-get="/admin/subscribers?page={{ current_page - 1 }}"
|
|
||||||
hx-target="#subscribers-list"
|
|
||||||
hx-swap="innerHTML"
|
|
||||||
hx-trigger="click"
|
|
||||||
class="px-3 py-1 text-sm font-medium text-gray-500 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 {% if current_page <= 1 %}opacity-50 cursor-not-allowed{% endif %}"
|
|
||||||
{% if current_page <= 1 %}disabled{% endif %}><</button>
|
|
||||||
<span class="px-3 py-1 text-sm font-medium text-gray-700 bg-gray-100 rounded-md">Page: {{ current_page }}</span>
|
|
||||||
<button hx-get="/admin/subscribers?page={{ current_page + 1 }}"
|
|
||||||
hx-target="#subscribers-list"
|
|
||||||
hx-swap="innerHTML"
|
|
||||||
hx-trigger="click"
|
|
||||||
class="px-3 py-1 text-sm font-medium text-gray-500 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 {% if current_page >= max_page %}opacity-50 cursor-not-allowed{% endif %}"
|
|
||||||
{% if current_page >= max_page %}disabled{% endif %}>></button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h3 class="text-lg font-medium text-gray-900 mb-2">No data available</h3>
|
||||||
|
<p class="text-gray-600">Content may have shifted due to recent updates or list is empty.</p>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div class="divide-y divide-gray-200">
|
||||||
|
{% for subscriber in subscribers %}
|
||||||
|
{% include "dashboard/subscribers/card.html" %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<div class="flex items-center justify-center space-x-2">
|
||||||
|
<button hx-get="/admin/subscribers?page={{ current_page - 1 }}"
|
||||||
|
hx-target="#subscribers-list"
|
||||||
|
hx-swap="innerHTML"
|
||||||
|
hx-trigger="click"
|
||||||
|
class="px-3 py-1 text-sm font-medium text-gray-500 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 {% if current_page <= 1 %}opacity-50 cursor-not-allowed{% endif %}"
|
||||||
|
{% if current_page <= 1 %}disabled{% endif %}><</button>
|
||||||
|
<span class="px-3 py-1 text-sm font-medium text-gray-700 bg-gray-100 rounded-md">Page: {{ current_page }}</span>
|
||||||
|
<button hx-get="/admin/subscribers?page={{ current_page + 1 }}"
|
||||||
|
hx-target="#subscribers-list"
|
||||||
|
hx-swap="innerHTML"
|
||||||
|
hx-trigger="click"
|
||||||
|
class="px-3 py-1 text-sm font-medium text-gray-500 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 {% if current_page >= max_page %}opacity-50 cursor-not-allowed{% endif %}"
|
||||||
|
{% if current_page>= max_page %}disabled{% endif %}>>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,39 +1,47 @@
|
|||||||
<div id="user-{{ user.user_id }}"
|
<div id="user-{{ user.user_id }}"
|
||||||
class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
class="block py-4 hover:bg-gray-50 px-6 transition-colors group">
|
||||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between">
|
<div class="flex items-start justify-between">
|
||||||
<div class="flex-1">
|
<div class="flex-1 min-w-0">
|
||||||
<div class="flex items-center space-x-2">
|
<div class="flex items-center space-x-2 mb-1">
|
||||||
<a href="/users/{{ user.username }}"
|
<a href="/users/{{ user.username }}"
|
||||||
class="font-medium text-gray-900 hover:text-blue-600 hover:underline truncate">
|
class="font-medium text-gray-900 group-hover:text-blue-600 transition-colors truncate">
|
||||||
{{ user.username }}
|
{{ user.username }}
|
||||||
</a>
|
</a>
|
||||||
{% if user.role.to_string() == "admin" %}
|
{% if user.role.to_string() == "admin" %}
|
||||||
<span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 flex-shrink-0">
|
<span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 flex-shrink-0">
|
||||||
admin
|
admin
|
||||||
</span>
|
</span>
|
||||||
{% else %}
|
{% else %}
|
||||||
<span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 flex-shrink-0">
|
<span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 flex-shrink-0">
|
||||||
writer
|
writer
|
||||||
</span>
|
</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm text-gray-500 mt-1">{{ user.formatted_date() }}</div>
|
<div class="flex items-center text-sm text-gray-500">
|
||||||
</div>
|
<svg class="w-4 h-4 mr-1.5"
|
||||||
<div class="mt-3 sm:mt-0 sm:ml-4">
|
|
||||||
<button hx-delete="/admin/users/{{ user.user_id }}"
|
|
||||||
hx-target="#user-{{ user.user_id }}"
|
|
||||||
hx-swap="outerHTML"
|
|
||||||
hx-confirm="Are you sure you want to delete this user?"
|
|
||||||
class="inline-flex items-center py-1 px-2 text-sm font-medium text-red-500 bg-red-50 border-2 border-dashed border-red-300 rounded-md hover:bg-red-100 hover:border-red-400 hover:text-red-600 transition-all duration-200 group">
|
|
||||||
<svg class="w-4 h-4 mr-2 group-hover:scale-110 transition-transform"
|
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor">
|
stroke="currentColor">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||||
</svg>
|
</svg>
|
||||||
Delete
|
<time datetime="{{ user.member_since }}">
|
||||||
</button>
|
{{ user.formatted_date() }}
|
||||||
|
</time>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<button hx-delete="/admin/users/{{ user.user_id }}"
|
||||||
|
hx-target="#user-{{ user.user_id }}"
|
||||||
|
hx-swap="outerHTML"
|
||||||
|
hx-confirm="Are you sure you want to delete this user?"
|
||||||
|
class="inline-flex items-center p-2 text-sm font-medium text-red-500 bg-red-50 border-2 border-dashed border-red-300 rounded-md hover:bg-red-100 hover:border-red-400 hover:text-red-600 transition-all duration-200 flex-shrink-0 ml-4">
|
||||||
|
<svg class="w-4 h-4 group-hover:scale-110 transition-transform"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -16,7 +16,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="users-list" class="p-6 space-y-4">
|
<div id="users-list" class="py-6">
|
||||||
{% if users.is_empty() %}
|
{% if users.is_empty() %}
|
||||||
<div class="bg-gray-50 rounded-lg p-8 border-2 border-dashed border-gray-300 text-center">
|
<div class="bg-gray-50 rounded-lg p-8 border-2 border-dashed border-gray-300 text-center">
|
||||||
<div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
|
<div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
@@ -32,9 +32,11 @@
|
|||||||
<p class="text-gray-600">No users in the system.</p>
|
<p class="text-gray-600">No users in the system.</p>
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
{% for user in users %}
|
<div class="divide-y divide-gray-200">
|
||||||
{% include "dashboard/users/card.html" %}
|
{% for user in users %}
|
||||||
{% endfor %}
|
{% include "dashboard/users/card.html" %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
Reference in New Issue
Block a user