Fix icon hover colors, text alignment, and UI improvements

This commit is contained in:
Krikorios
2026-02-25 23:25:59 +02:00
parent 00fda3e045
commit fcc4352afa
46 changed files with 4011 additions and 600 deletions
+30 -13
View File
@@ -112,6 +112,12 @@
<span>Bookings</span>
</a>
</li>
<li class="nav-item">
<a href="/admin/availability.html" class="nav-link">
<i class="fas fa-clock"></i>
<span>Availability</span>
</a>
</li>
</ul>
</div>
@@ -162,7 +168,7 @@
<div class="header-notifications">
<button class="notification-btn">
<i class="fas fa-bell"></i>
<span class="notification-badge">3</span>
<span class="notification-badge" id="notif-badge">0</span>
</button>
</div>
@@ -325,8 +331,14 @@
const stats = response.data;
// Update Messages Stats
document.getElementById('stat-messages-count').textContent = stats.messages?.unread || 0;
const unreadCount = stats.messages?.unread || 0;
document.getElementById('stat-messages-count').textContent = unreadCount;
document.getElementById('stat-messages-total').textContent = `${stats.messages?.total || 0} total`;
const badge = document.getElementById('notif-badge');
if (badge) {
badge.textContent = unreadCount;
badge.style.display = unreadCount > 0 ? '' : 'none';
}
// Update Bookings Stats
document.getElementById('stat-bookings-count').textContent = stats.bookings?.pending || 0;
@@ -355,14 +367,14 @@
container.innerHTML = response.data.map(item => `
<div class="content-item">
<div class="item-image">
<img src="${item.featured_image || '/images/logo/logo.png'}" alt="${item.title}" style="object-fit: cover;">
<img src="${item.featured_image || '/images/logo/logo.png'}" alt="${MSPE.escapeHtml(item.title)}" style="object-fit: cover;">
</div>
<div class="item-info">
<h4>${item.title}</h4>
<span class="item-meta">${MSPE.formatDate(item.created_at)}${item.category || 'News'}</span>
<h4>${MSPE.escapeHtml(item.title)}</h4>
<span class="item-meta">${MSPE.formatDate(item.created_at)}${MSPE.escapeHtml(item.category || 'News')}</span>
</div>
<div class="item-actions">
<a href="/admin/news.html?edit=${item.id}" class="action-btn edit"><i class="fas fa-edit"></i></a>
<a href="/admin/news.html?edit=${encodeURIComponent(item.id)}" class="action-btn edit"><i class="fas fa-edit"></i></a>
</div>
</div>
`).join('');
@@ -392,19 +404,24 @@
const container = document.getElementById('recent-messages');
if (response && response.success && response.data && response.data.length > 0) {
container.innerHTML = response.data.map(msg => `
<div class="message-item" style="cursor: pointer;" onclick="window.location.href='/admin/messages.html?id=${msg.id}'">
container.innerHTML = response.data.map(msg => {
const safeName = MSPE.escapeHtml((msg.first_name || 'Unknown') + ' ' + (msg.last_name || ''));
const safePreview = MSPE.escapeHtml((msg.message || '').substring(0, 50)) + (msg.message && msg.message.length > 50 ? '...' : '');
const safeStatus = ['unread', 'read', 'replied'].includes(msg.status) ? msg.status : 'unread';
const safeId = encodeURIComponent(msg.id);
return `
<a class="message-item" style="cursor: pointer; text-decoration: none; color: inherit;" href="/admin/messages.html?id=${safeId}">
<div class="message-avatar">
<img src="https://ui-avatars.com/api/?name=${encodeURIComponent((msg.first_name || 'U') + ' ' + (msg.last_name || ''))}&background=random" alt="Avatar">
</div>
<div class="message-info">
<h4>${msg.first_name || 'Unknown'} ${msg.last_name || ''}</h4>
<p>${(msg.message || '').substring(0, 50)}${msg.message && msg.message.length > 50 ? '...' : ''}</p>
<h4>${safeName}</h4>
<p>${safePreview}</p>
<span class="message-time">${MSPE.formatDate(msg.created_at)}</span>
</div>
<span class="message-status ${msg.status || 'unread'}"></span>
</div>
`).join('');
<span class="message-status ${safeStatus}"></span>
</a>`;
}).join('');
} else {
container.innerHTML = `
<div class="empty-state" style="padding: 2rem; text-align: center;">