diff --git a/admin/assets/dashboard.css b/admin/assets/dashboard.css index ed0b573..62a71c5 100644 --- a/admin/assets/dashboard.css +++ b/admin/assets/dashboard.css @@ -212,6 +212,89 @@ body .card { font-size: 0.875rem; } +/* ================================================================= + Collapsible Cards + ================================================================= */ + +.dashboard-analytics-wrap .collapsible-section { + margin-bottom: 1rem; +} + +.dashboard-analytics-wrap .collapsible-header { + cursor: pointer; + transition: all 0.2s ease; + text-align: left; + font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; +} + +.dashboard-analytics-wrap .collapsible-header:hover { + filter: brightness(1.1); +} + +.dashboard-analytics-wrap .collapsible-header:focus { + outline: none; + box-shadow: 0 0 0 2px rgba(255, 134, 0, 0.5); +} + +/* Chevron rotation */ +.dashboard-analytics-wrap .collapse-chevron { + transition: transform 0.3s ease; + font-size: 1rem; +} + +.dashboard-analytics-wrap .collapsible-header:not(.collapsed) .collapse-chevron { + transform: rotate(180deg); +} + +/* Header bordes */ +.dashboard-analytics-wrap .collapsible-header { + border-radius: 0.375rem; +} + +.dashboard-analytics-wrap .collapsible-header:not(.collapsed) { + border-radius: 0.375rem 0.375rem 0 0; +} + +/* Card sin borde superior cuando está expandido */ +.dashboard-analytics-wrap .collapsible-section .card { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-top: none; +} + +/* Loading en collapsible section */ +.dashboard-analytics-wrap .collapsible-section.is-loading-table { + position: relative; + pointer-events: none; +} + +.dashboard-analytics-wrap .collapsible-section.is-loading-table::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.7); + z-index: 10; + border-radius: 0.375rem; +} + +.dashboard-analytics-wrap .collapsible-section.is-loading-table::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 24px; + height: 24px; + margin: -12px 0 0 -12px; + border: 3px solid #f3f3f3; + border-top: 3px solid #FF8600; + border-radius: 50%; + z-index: 11; + animation: spin 0.8s linear infinite; +} + /* ================================================================= Responsive ================================================================= */ diff --git a/admin/assets/dashboard.js b/admin/assets/dashboard.js index e666d44..8d4a2e2 100644 --- a/admin/assets/dashboard.js +++ b/admin/assets/dashboard.js @@ -99,10 +99,10 @@ return; } - // Find the card container and add loading state (keeps size, shows overlay) - var card = tbody.closest('.card'); - if (card) { - card.classList.add('is-loading-table'); + // Find the collapsible section container and add loading state (keeps size, shows overlay) + var section = tbody.closest('.collapsible-section'); + if (section) { + section.classList.add('is-loading-table'); } // Build form data @@ -157,8 +157,8 @@ tbody.innerHTML = html; // Remove loading state - if (card) { - card.classList.remove('is-loading-table'); + if (section) { + section.classList.remove('is-loading-table'); } // Update pagination @@ -167,16 +167,16 @@ bindPaginationEvents(paginationDiv, tableId); } } else { - if (card) { - card.classList.remove('is-loading-table'); + if (section) { + section.classList.remove('is-loading-table'); } showErrorMessage('Error al cargar datos'); console.error('AJAX error:', result); } }) .catch(function(error) { - if (card) { - card.classList.remove('is-loading-table'); + if (section) { + section.classList.remove('is-loading-table'); } console.error('Fetch error:', error); showErrorMessage('Error de conexión'); diff --git a/admin/class-analytics-dashboard.php b/admin/class-analytics-dashboard.php index bf5c722..6176cd8 100644 --- a/admin/class-analytics-dashboard.php +++ b/admin/class-analytics-dashboard.php @@ -480,43 +480,56 @@ final class ROI_APU_Analytics_Dashboard -
-
-
+
+
- -
-
-

- -

-
- - - - - - - - - - - - - - - - - - - -
- - - 0 -
+ + + + + + + +
+
+
+

+ +

+
+ + + + + + + + + + + + + + + + + + + +
+ + + 0 +
+
+
@@ -524,41 +537,54 @@ final class ROI_APU_Analytics_Dashboard -
-
-
+
+
- -
-
-

- -

-
- - - - - - - - - - - - - - - - - -
- - - % -
+ + + + + + + +
+
+
+

+ +

+
+ + + + + + + + + + + + + + + + + +
+ + + % +
+
+
@@ -566,54 +592,67 @@ final class ROI_APU_Analytics_Dashboard -
-
-
+
+
- -
-
-

- 20% clicks vs período anterior. Revisa si están desactualizados.', 'roi-apu-search'); ?> -

-
- - - - - - - - - - - - - - - - - - - - - -
- - - % - - -
+ + + + + + + +
+
+
+

+ 20% clicks vs período anterior. Revisa si están desactualizados.', 'roi-apu-search'); ?> +

+
+ + + + + + + + + + + + + + + + + + + + + +
+ + + % + + +
+
+
@@ -621,52 +660,65 @@ final class ROI_APU_Analytics_Dashboard -
-
-
+
+
- -
-
-

- -

-
- - - - - - - - - - - - - - - - - - - -
- - - - - -
+ + + + + + + +
+
+
+

+ +

+
+ + + + + + + + + + + + + + + + + + + +
+ + + + + +
+
+
@@ -674,54 +726,67 @@ final class ROI_APU_Analytics_Dashboard -
-
-
+
+
- -
-
-

- -

-
- - - - - - - - - - - - - - - - - - - -
- - - - - - - -
+ + + + + + + +
+
+
+

+ +

+
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + + +
+
+
@@ -738,224 +803,276 @@ final class ROI_APU_Analytics_Dashboard -
-
-
+
+
- -
-
-
- - - - - - - - - - - '#FF8600', - 'Pos 2' => '#1e3a5f', - 'Pos 3' => '#2c5282', - 'Pos 4' => '#3d6894', - 'Pos 5' => '#4a7eb0', - 'Pos 6' => '#5a8ec0', - 'Pos 7' => '#6a9ed0', - 'Pos 8' => '#7aaee0', - 'Pos 9' => '#8abef0', - 'Pos 10' => '#9aceff', - 'Pos 11+' => '#6b7280', - ]; - foreach ($click_distribution as $dist) : - $color = $position_colors[$dist['posicion']] ?? '#6b7280'; - ?> - - - - - - - - -
- - - - % -
-
-
-
-
+ + + + + + + +
+
+
+
+ + + + + + + + + + + '#FF8600', + 'Pos 2' => '#1e3a5f', + 'Pos 3' => '#2c5282', + 'Pos 4' => '#3d6894', + 'Pos 5' => '#4a7eb0', + 'Pos 6' => '#5a8ec0', + 'Pos 7' => '#6a9ed0', + 'Pos 8' => '#7aaee0', + 'Pos 9' => '#8abef0', + 'Pos 10' => '#9aceff', + 'Pos 11+' => '#6b7280', + ]; + foreach ($click_distribution as $dist) : + $color = $position_colors[$dist['posicion']] ?? '#6b7280'; + ?> + + + + + + + + +
+ + + + % +
+
+
+
+
+
+
-
-
-
+
+
- -
-
-
- - - - - - - - - - - - - - - - - - - - - -
- - % - -
+ + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + +
+ + % + +
+
+
+ 1) : + ?> + +
- 1) : - ?> - -
-
-
-
+
+
- -
-
-
- - - - - - - - - - - - - - - - - - - -
- - - - - - - -
+ + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + + +
+
+
+ 1) : + ?> + +
- 1) : - ?> - -
-
-
-
+
+
- -
-
-

- -

-
- - - - - - - - - - - - - - - - - -
- - - -
+ + + + + + + +
+
+
+

+ +

+
+ + + + + + + + + + + + + + + + + +
+ + + +
+
+
+ 1) : + ?> + +
- 1) : - ?> - -