diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-12-19 17:11:48 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-12-19 17:11:48 +0100 |
| commit | 67ac79f8ba2ea900ec0ac67e56387889ee887a48 (patch) | |
| tree | fad602f33265f1c2186883ef581973caf517a0aa /src/components | |
| parent | fc77c0a7e9c81f5bc1a69dee945ce71b9511b3cc (diff) | |
fix(layout): refine pagination when JS is disabled
* fix the total number of pages
* hide the load more button and the progress bar
* remove the informative notice since it is no longer necessary
* if the page number is equal to 1, use Blog route directly (NextJS is
not able to redirect the user when JS is disabled)
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/organisms/posts-list/posts-list.tsx | 6 | ||||
| -rw-r--r-- | src/components/templates/layout/layout.tsx | 11 |
2 files changed, 15 insertions, 2 deletions
diff --git a/src/components/organisms/posts-list/posts-list.tsx b/src/components/organisms/posts-list/posts-list.tsx index ad5bed5..91b2e0d 100644 --- a/src/components/organisms/posts-list/posts-list.tsx +++ b/src/components/organisms/posts-list/posts-list.tsx @@ -222,7 +222,8 @@ const PostsListWithRef: ForwardRefRenderFunction< {total ? ( <ProgressBar aria-label={progressInfo} - className={styles.progress} + // eslint-disable-next-line react/jsx-no-literals + className={`${styles.progress} js-only`} current={posts.length} isCentered isLoading={isLoading} @@ -232,7 +233,8 @@ const PostsListWithRef: ForwardRefRenderFunction< ) : null} {onLoadMore && (!total || (total && posts.length < total)) ? ( <Button - className={styles.btn} + // eslint-disable-next-line react/jsx-no-literals + className={`${styles.btn} js-only`} isLoading={isLoading} // eslint-disable-next-line react/jsx-no-literals kind="tertiary" diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx index 16c9180..19cefce 100644 --- a/src/components/templates/layout/layout.tsx +++ b/src/components/templates/layout/layout.tsx @@ -1,3 +1,4 @@ +import Head from 'next/head'; import { useRef, type FC, @@ -53,6 +54,16 @@ export const Layout: FC<LayoutProps> = ({ children, isHome }) => { return ( <> + <Head> + <noscript> + <style> + {/* eslint-disable-next-line react/jsx-no-literals */} + {`.js-only { + display: none !important; + }`} + </style> + </noscript> + </Head> <span id={topId} ref={topRef} tabIndex={-1} /> <noscript> <div className={styles['noscript-spacing']} /> |