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

Jump to bottom

fix toc scrolling and styling #1892

Merged
merged 5 commits into from
Jul 24, 2023
Merged

fix toc scrolling and styling #1892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bb1eaa1
fix sidebar scrolling and styling
mashehu Jul 24, 2023
e51d0f1
fix for trailing slashes in sidebar nav
mashehu Jul 24, 2023
6413c13
add trailing commas for linting
mashehu Jul 24, 2023
7989a67
more trouble shooting with trailing slash in sidebar
mashehu Jul 24, 2023
2b50991
Merge branch 'main' of github.com:nf-core/website into fix-toc
mashehu Jul 24, 2023
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
36 changes: 28 additions & 8 deletions src/components/sidebar/SidebarNav.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export interface Props {
minimal?: boolean;
}

const url = Astro.url.pathname;
const url = Astro.url.pathname.endsWith('/') ? Astro.url.pathname.slice(0, -1) : Astro.url.pathname;
---

<div class="nav">
Expand All @@ -24,11 +24,11 @@ const url = Astro.url.pathname;
items.map((item) => {
return (
<div class="mb-3">
<h6 class="ps-2 text-body">
<h6 class="mb-0">
{item.section_slug && (
<a
class:list={[
'text-decoration-none',
'text-decoration-none p-2 w-100 d-inline-block text-body section-header',
{ active: item.section_slug && url.endsWith(item.section_slug) },
]}
href={item.section_slug}
Expand All @@ -46,7 +46,7 @@ const url = Astro.url.pathname;
return (
<li
class:list={[
'mt-2 w-100 ps-3',
'mt-2 w-100 ps-4',
{
active:
url.endsWith(child.slug) ||
Expand Down Expand Up @@ -87,7 +87,7 @@ const url = Astro.url.pathname;
'w-100 py-1 ps-3 position-relative',
{
active:
url.endsWith(child.slug) ||
url.endsWith(child.slug.replace(/\/$/, '')) ||
(url.split('/').length >= 6 &&
url
.split('/')
Expand Down Expand Up @@ -124,12 +124,18 @@ const url = Astro.url.pathname;

<style lang="scss">
@import 'src/styles/_variables.scss';

h6 a,
li {
&:hover {
background-color: transparentize($success, 0.85);
}
}
li {
font-size: 0.9rem;
}

li.active {
li.active,
h6 .active {
background-color: transparentize($success, 0.75);
a {
color: $green-800 !important;
Expand Down Expand Up @@ -157,7 +163,21 @@ const url = Astro.url.pathname;
}

:global([data-bs-theme='dark']) {
li.active {
.section-header,
li {
&:hover {
background-color: transparentize($success-dark, 0.6);
a {
color: $gray-200 !important;
}
}
}
.section-header.active,
.section-header:hover {
color: $gray-200 !important;
}
li.active,
.section-header.active {
background-color: transparentize($success-dark, 0.35);
& a {
color: $gray-200 !important;
Expand Down
25 changes: 18 additions & 7 deletions src/components/sidebar/SidebarToc.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts">
import { currentHeading, showHidden } from '@components/store';
import { sub } from 'date-fns';
import { onMount } from 'svelte';

export let headings: {
Expand All @@ -21,14 +22,16 @@
if (!$currentHeading) {
currentHeading.set(headings[0]?.slug);
}
// scroll to currently active item on change
currentHeading.subscribe((slug) => {
// wait 1 second for sidebar selection animation to finish
setTimeout(() => {
const active = document.querySelector('.toc .nav-item.active');
if (active) {
active.scrollIntoView({ block: 'nearest' });
}
}, 1000);
});
});
$: if ($currentHeading) {
const active = document.querySelector(`.nav-item.active`);
if (active) {
active.scrollIntoView({ block: 'nearest' });
}
}
</script>

{#if headings.length > 1}
Expand Down Expand Up @@ -86,6 +89,9 @@
transition: background-color 0.3s ease-out, border-left 0.3s ease-out;
scroll-margin-top: 6rem;
scroll-margin-bottom: 6rem;
&:hover {
background-color: transparentize($success, 0.85);
}
}

li.active {
Expand All @@ -99,6 +105,11 @@
:global([data-bs-theme='dark']) {
li {
border-inline-start: 2pt solid $border-color-dark;
& a:hover {
background-color: transparentize($success-dark, 0.6);

color: $gray-200 !important;
}
}
li.active {
border-left: 2pt solid $success-dark;
Expand Down
4 changes: 2 additions & 2 deletions src/pages/docs/[...doc].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,12 @@ contributingDocs.sort(sortDocs);
usageDocs
.filter((doc) => doc.slug.split('/').length === 2)
.map((doc) => {
sections[0].children.push({ title: doc.data.title, slug: '/docs/' + doc.slug + '/' });
sections[0].children.push({ title: doc.data.title, slug: '/docs/' + doc.slug });
});
contributingDocs
.filter((doc) => doc.slug.split('/').length === 2)
.map((doc) => {
sections[1].children.push({ title: doc.data.title, slug: '/docs/' + doc.slug + '/' });
sections[1].children.push({ title: doc.data.title, slug: '/docs/' + doc.slug });
});
// find the index of the current page and use that to get the previous and next page
const url = Astro.url.pathname.replace(/\/$/, '');
Expand Down