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
+39 -7
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>
@@ -154,7 +160,7 @@
</div>
<div class="header-right">
<button class="btn btn-primary" onclick="openAddMemberModal()">
<button class="btn btn-primary" id="add-member-btn">
<i class="fas fa-plus"></i> Add Team Member
</button>
@@ -216,7 +222,7 @@
<div class="modal-container">
<div class="modal-header">
<h2 id="modal-title">Add Team Member</h2>
<button class="modal-close" onclick="closeModal()">&times;</button>
<button class="modal-close" id="member-modal-close">&times;</button>
</div>
<div class="modal-body">
<form id="member-form">
@@ -298,8 +304,8 @@
</form>
</div>
<div class="modal-footer">
<button class="btn btn-outline" onclick="closeModal()">Cancel</button>
<button class="btn btn-primary" onclick="saveMember()">
<button class="btn btn-outline" id="member-cancel-btn">Cancel</button>
<button class="btn btn-primary" id="member-save-btn">
<i class="fas fa-save"></i> Save Member
</button>
</div>
@@ -311,6 +317,7 @@
let teamMembers = [];
document.addEventListener('DOMContentLoaded', function() {
setupEventListeners();
loadTeam();
document.getElementById('department-filter').addEventListener('change', filterTeam);
@@ -329,6 +336,31 @@
});
});
function setupEventListeners() {
document.getElementById('add-member-btn')?.addEventListener('click', openAddMemberModal);
document.getElementById('member-modal-close')?.addEventListener('click', closeModal);
document.getElementById('member-cancel-btn')?.addEventListener('click', closeModal);
document.getElementById('member-save-btn')?.addEventListener('click', saveMember);
const modalBackdrop = document.querySelector('#member-modal .modal-backdrop');
modalBackdrop?.addEventListener('click', closeModal);
const grid = document.getElementById('team-grid');
grid?.addEventListener('click', function(event) {
const actionBtn = event.target.closest('[data-action]');
if (!actionBtn) return;
const { action, id } = actionBtn.dataset;
if (action === 'edit' && id) {
editMember(id);
} else if (action === 'delete' && id) {
deleteMember(id);
} else if (action === 'change-photo' && id) {
changePhoto(id);
}
});
}
async function loadTeam() {
try {
const response = await MSPE.API.get('team.php');
@@ -364,7 +396,7 @@
<div class="team-member-photo">
<img src="${member.photo || 'https://ui-avatars.com/api/?name=' + encodeURIComponent(member.name) + '&background=random'}" alt="${member.name}">
<div class="photo-overlay">
<button class="btn btn-sm btn-outline" onclick="editMember('${member.id}')">
<button class="btn btn-sm btn-outline" data-action="change-photo" data-id="${member.id}">
<i class="fas fa-camera"></i> Change
</button>
</div>
@@ -380,10 +412,10 @@
${member.email ? `<a href="mailto:${member.email}" class="social-icon email"><i class="fas fa-envelope"></i></a>` : ''}
</div>
<div class="team-admin-actions">
<button class="btn btn-sm btn-outline" onclick="editMember('${member.id}')">
<button class="btn btn-sm btn-outline" data-action="edit" data-id="${member.id}">
<i class="fas fa-edit"></i> Edit
</button>
<button class="btn btn-sm btn-danger" onclick="deleteMember('${member.id}')">
<button class="btn btn-sm btn-danger" data-action="delete" data-id="${member.id}">
<i class="fas fa-trash"></i>
</button>
</div>