Fixed scrolling to comments

This commit is contained in:
kvakazyambra 2024-04-30 18:43:38 +03:00
parent b3155c4535
commit 11b932c30e
3 changed files with 19 additions and 18 deletions

View File

@ -179,6 +179,10 @@
@include font-size(1.2rem); @include font-size(1.2rem);
} }
.commentAuthor {
margin-right: 2rem;
}
.articleAuthor { .articleAuthor {
@include font-size(1.2rem); @include font-size(1.2rem);

View File

@ -3,14 +3,11 @@
color: var(--secondary-color); color: var(--secondary-color);
display: flex; display: flex;
align-items: flex-start; justify-content: center;
justify-content: flex-start;
flex-direction: column; flex-direction: column;
gap: .5rem;
flex: 1; flex: 1;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 1.2rem; font-size: 1.2rem;
margin-bottom: .5rem;
.date { .date {
font-weight: 500; font-weight: 500;

View File

@ -60,7 +60,7 @@ export type ArticlePageSearchParams = {
const scrollTo = (el: HTMLElement) => { const scrollTo = (el: HTMLElement) => {
const { top } = el.getBoundingClientRect() const { top } = el.getBoundingClientRect()
window.scrollTo({ window.scrollTo({
top: top - DEFAULT_HEADER_OFFSET, top: top + window.scrollY - DEFAULT_HEADER_OFFSET,
left: 0, left: 0,
behavior: 'smooth', behavior: 'smooth',
}) })
@ -152,19 +152,6 @@ export const FullArticle = (props: Props) => {
current: HTMLDivElement current: HTMLDivElement
} = { current: null } } = { current: null }
createEffect(() => {
if (props.scrollToComments) {
scrollTo(commentsRef.current)
}
})
createEffect(() => {
if (searchParams()?.scrollTo === 'comments' && commentsRef.current) {
requestAnimationFrame(() => scrollTo(commentsRef.current))
changeSearchParams({ scrollTo: null })
}
})
createEffect(() => { createEffect(() => {
if (searchParams().commentId && isReactionsLoaded()) { if (searchParams().commentId && isReactionsLoaded()) {
const commentElement = document.querySelector<HTMLElement>( const commentElement = document.querySelector<HTMLElement>(
@ -320,6 +307,19 @@ export const FullArticle = (props: Props) => {
window?.addEventListener('resize', updateIframeSizes) window?.addEventListener('resize', updateIframeSizes)
onCleanup(() => window.removeEventListener('resize', updateIframeSizes)) onCleanup(() => window.removeEventListener('resize', updateIframeSizes))
createEffect(() => {
if (props.scrollToComments) {
scrollTo(commentsRef.current)
}
})
createEffect(() => {
if (searchParams()?.scrollTo === 'comments' && commentsRef.current) {
requestAnimationFrame(() => scrollTo(commentsRef.current))
changeSearchParams({ scrollTo: null })
}
})
}) })
const cover = props.article.cover ?? 'production/image/logo_image.png' const cover = props.article.cover ?? 'production/image/logo_image.png'