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
+38 -13
View File
@@ -451,15 +451,15 @@
<div class="quick-slots">
<label>Quick Add Times</label>
<div class="quick-slots-grid">
<button type="button" class="quick-slot-btn" onclick="addQuickTime('09:00')">9:00 AM</button>
<button type="button" class="quick-slot-btn" onclick="addQuickTime('10:00')">10:00 AM</button>
<button type="button" class="quick-slot-btn" onclick="addQuickTime('11:00')">11:00 AM</button>
<button type="button" class="quick-slot-btn" onclick="addQuickTime('13:00')">1:00 PM</button>
<button type="button" class="quick-slot-btn" onclick="addQuickTime('14:00')">2:00 PM</button>
<button type="button" class="quick-slot-btn" onclick="addQuickTime('15:00')">3:00 PM</button>
<button type="button" class="quick-slot-btn" onclick="addQuickTime('16:00')">4:00 PM</button>
<button type="button" class="quick-slot-btn" onclick="addQuickTime('17:00')">5:00 PM</button>
<button type="button" class="quick-slot-btn" onclick="addQuickTime('18:00')">6:00 PM</button>
<button type="button" class="quick-slot-btn" data-time="09:00">9:00 AM</button>
<button type="button" class="quick-slot-btn" data-time="10:00">10:00 AM</button>
<button type="button" class="quick-slot-btn" data-time="11:00">11:00 AM</button>
<button type="button" class="quick-slot-btn" data-time="13:00">1:00 PM</button>
<button type="button" class="quick-slot-btn" data-time="14:00">2:00 PM</button>
<button type="button" class="quick-slot-btn" data-time="15:00">3:00 PM</button>
<button type="button" class="quick-slot-btn" data-time="16:00">4:00 PM</button>
<button type="button" class="quick-slot-btn" data-time="17:00">5:00 PM</button>
<button type="button" class="quick-slot-btn" data-time="18:00">6:00 PM</button>
</div>
</div>
@@ -467,7 +467,7 @@
<button type="submit" class="btn btn-primary">
<i class="fas fa-plus"></i> Add Slot
</button>
<button type="button" class="btn btn-secondary" onclick="generateWeekSlots()">
<button type="button" class="btn btn-secondary" id="generate-week-btn">
<i class="fas fa-calendar-week"></i> Generate Week
</button>
</div>
@@ -577,6 +577,31 @@
document.getElementById('block-time-form').addEventListener('submit', handleBlockTime);
document.getElementById('filter-date-from').addEventListener('change', filterSlots);
document.getElementById('filter-date-to').addEventListener('change', filterSlots);
document.getElementById('generate-week-btn').addEventListener('click', generateWeekSlots);
document.querySelector('.quick-slots-grid')?.addEventListener('click', function(event) {
const btn = event.target.closest('.quick-slot-btn[data-time]');
if (!btn) return;
addQuickTime(btn.dataset.time);
});
document.getElementById('blocked-times-list').addEventListener('click', function(event) {
const btn = event.target.closest('[data-action="unblock-time"]');
if (!btn) return;
unblockTime(btn.dataset.id);
});
document.getElementById('slots-table-body').addEventListener('click', function(event) {
const btn = event.target.closest('[data-action]');
if (!btn) return;
const { action, id } = btn.dataset;
if (action === 'toggle-slot' && id) {
toggleSlot(id);
} else if (action === 'delete-slot' && id) {
deleteSlot(id);
}
});
}
function setDefaultDate() {
@@ -663,7 +688,7 @@
<span style="font-weight: 600;">${formattedTime}</span>
${blocked.reason ? `<span style="color: #64748b; font-size: 0.875rem; margin-left: 0.5rem;">(${blocked.reason})</span>` : ''}
</div>
<button onclick="unblockTime('${blocked.id}')" style="background: none; border: none; color: #dc2626; cursor: pointer; padding: 0.25rem;">
<button data-action="unblock-time" data-id="${blocked.id}" style="background: none; border: none; color: #dc2626; cursor: pointer; padding: 0.25rem;">
<i class="fas fa-times"></i>
</button>
</div>
@@ -837,10 +862,10 @@
<span style="color: var(--gray-500);">${slot.notes || '-'}</span>
</td>
<td>
<button class="action-btn toggle" onclick="toggleSlot('${slot.id}')">
<button class="action-btn toggle" data-action="toggle-slot" data-id="${slot.id}">
<i class="fas fa-${isAvailable ? 'eye-slash' : 'eye'}"></i>
</button>
<button class="action-btn delete" onclick="deleteSlot('${slot.id}')">
<button class="action-btn delete" data-action="delete-slot" data-id="${slot.id}">
<i class="fas fa-trash"></i>
</button>
</td>