discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

anchors and mainTopic fixes

Browse Source
This commit is contained in:
Igor Lobanov 2022-12-07 19:38:05 +01:00
parent e58285019b
commit 5c6a93c241
3 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Article/FullArticle.tsx
View File

@ -52,12 +52,14 @@ export const FullArticle = (props: ArticleProps) => {
const { session } = useSession() const { session } = useSession()
const formattedDate = createMemo(() => formatDate(new Date(props.article.createdAt))) const formattedDate = createMemo(() => formatDate(new Date(props.article.createdAt)))
const mainTopic = () => const mainTopic = createMemo(
(props.article.topics?.find((topic) => topic?.slug === props.article.mainTopic)?.title || '').replace( () =>
' ', props.article.topics?.find((topic) => topic?.slug === props.article.mainTopic) ||
' ' props.article.topics[0]
) )
const mainTopicTitle = createMemo(() => mainTopic().title.replace(' ', ' '))
onMount(() => { onMount(() => {
const windowHash = window.location.hash const windowHash = window.location.hash
if (windowHash?.length > 0) { if (windowHash?.length > 0) {
@ -90,7 +92,7 @@ export const FullArticle = (props: ArticleProps) => {
<article class="col-md-6 shift-content"> <article class="col-md-6 shift-content">
<div class={styles.shoutHeader}> <div class={styles.shoutHeader}>
<div class={styles.shoutTopic}> <div class={styles.shoutTopic}>
<a href={`/topic/${props.article.mainTopic}`} innerHTML={mainTopic() || ''} /> <a href={`/topic/${props.article.mainTopic}`} innerHTML={mainTopicTitle() || ''} />
</div> </div>
<h1>{props.article.title}</h1> <h1>{props.article.title}</h1>

6
src/components/Feed/Card.tsx
View File

@ -56,9 +56,9 @@ const getTitleAndSubtitle = (article: Shout): { title: string; subtitle: string
} }
export const ArticleCard = (props: ArticleCardProps) => { export const ArticleCard = (props: ArticleCardProps) => {
const mainTopic = props.article.topics.find( const mainTopic =
(articleTopic) => articleTopic.slug === props.article.mainTopic props.article.topics.find((articleTopic) => articleTopic.slug === props.article.mainTopic) ||
) props.article.topics[0]
const formattedDate = createMemo<string>(() => { const formattedDate = createMemo<string>(() => {
return new Date(props.article.createdAt) return new Date(props.article.createdAt)

14
src/stores/router.ts
View File

@ -86,6 +86,20 @@ const handleClientRouteLinkClick = (event) => {
if (url.origin === location.origin) { if (url.origin === location.origin) {
event.preventDefault() event.preventDefault()
if (url.hash) {
const anchor = document.querySelector(url.hash)
const headerOffset = 80 // 100px for header
const elementPosition = anchor.getBoundingClientRect().top
const newScrollTop = elementPosition + window.scrollY - headerOffset
window.scrollTo({
top: newScrollTop,
behavior: 'smooth'
})
return
}
routerStore.open(url.pathname) routerStore.open(url.pathname)
const params = Object.fromEntries(new URLSearchParams(url.search)) const params = Object.fromEntries(new URLSearchParams(url.search))
searchParamsStore.open(params) searchParamsStore.open(params)