Fix icon hover colors, text alignment, and UI improvements
This commit is contained in:
+39
-7
@@ -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()">×</button>
|
||||
<button class="modal-close" id="member-modal-close">×</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>
|
||||
|
||||
Reference in New Issue
Block a user