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

header-links-fix

Browse Source
This commit is contained in:
Untone 2024-07-01 18:30:45 +03:00
parent d2771ac2a4
commit e4390d83e6
3 changed files with 66 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/Nav/Header/Header.tsx
View File

@ -17,7 +17,6 @@ import { HeaderAuth } from '../HeaderAuth'
import { Modal } from '../Modal' import { Modal } from '../Modal'
import { SearchModal } from '../SearchModal/SearchModal' import { SearchModal } from '../SearchModal/SearchModal'
import { Snackbar } from '../Snackbar' import { Snackbar } from '../Snackbar'
import { Link } from './Link'
import { A, useLocation, useNavigate, useSearchParams } from '@solidjs/router' import { A, useLocation, useNavigate, useSearchParams } from '@solidjs/router'
import styles from './Header.module.scss' import styles from './Header.module.scss'
@ -209,58 +208,64 @@ export const Header = (props: Props) => {
</Show> </Show>
<div class={clsx(styles.mainNavigation, { [styles.fixed]: fixed() })}> <div class={clsx(styles.mainNavigation, { [styles.fixed]: fixed() })}>
<ul class="view-switcher"> <ul class="view-switcher">
<Link <A
onMouseOver={() => toggleSubnavigation(true, setIsZineVisible)} onMouseOver={() => toggleSubnavigation(true, setIsZineVisible)}
onMouseOut={() => hideSubnavigation()} onMouseOut={() => hideSubnavigation()}
routeName="home" href="/"
active={isZineVisible()} hidden={!isZineVisible()}
body={t('journal')}
onClick={(event) => handleToggleMenuByLink(event, '/')} onClick={(event) => handleToggleMenuByLink(event, '/')}
/> >
<Link {t('journal')}
</A>
<A
onMouseOver={() => toggleSubnavigation(true, setIsFeedVisible)} onMouseOver={() => toggleSubnavigation(true, setIsFeedVisible)}
onMouseOut={() => hideSubnavigation()} onMouseOut={() => hideSubnavigation()}
routeName="feed" href="/feed"
active={isFeedVisible()} hidden={!isFeedVisible()}
body={t('feed')}
onClick={(event) => handleToggleMenuByLink(event, '/feed')} onClick={(event) => handleToggleMenuByLink(event, '/feed')}
/> >
<Link {t('feed')}
</A>
<A
onMouseOver={() => toggleSubnavigation(true, setIsTopicsVisible)} onMouseOver={() => toggleSubnavigation(true, setIsTopicsVisible)}
onMouseOut={() => hideSubnavigation} onMouseOut={() => hideSubnavigation}
routeName="topics" href="/topics"
active={isTopicsVisible()} hidden={!isTopicsVisible()}
body={t('topics')}
onClick={(event) => handleToggleMenuByLink(event, '/topics')} onClick={(event) => handleToggleMenuByLink(event, '/topics')}
/> >
<Link {t('topics')}
</A>
<A
onMouseOver={() => hideSubnavigation(0)} onMouseOver={() => hideSubnavigation(0)}
onMouseOut={() => hideSubnavigation(0)} onMouseOut={() => hideSubnavigation(0)}
routeName="authors" href="/authors"
body={t('authors')}
onClick={(event) => handleToggleMenuByLink(event, '/authors')} onClick={(event) => handleToggleMenuByLink(event, '/authors')}
/> >
<Link {t('authors')}
</A>
<A
onMouseOver={() => toggleSubnavigation(true, setIsKnowledgeBaseVisible)} onMouseOver={() => toggleSubnavigation(true, setIsKnowledgeBaseVisible)}
onMouseOut={() => hideSubnavigation()} onMouseOut={() => hideSubnavigation()}
routeName="guide" href="/guide"
body={t('Knowledge base')} hidden={!isKnowledgeBaseVisible()}
active={isKnowledgeBaseVisible()}
onClick={(event) => handleToggleMenuByLink(event, '/guide')} onClick={(event) => handleToggleMenuByLink(event, '/guide')}
/> >
{t('Knowledge base')}
</A>
</ul> </ul>
<div class={styles.mainNavigationMobile}> <div class={styles.mainNavigationMobile}>
<h4>{t('Participating')}</h4> <h4>{t('Participating')}</h4>
<ul class="view-switcher"> <ul class="view-switcher">
<li> <li>
<a href="/create">{t('Create post')}</a> <A href="/create">{t('Create post')}</A>
</li> </li>
<li> <li>
<a href="/connect">{t('Suggest an idea')}</a> <A href="/connect">{t('Suggest an idea')}</A>
</li> </li>
<li> <li>
<a href="/about/help">{t('Support the project')}</a> <A href="/about/help">{t('Support the project')}</A>
</li> </li>
</ul> </ul>
@ -318,9 +323,9 @@ export const Header = (props: Props) => {
</select> </select>
<div class={styles.mainNavigationAdditionalLinks}> <div class={styles.mainNavigationAdditionalLinks}>
<a href="/about/dogma">{t('Dogma')}</a> <A href="/about/dogma">{t('Dogma')}</A>
<a href="/about/discussion-rules" innerHTML={t('Discussion rules')} /> <A href="/about/discussion-rules">{t('Discussion rules')}</A>
<a href="/about/principles">{t('Principles')}</a> <A href="/about/principles">{t('Principles')}</A>
</div> </div>
<p <p
@ -399,10 +404,10 @@ export const Header = (props: Props) => {
<a href="/about/help">{t('How to help')}</a> <a href="/about/help">{t('How to help')}</a>
</li> </li>
<li class={styles.rightItem}> <li class={styles.rightItem}>
<a href="/connect"> <A href="/connect">
{t('Suggest an idea')} {t('Suggest an idea')}
<Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} /> <Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} />
</a> </A>
</li> </li>
</ul> </ul>
</div> </div>
@ -415,40 +420,40 @@ export const Header = (props: Props) => {
> >
<ul class="nodash"> <ul class="nodash">
<li class="item"> <li class="item">
<a href="/expo">{t('Art')}</a> <A href="/expo">{t('Art')}</A>
</li> </li>
<li class="item"> <li class="item">
<a href="/podcasts">{t('Podcasts')}</a> <A href="/podcasts">{t('Podcasts')}</A>
</li> </li>
<li class="item"> <li class="item">
<a href="/about/projects">{t('Special Projects')}</a> <A href="/about/projects">{t('Special Projects')}</A>
</li> </li>
<li> <li>
<a href="/topic/interview">#{t('Interview')}</a> <A href="/topic/interview">#{t('Interview')}</A>
</li> </li>
<li> <li>
<a href="/topic/reportage">#{t('Reports')}</a> <A href="/topic/reportage">#{t('Reports')}</A>
</li> </li>
<li> <li>
<a href="/topic/empiric">#{t('Experience')}</a> <A href="/topic/empiric">#{t('Experience')}</A>
</li> </li>
<li> <li>
<a href="/topic/society">#{t('Society')}</a> <A href="/topic/society">#{t('Society')}</A>
</li> </li>
<li> <li>
<a href="/topic/culture">#{t('Culture')}</a> <A href="/topic/culture">#{t('Culture')}</A>
</li> </li>
<li> <li>
<a href="/topic/theory">#{t('Theory')}</a> <A href="/topic/theory">#{t('Theory')}</A>
</li> </li>
<li> <li>
<a href="/topic/poetry">#{t('Poetry')}</a> <A href="/topic/poetry">#{t('Poetry')}</A>
</li> </li>
<li class={styles.rightItem}> <li class={styles.rightItem}>
<a href="/topics"> <A href="/topics">
{t('All topics')} {t('All topics')}
<Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} /> <Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} />
</a> </A>
</li> </li>
</ul> </ul>
</div> </div>
@ -464,17 +469,17 @@ export const Header = (props: Props) => {
<For each={randomTopics()}> <For each={randomTopics()}>
{(topic: Topic) => ( {(topic: Topic) => (
<li class="item"> <li class="item">
<a href={`/topic/${topic.slug}`}> <A href={`/topic/${topic.slug}`}>
<span>#{tag(topic)}</span> <span>#{tag(topic)}</span>
</a> </A>
</li> </li>
)} )}
</For> </For>
<li class={styles.rightItem}> <li class={styles.rightItem}>
<a href="/topics"> <A href="/topics">
{t('All topics')} {t('All topics')}
<Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} /> <Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} />
</a> </A>
</li> </li>
</Show> </Show>
</ul> </ul>

22
src/components/Views/AllAuthors/AllAuthors.tsx
View File

@ -41,7 +41,7 @@ export const AllAuthors = (props: Props) => {
}) })
const filteredAuthors = createMemo(() => { const filteredAuthors = createMemo(() => {
const query = searchQuery().toLowerCase() const query = searchQuery().toLowerCase()
return authorsSorted().filter((author: Author) => { return authorsSorted?.().filter((author: Author) => {
// Предполагаем, что у автора есть свойство name // Предполагаем, что у автора есть свойство name
return author?.name?.toLowerCase().includes(query) return author?.name?.toLowerCase().includes(query)
}) })
@ -62,22 +62,22 @@ export const AllAuthors = (props: Props) => {
return keys return keys
}) })
const ogImage = getImageUrl('production/image/logo_image.png') const ogImage = createMemo(() => getImageUrl('production/image/logo_image.png'))
const ogTitle = t('Authors') const ogTitle = createMemo(() => t('Authors'))
const description = t('List of authors of the open editorial community') const description = createMemo(() => t('List of authors of the open editorial community'))
return ( return (
<div class={clsx(styles.allAuthorsPage, 'wide-container')}> <div class={clsx(styles.allAuthorsPage, 'wide-container')}>
<Meta name="descprition" content={description} /> <Meta name="descprition" content={description()} />
<Meta name="keywords" content={t('keywords')} /> <Meta name="keywords" content={t('keywords')} />
<Meta name="og:type" content="article" /> <Meta name="og:type" content="article" />
<Meta name="og:title" content={ogTitle} /> <Meta name="og:title" content={ogTitle()} />
<Meta name="og:image" content={ogImage} /> <Meta name="og:image" content={ogImage()} />
<Meta name="twitter:image" content={ogImage} /> <Meta name="twitter:image" content={ogImage()} />
<Meta name="og:description" content={description} /> <Meta name="og:description" content={description()} />
<Meta name="twitter:card" content="summary_large_image" /> <Meta name="twitter:card" content="summary_large_image" />
<Meta name="twitter:title" content={ogTitle} /> <Meta name="twitter:title" content={ogTitle()} />
<Meta name="twitter:description" content={description} /> <Meta name="twitter:description" content={description()} />
<Show when={props.isLoaded} fallback={<Loading />}> <Show when={props.isLoaded} fallback={<Loading />}>
<div class="offset-md-5"> <div class="offset-md-5">
<div class="row"> <div class="row">

2
src/routes/topics.tsx
View File

@ -25,7 +25,7 @@ export default function AllTopicsPage(props: RouteSectionProps<{ topics: Topic[]
<PageLayout withPadding={true} title={`${t('Discours')}:${t('All topics')}`}> <PageLayout withPadding={true} title={`${t('Discours')}:${t('All topics')}`}>
<ReactionsProvider> <ReactionsProvider>
<Suspense fallback={<Loading />}> <Suspense fallback={<Loading />}>
<AllTopics topics={topics() || []} /> <AllTopics topics={topics() as Topic[]} />
</Suspense> </Suspense>
</ReactionsProvider> </ReactionsProvider>
</PageLayout> </PageLayout>