further updates

This commit is contained in:
Raven Scott
2025-11-24 16:28:21 -05:00
parent 6469f620e6
commit 4bf3381270
6 changed files with 428 additions and 321 deletions
+43 -43
View File
@@ -566,9 +566,7 @@
/* Notification Tray Styles */
.notification-tray {
position: fixed;
top: var(--spacing-lg);
right: var(--spacing-lg);
position: relative;
z-index: 1060;
}
@@ -638,6 +636,7 @@
flex-direction: column;
overflow: hidden;
animation: slideDown 0.3s ease-out;
z-index: 1061;
}
.notification-panel.hidden {
@@ -872,13 +871,13 @@
}
.notification-tray {
top: var(--spacing-sm);
right: var(--spacing-sm);
/* Position is now relative, no top/right needed */
}
.notification-tray-toggle {
width: 40px;
height: 40px;
min-width: 40px;
}
.notification-tray-toggle i {
@@ -1749,7 +1748,45 @@
</select>
</div>
<div class="col-md-2">
<button id="clear-filters" class="btn btn-outline-secondary w-100">Clear</button>
<div class="d-flex gap-2 align-items-center">
<button id="clear-filters" class="btn btn-outline-secondary flex-grow-1">Clear</button>
<!-- Notification Tray -->
<div id="notification-tray" class="notification-tray">
<button id="notification-tray-toggle" class="notification-tray-toggle" aria-label="Notifications">
<i class="fas fa-bell"></i>
<span id="notification-badge" class="notification-badge">0</span>
</button>
<div id="notification-panel" class="notification-panel hidden">
<div class="notification-panel-header">
<h5 class="notification-panel-title">Notifications</h5>
<div class="notification-panel-actions">
<button id="mark-all-read-btn" class="notification-action-btn" title="Mark all as read">
<i class="fas fa-check-double"></i>
</button>
<button id="clear-all-btn" class="notification-action-btn" title="Clear all">
<i class="fas fa-trash"></i>
</button>
<button id="close-panel-btn" class="notification-action-btn" title="Close">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="notification-filters">
<button class="notification-filter-btn active" data-filter="all">All</button>
<button class="notification-filter-btn" data-filter="success">Success</button>
<button class="notification-filter-btn" data-filter="danger">Error</button>
<button class="notification-filter-btn" data-filter="warning">Warning</button>
<button class="notification-filter-btn" data-filter="info">Info</button>
</div>
<div id="notification-list" class="notification-list">
<div class="notification-empty">
<i class="fas fa-bell-slash"></i>
<p>No notifications</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -2935,43 +2972,6 @@
</div>
</div>
<!-- Notification Tray -->
<div id="notification-tray" class="notification-tray">
<button id="notification-tray-toggle" class="notification-tray-toggle" aria-label="Notifications">
<i class="fas fa-bell"></i>
<span id="notification-badge" class="notification-badge">0</span>
</button>
<div id="notification-panel" class="notification-panel hidden">
<div class="notification-panel-header">
<h5 class="notification-panel-title">Notifications</h5>
<div class="notification-panel-actions">
<button id="mark-all-read-btn" class="notification-action-btn" title="Mark all as read">
<i class="fas fa-check-double"></i>
</button>
<button id="clear-all-btn" class="notification-action-btn" title="Clear all">
<i class="fas fa-trash"></i>
</button>
<button id="close-panel-btn" class="notification-action-btn" title="Close">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="notification-filters">
<button class="notification-filter-btn active" data-filter="all">All</button>
<button class="notification-filter-btn" data-filter="success">Success</button>
<button class="notification-filter-btn" data-filter="danger">Error</button>
<button class="notification-filter-btn" data-filter="warning">Warning</button>
<button class="notification-filter-btn" data-filter="info">Info</button>
</div>
<div id="notification-list" class="notification-list">
<div class="notification-empty">
<i class="fas fa-bell-slash"></i>
<p>No notifications</p>
</div>
</div>
</div>
</div>
<!-- Legacy Alert Container (kept for backward compatibility, will be hidden) -->
<div id="alert-container" class="position-fixed top-0 start-50 translate-middle-x mt-3"
style="z-index: 1051; max-width: 90%; display: none;"></div>