diff --git a/CHANGELOG.md b/CHANGELOG.md index c9e6f2a..0b3399e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ --- develop --- +* issue: Fix the dashboard page not scrolling with the mouse wheel over chart panels: charts were sized from the whole card (header included) and overflowed the card body, turning it into a nested scroller that captured the wheel; charts now keep their server-sized height (which also stops pie/treemap charts growing on every window resize) and card bodies no longer scroll vertically +* issue: Keep long Panel Details content inside the dialog and scrollable, instead of spilling under the Close button pane, on themes (e.g. deepness) that force `.ui-dialog-content` to `overflow: visible`; the dialog height is also capped to the viewport * issue: Render dashboard panels with a shared, self-contained card chrome (bundled `includes/cards/cards.css` + `cards.js`, no cross-plugin dependency): a left-hand drag handle and unified per-card tools (grow/shrink height, maximize, reload, remove), replacing jQuery UI Sortable with a keyboard-accessible drag; growing/shrinking a panel now resizes it immediately before the persist+reload round-trip * issue: Show the panel "Reload Panel" glyph as a refresh icon (fa-sync-alt) that spins while the panel reloads, instead of the retweet glyph * issue: Tune the panel titlebar severity palette per theme so green (good), orange (warning) and red (bad) read as those colors but with theme-appropriate tone and legible text on every theme (replaces the garish/olive green, pure `yellow` and black-on-mid-green text that were copied across all themes); deepness already had this treatment and is unchanged diff --git a/css/common.css b/css/common.css index 689c117..54bcf72 100644 --- a/css/common.css +++ b/css/common.css @@ -73,6 +73,13 @@ min-height: 180px; } +/* Cards grow to fit their content, so the body never needs its own vertical + scroller. cards.css sets overflow-x: auto, which implicitly makes overflow-y + auto too; a few px of overflow then traps the mouse wheel inside the card. */ +#panel_container .ccCardBody { + overflow-y: hidden; +} + .chart_wrapper { position: relative; margin: auto; @@ -127,6 +134,15 @@ scroll: auto; } +/* Some themes (e.g. deepness) force .ui-dialog-content to overflow: visible, + which lets long details spill under the button pane with no scrollbar. + clear: both stops the now-BFC content from sitting beside the floated title + when it overhangs the fixed-height titlebar. */ +.ui-dialog #overlay.ui-dialog-content { + overflow: auto; + clear: both; +} + #overlay_detail { text-align: left; overflow: auto; diff --git a/includes/intropage.js b/includes/intropage.js index 66e6f6c..4c8dca5 100644 --- a/includes/intropage.js +++ b/includes/intropage.js @@ -51,7 +51,12 @@ function resizeCharts() { var windWidth = $(window).width() - 34; var panelWidth = $(this).closest('.panel_wrapper').width() - 34; var width = Math.min(windWidth, panelWidth); - var height = $(this).closest('.panel_wrapper').height() - 30; + + // Keep the server-sized chart height. .panel_wrapper also holds the card + // header and body padding, so deriving the height from it oversizes the + // chart, overflows .ccCardBody and turns it into a nested scroller that + // swallows mouse-wheel scrolling of the page. + var height = $(this).height(); if (panels[chart] != undefined) { panels[chart].resize({ width: width, height:height }); @@ -514,7 +519,7 @@ function intropage_open_details(panel_id) { icon: 'ui-icon-heart' }], width: width, - maxHeight: 650, + maxHeight: Math.min(650, $(window).height() - 40), resizable: true, title: intropage_text_panel_details, });