Jt iss 28 design changes - #30
Open
JonTurnerGA4GH wants to merge 12 commits into
Open
Conversation
…/new_ga4gh - Add GA4GH-branded footer (logo, copyright, social icons via real Font Awesome icon fonts bundled locally, not inline SVG which Dash's Markdown sanitizer silently strips) - Rebuild navbar brand lockup, nav link styling, and fixed top-bar box model to match new_ga4gh's header/page chrome, including a shared fluid --text-* type scale and --font-* family tokens - Restyle hero section as new_ga4gh's standard-page hero (grey gradient, watermark logo, hr-hero divider) and give KPI/methods sections matching full-bleed section widths - Restyle persona selector as new_ga4gh's object-page tabs, and the methods/terms toggle with a real chevron icon instead of triangle chars - Equal-height/equal-width KPI and methods cards, consistent rem-based spacing, and misc Bootstrap gutter fixes (top-bar/KPI row edge cutoff) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…ign system - Navbar height matched to refcloud-ui (~64px), hero/scroll offsets adjusted - Brand color palette expanded and reordered (COLORWAY plus PUBLICATIONS_, GITHUB_, PYPI_, FUNDING_ COLORWAY, WORKSTREAM_COLORS), applied per-chart by semantic meaning instead of Plotly defaults - Typography: eliminated stray "Proxima Nova"/font mismatches, brought every chart title and h1-h5 in line with new_ga4gh's Work Sans/Figtree scale - Grey palette consolidated to new_ga4gh's 3 greys (lightgrey/grey/dark) - Charts: uniform donut hole ratio, bottom-centered legends clear of axis labels, white hover text, gridlines added consistently, pie/bar sizing fixed to reliably fill card width instead of being legend-constrained - Cards: equal-height and equal-width rows via flex/d-flex, figcaptions pinned 2rem below their chart consistently - Tables: pagination and view/link buttons restyled to new_ga4gh's btn-dark + disabled convention, authors/affiliations use the same chevron toggle as "Show methods and terms" - Maps: colors matched to new_ga4gh's services-map, zoom/pan clamped to the container, author-affiliation choropleth given the same mode-bar controls as the service map Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
… expand modal, pie label fixes - Add persona-driven nav bar entries (Publications, Funding, Research, Developer, Community) in page order, hiding/showing links to match the active persona's visible sections - Shrink/tighten nav link sizing and row gaps for 1080p+ layouts - Port new_ga4gh's list-filter search box/dropdown styling to the Tables section, fixing a duplicate-render bug on the year dropdown - Restyle the DataTable Export button and pagination page-number to match the site's button language and fix font/duplicate-render/alignment bugs inherited from dash_table's own runtime CSS - Fix EPMC choropleth colorbar overlapping the Plotly modebar - Re-enable the Plotly hover modebar across all charts - Add a chart "expand to fullscreen" modal (new_ga4gh image-modal look), wired to all 24 charts via a single delegated JS listener, plus centering/ width fixes - Add "Annual Publications" chart title - Make all pie chart labels render inside their slices consistently Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds mobile-only JS (pie/bar chart autofit, map autofit, colorbar orientation, hbar/vbar label badges, square line charts) plus CSS/layout fixes for legend spacing, 1rem card-edge gaps, dropdown/search full-width sizing, table export/pagination placement, and centered detail-panel buttons and pills. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
GitHub Activity Bar, GitHub Interest Metrics, PyPI's datatable-bar, and Top 15 Funding Agencies each share a row with a pie chart that already resizes to fill its card via autosize + config.responsive. These bar charts stayed pinned at a fixed pixel height regardless of viewport width or filter changes, leaving dead space once their card stretched to match the taller pie sibling. Switching them to the same autosize/responsive pattern lets them fill that space like the pie already does. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…pacing - External-link glyph (new_ga4gh's fa-external-link) on every card detail button that opens a different domain (target="_blank"), and on the Most Cited Publications table's "View" links, which also switch to red on hover. - New desktop-only watchdogs (desktop_bar_legend_fix.js, desktop_pie_legend_fix.js) keep every legend-bearing bar/pie chart's legend a real, continuously-measured 1rem below the x-axis/pie, instead of a fixed fraction tuned for one specific card height. - Standardized every chart's H5 title-to-chart gap to exactly 1rem (previously an inconsistent 6px/8px/12px, or unset). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bootstrap's margin-right:0.5rem !important had no visible effect on desktop (a standalone button with nothing to its right), but overrode the right half of the mobile centering rule's margin-inline:auto, leaving the button visibly off-center. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
EPMC red, GitHub green, PyPI purple, instead of the browser/OS default blue every table shared. accent-color was tried first but Chromium computes its own darkened shade for the checked ring, which read as a muddy dark ring for the green table — appearance:none with a hand-drawn ring/dot (same color, no browser-computed shading) gives exact control. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- Extract the identical margin.b/legend.y nudge logic shared by desktop_bar_legend_fix.js and desktop_pie_legend_fix.js into one window.__hbarBadgeHelpers.nudgeLegendGap helper; each file still does its own gap measurement (x-axis vs. pie-layer), which genuinely differs. - Merge chart-aspect-tall/-taller/-square's shared flex:1 1 auto into one grouped selector instead of repeating it three times. - Center the footer's logo/copyright block on mobile to match the already-centered social buttons block, instead of staying left-aligned once both stack to full width. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- Split .top-bar into an outer full-width chrome wrapper and an inner .top-bar-row capped at the site's own 1440px content width, so the logo/nav links stay grouped and centered on a wide monitor instead of spreading to the screen edges, while the bar's background/border still spans edge to edge. - Force the footer's two blocks (logo/copyright, social buttons) to always stack in a single column on mobile/tablet, instead of relying on flex-wrap, which let them sit side by side as two columns at the wider end of that breakpoint range. - Add a safety clamp to nudgeLegendGap (shared by all 5 legend-bearing bar charts) so margin.b can never grow past half the figure's own height — fixes a Firefox-only bug where GitHub Interest Metrics (and its sibling charts) would render correctly then shrink to no visible height, caused by a since-reverted resize-sync addition that misfired there. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
All visual changes complete in the new ga4gh styling both mobile and desktop.