Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(website): add fragment links to scroll to component headlines #444

Merged
merged 1 commit into from
Jan 7, 2025
+46 −24
Merged

feat(website): add fragment links to scroll to component headlines #444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions website/src/components/ComponentHeadline.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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, '-');
---

<h2 class='font-bold'>
<slot />
<h2 class={`font-bold ${fragmentLinkScrollMargin} `} id={fragmentId}>
<a href={`#${fragmentId}`} class='group flex items-center gap-1'>
{title}
<span class='iconify font-normal opacity-0 mdi--link-variant group-hover:opacity-100'></span>
</a>
</h2>
2 changes: 1 addition & 1 deletion website/src/components/ComponentWrapper.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const { title, height = '400px' } = Astro.props;
---

<div>
<ComponentHeadline>{title}</ComponentHeadline>
<ComponentHeadline title={title} />
<div style={{ height }}>
<slot />
</div>
Expand Down
21 changes: 21 additions & 0 deletions website/src/components/genspectrum/GsStatistics.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
---

<div class='h-56 sm:h-32'>
<ComponentHeadline title='Stats' />
<gs-statistics
numeratorFilter={JSON.stringify(numeratorFilter)}
denominatorFilter={JSON.stringify(denominatorFilter)}
width='100%'
height='100%'></gs-statistics>
</div>
12 changes: 2 additions & 10 deletions website/src/components/views/analyzeSingleVariant/GenericAnalyzeSingleVariantPage.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -92,15 +92,7 @@ const downloadLinks = noVariantSelected
<SelectVariant slot='dataDisplay' />
) : (
<div class='mx-[8px] flex flex-col gap-y-6' slot='dataDisplay'>
<div class='h-56 sm:h-32'>
<ComponentHeadline>Stats</ComponentHeadline>
<gs-statistics
numeratorFilter={JSON.stringify(variantLapisFilter)}
denominatorFilter={JSON.stringify(datasetLapisFilter)}
width='100%'
height='100%'
/>
</div>
<GsStatistics numeratorFilter={variantLapisFilter} denominatorFilter={datasetLapisFilter} />
<ComponentsGrid>
<GsPrevalenceOverTime
numeratorFilters={[
Expand Down
2 changes: 1 addition & 1 deletion website/src/layouts/base/BaseLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ interface Props {
const { title, forceLoggedOutState = false } = Astro.props;
---

<html lang='en'>
<html lang='en' class='scroll-smooth'>
<head>
<meta charset='utf-8' />
<link rel='icon' type='image/png' href='/virus-outline-colorful.svg' />
Expand Down
7 changes: 7 additions & 0 deletions website/src/layouts/base/header/headerConstants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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).
*/
fengelniederhammer marked this conversation as resolved.
Show resolved Hide resolved
export const fragmentLinkScrollMargin = 'scroll-mt-20';
12 changes: 2 additions & 10 deletions website/src/pages/covid/single-variant.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -95,15 +95,7 @@ const downloadLinks = noVariantSelected
<SelectVariant slot='dataDisplay' />
) : (
<div class='mx-[8px] flex flex-col gap-y-6' slot='dataDisplay'>
<div class='h-56 sm:h-32'>
<ComponentHeadline>Stats</ComponentHeadline>
<gs-statistics
numeratorFilter={JSON.stringify(variantFilter)}
denominatorFilter={JSON.stringify(datasetLapisFilter)}
width='100%'
height='100%'
/>
</div>
<GsStatistics numeratorFilter={variantFilter} denominatorFilter={datasetLapisFilter} />
<ComponentsGrid>
<GsPrevalenceOverTime
numeratorFilters={[
Expand Down
Loading