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 sections numberings #1228

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Fix sections numberings #1228

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e1f75d4
fix: section numbers being hidden on certain breakpoints.
ItzNotABug Aug 18, 2024
8733dd0
Merge branch 'main' into fix-sections-numberings
ItzNotABug Aug 18, 2024
50a5cb2
update: lockfile
ItzNotABug Aug 18, 2024
b8f1850
Merge branch 'main' into fix-sections-numberings
ItzNotABug Aug 19, 2024
a2c190f
fix: reduce padding only to the quick-start docs.
ItzNotABug Aug 21, 2024
f91e55e
merge: main.
ItzNotABug Aug 21, 2024
e3a6dc7
Merge branch 'main' into fix-sections-numberings
ItzNotABug Aug 21, 2024
fb8758d
Revert pnpm-lock.yaml to its state on the main branch
ItzNotABug Aug 21, 2024
0beed31
update: use `page.route.id`.
ItzNotABug Aug 21, 2024
4b91b38
Merge branch 'main' into fix-sections-numberings
ItzNotABug Aug 22, 2024
724c3a7
update: only resize on content using section + numbers.
ItzNotABug Aug 22, 2024
25d82bf
Merge branch 'main' into fix-sections-numberings
ItzNotABug Aug 23, 2024
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
32 changes: 29 additions & 3 deletions src/lib/layouts/DocsArticle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,22 @@
import { scrollToTop } from '$lib/actions/scrollToTop';

import { Feedback } from '$lib/components';
import { onMount } from 'svelte';

export let title: string;
export let toc: Array<TocItem>;
export let back: string | undefined = undefined;
export let date: string | undefined = undefined;

let reducedArticleSize = false;

onMount(() => {
// reduces size for articles using numbered sections.
const slotWrapper = document.querySelector('.slot-wrapper');
reducedArticleSize = !!slotWrapper?.querySelector(
'.web-article-content-section.is-with-line .web-numeric-badge'
);
})
Comment on lines +28 to +34
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This still feels hacky. And what if they resize the window?

@TorstenDittmann, any ideas on how to best handle this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stnguyen90 Works on resize. The issue only occurs at certain breakpoints which the css handles.

</script>

<main class="u-contents" id="main">
Expand Down Expand Up @@ -59,8 +70,14 @@
</div>
<div class="web-article-header-end" />
</header>
<div class="web-article-content">
<slot />
<div
class="web-article-content"
class:reduced-article-size={reducedArticleSize}
>
<div class="slot-wrapper">
<slot />
</div>

<Feedback {date} />
</div>
<aside class="web-references-menu web-u-padding-inline-start-24">
Expand Down Expand Up @@ -117,4 +134,13 @@
</div>
</aside>
</article>
</main>
</main>

<style>
@media (min-width: 1280px) and (max-width: 1330px) {
.reduced-article-size {
/* original/default is 41.5rem */
ItzNotABug marked this conversation as resolved.
Show resolved Hide resolved
max-inline-size: 40.5rem !important;
}
}
</style>
Loading