CSS class migrations: stat-card cursor, view toggle, bulk actions visibility
- Replace stat-card cursor:pointer inline style with CSS rule - Convert view toggle (table/card) to use .is-hidden CSS class - Convert bulk-actions and export-dropdown to use .is-visible class - Add .is-hidden/.is-visible utility rules to dashboard.css - Remove duplicate lt.keys.initDefaults() call from dashboard.js - Remove redundant setTimeout from view mode restore - Add lt.keys.initDefaults() to dashboard.js (was missing entirely) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1413,6 +1413,11 @@ h1 {
|
|||||||
.loading-overlay--hiding { opacity: 0; }
|
.loading-overlay--hiding { opacity: 0; }
|
||||||
.has-overlay { position: relative; }
|
.has-overlay { position: relative; }
|
||||||
|
|
||||||
|
/* Visibility utilities — !important required to override HTML inline style="display:none" */
|
||||||
|
.is-hidden { display: none !important; }
|
||||||
|
.bulk-actions-inline.is-visible { display: flex !important; }
|
||||||
|
.export-dropdown.is-visible { display: inline-block !important; }
|
||||||
|
|
||||||
.loading-overlay .loading-text {
|
.loading-overlay .loading-text {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
animation: blink-cursor 1s step-end infinite;
|
animation: blink-cursor 1s step-end infinite;
|
||||||
@@ -4580,6 +4585,7 @@ tr:hover .quick-actions {
|
|||||||
transition: border-color 0.2s ease, transform 0.15s ease;
|
transition: border-color 0.2s ease, transform 0.15s ease;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Corner accent */
|
/* Corner accent */
|
||||||
|
|||||||
@@ -683,22 +683,14 @@ function updateSelectionCount() {
|
|||||||
const exportCount = document.getElementById('exportCount');
|
const exportCount = document.getElementById('exportCount');
|
||||||
|
|
||||||
if (toolbar && countDisplay) {
|
if (toolbar && countDisplay) {
|
||||||
if (count > 0) {
|
toolbar.classList.toggle('is-visible', count > 0);
|
||||||
toolbar.style.display = 'flex';
|
if (count > 0) countDisplay.textContent = count;
|
||||||
countDisplay.textContent = count;
|
|
||||||
} else {
|
|
||||||
toolbar.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show/hide export dropdown based on selection
|
// Show/hide export dropdown based on selection
|
||||||
if (exportDropdown) {
|
if (exportDropdown) {
|
||||||
if (count > 0) {
|
exportDropdown.classList.toggle('is-visible', count > 0);
|
||||||
exportDropdown.style.display = '';
|
if (count > 0 && exportCount) exportCount.textContent = count;
|
||||||
if (exportCount) exportCount.textContent = count;
|
|
||||||
} else {
|
|
||||||
exportDropdown.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1359,14 +1351,14 @@ function setViewMode(mode) {
|
|||||||
if (!tableView || !cardView) return;
|
if (!tableView || !cardView) return;
|
||||||
|
|
||||||
if (mode === 'card') {
|
if (mode === 'card') {
|
||||||
tableView.style.display = 'none';
|
tableView.classList.add('is-hidden');
|
||||||
cardView.style.display = 'block';
|
cardView.classList.remove('is-hidden');
|
||||||
tableBtn.classList.remove('active');
|
tableBtn.classList.remove('active');
|
||||||
cardBtn.classList.add('active');
|
cardBtn.classList.add('active');
|
||||||
populateKanbanCards();
|
populateKanbanCards();
|
||||||
} else {
|
} else {
|
||||||
tableView.style.display = 'block';
|
tableView.classList.remove('is-hidden');
|
||||||
cardView.style.display = 'none';
|
cardView.classList.add('is-hidden');
|
||||||
tableBtn.classList.add('active');
|
tableBtn.classList.add('active');
|
||||||
cardBtn.classList.remove('active');
|
cardBtn.classList.remove('active');
|
||||||
}
|
}
|
||||||
@@ -1444,8 +1436,7 @@ function populateKanbanCards() {
|
|||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
const savedMode = localStorage.getItem('ticketViewMode');
|
const savedMode = localStorage.getItem('ticketViewMode');
|
||||||
if (savedMode === 'card') {
|
if (savedMode === 'card') {
|
||||||
// Delay to ensure DOM is ready
|
setViewMode('card');
|
||||||
setTimeout(() => setViewMode('card'), 100);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -1755,6 +1746,7 @@ function initRelativeTimes() {
|
|||||||
document.addEventListener('DOMContentLoaded', initRelativeTimes);
|
document.addEventListener('DOMContentLoaded', initRelativeTimes);
|
||||||
setInterval(initRelativeTimes, 60000);
|
setInterval(initRelativeTimes, 60000);
|
||||||
|
|
||||||
|
|
||||||
// Export for use in other scripts
|
// Export for use in other scripts
|
||||||
window.generateSkeletonRows = generateSkeletonRows;
|
window.generateSkeletonRows = generateSkeletonRows;
|
||||||
window.generateSkeletonComments = generateSkeletonComments;
|
window.generateSkeletonComments = generateSkeletonComments;
|
||||||
|
|||||||
@@ -524,7 +524,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
|
|||||||
<!-- END OUTER FRAME -->
|
<!-- END OUTER FRAME -->
|
||||||
|
|
||||||
<!-- Kanban Card View -->
|
<!-- Kanban Card View -->
|
||||||
<section id="cardView" class="card-view-container" style="display: none;" aria-label="Kanban board view">
|
<section id="cardView" class="card-view-container is-hidden" aria-label="Kanban board view">
|
||||||
<div class="kanban-board">
|
<div class="kanban-board">
|
||||||
<div class="kanban-column" data-status="Open">
|
<div class="kanban-column" data-status="Open">
|
||||||
<div class="kanban-column-header status-Open">
|
<div class="kanban-column-header status-Open">
|
||||||
@@ -992,7 +992,6 @@ $nonce = SecurityHeadersMiddleware::getNonce();
|
|||||||
|
|
||||||
// Stat card click handlers for filtering
|
// Stat card click handlers for filtering
|
||||||
document.querySelectorAll('.stat-card').forEach(card => {
|
document.querySelectorAll('.stat-card').forEach(card => {
|
||||||
card.style.cursor = 'pointer';
|
|
||||||
card.addEventListener('click', function() {
|
card.addEventListener('click', function() {
|
||||||
const classList = this.classList;
|
const classList = this.classList;
|
||||||
let url = '/?';
|
let url = '/?';
|
||||||
|
|||||||
Reference in New Issue
Block a user