diff --git a/website/src/components/ComponentHeadline.astro b/website/src/components/ComponentHeadline.astro index 961aff1b..1731ad94 100644 --- a/website/src/components/ComponentHeadline.astro +++ b/website/src/components/ComponentHeadline.astro @@ -1,7 +1,17 @@ --- +import { fragmentLinkScrollMargin } from '../layouts/base/header/headerConstants'; +interface Props { + title: string; +} +const { title } = Astro.props; + +const fragmentId = title.toLowerCase().replace(/ /g, '-'); --- -

- +

+ + {title} + +

diff --git a/website/src/components/ComponentWrapper.astro b/website/src/components/ComponentWrapper.astro index 5be56e5c..7765e2b5 100644 --- a/website/src/components/ComponentWrapper.astro +++ b/website/src/components/ComponentWrapper.astro @@ -9,7 +9,7 @@ const { title, height = '400px' } = Astro.props; ---
- {title} +
diff --git a/website/src/components/genspectrum/GsStatistics.astro b/website/src/components/genspectrum/GsStatistics.astro new file mode 100644 index 00000000..e365d629 --- /dev/null +++ b/website/src/components/genspectrum/GsStatistics.astro @@ -0,0 +1,21 @@ +--- +import type { LapisFilter } from '@genspectrum/dashboard-components/util'; + +import ComponentHeadline from '../ComponentHeadline.astro'; + +interface Props { + numeratorFilter: LapisFilter; + denominatorFilter: LapisFilter; +} + +const { numeratorFilter, denominatorFilter } = Astro.props; +--- + +
+ + +
diff --git a/website/src/components/views/analyzeSingleVariant/GenericAnalyzeSingleVariantPage.astro b/website/src/components/views/analyzeSingleVariant/GenericAnalyzeSingleVariantPage.astro index bee2a1d4..bd90ca32 100644 --- a/website/src/components/views/analyzeSingleVariant/GenericAnalyzeSingleVariantPage.astro +++ b/website/src/components/views/analyzeSingleVariant/GenericAnalyzeSingleVariantPage.astro @@ -10,12 +10,12 @@ import { toDisplayName } from '../../../views/pageStateHandlers/PageStateHandler import { type OrganismViewKey, type OrganismWithViewKey } from '../../../views/routing'; import { ServerSide } from '../../../views/serverSideRouting'; import { singleVariantViewKey } from '../../../views/viewKeys'; -import ComponentHeadline from '../../ComponentHeadline.astro'; import ComponentsGrid from '../../ComponentsGrid.astro'; import GsAggregate from '../../genspectrum/GsAggregate.astro'; import GsMutations from '../../genspectrum/GsMutations.astro'; import GsMutationsOverTime from '../../genspectrum/GsMutationsOverTime.astro'; import GsPrevalenceOverTime from '../../genspectrum/GsPrevalenceOverTime.astro'; +import GsStatistics from '../../genspectrum/GsStatistics.astro'; import { AnalyzeSingleVariantSelectorFallback } from '../../pageStateSelectors/FallbackElement'; import { SingleVariantPageStateSelector } from '../../pageStateSelectors/SingleVariantPageStateSelector'; import { sanitizeForFilename } from '../compareSideBySide/toDownloadLink'; @@ -92,15 +92,7 @@ const downloadLinks = noVariantSelected ) : (
-
- Stats - -
+ + diff --git a/website/src/layouts/base/header/headerConstants.ts b/website/src/layouts/base/header/headerConstants.ts index df29f12d..f89d1445 100644 --- a/website/src/layouts/base/header/headerConstants.ts +++ b/website/src/layouts/base/header/headerConstants.ts @@ -1 +1,8 @@ export const headerHeight = 'h-16'; + +/** + * Account for the header when scrolling to a fragment link (href="#my-fragment"). + * Otherwise, the fragment that we scroll to will be hidden behind the header. + * The height must match the header height (plus a little extra spacing). + */ +export const fragmentLinkScrollMargin = 'scroll-mt-20'; diff --git a/website/src/pages/covid/single-variant.astro b/website/src/pages/covid/single-variant.astro index 60645a0e..4ccf49d1 100644 --- a/website/src/pages/covid/single-variant.astro +++ b/website/src/pages/covid/single-variant.astro @@ -1,11 +1,11 @@ --- -import ComponentHeadline from '../../components/ComponentHeadline.astro'; import ComponentsGrid from '../../components/ComponentsGrid.astro'; import GsAggregate from '../../components/genspectrum/GsAggregate.astro'; import GsMutations from '../../components/genspectrum/GsMutations.astro'; import GsMutationsOverTime from '../../components/genspectrum/GsMutationsOverTime.astro'; import GsPrevalenceOverTime from '../../components/genspectrum/GsPrevalenceOverTime.astro'; import GsRelativeGrowthAdvantage from '../../components/genspectrum/GsRelativeGrowthAdvantage.astro'; +import GsStatistics from '../../components/genspectrum/GsStatistics.astro'; import { AnalyzeSingleVariantSelectorFallback } from '../../components/pageStateSelectors/FallbackElement'; import { SingleVariantPageStateSelector } from '../../components/pageStateSelectors/SingleVariantPageStateSelector'; import { CollectionsList } from '../../components/views/analyzeSingleVariant/CollectionsList'; @@ -95,15 +95,7 @@ const downloadLinks = noVariantSelected ) : (
-
- Stats - -
+