Fixed scrolling to comments
This commit is contained in:
parent
b3155c4535
commit
11b932c30e
|
@ -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);
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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'
|
||||||
|
|
Loading…
Reference in New Issue
Block a user