Fix/main menu (#216)
* Subnavigation fixes * pass randomTopics as prop to header --------- Co-authored-by: kvakazyambra <kvakazyambra@gmail.com> Co-authored-by: ilya-bkv <i.yablokov@ccmp.me>
This commit is contained in:
Kosta
GitHub
parent
0e68d3db92
commit
019c4540d0
|
|
@ -1,4 +1,4 @@
|
|||
import { Show, createSignal, createEffect, onMount, onCleanup } from 'solid-js'
|
||||
import { For, Show, createSignal, createEffect, onMount, onCleanup } from 'solid-js'
|
||||
import { getPagePath, redirectPage } from '@nanostores/router'
|
||||
import { clsx } from 'clsx'
|
||||
|
||||
|
|
@ -9,6 +9,7 @@ import { ConfirmModal } from '../ConfirmModal'
|
|||
import { getShareUrl, SharePopup } from '../../Article/SharePopup'
|
||||
import { Snackbar } from '../Snackbar'
|
||||
import { Icon } from '../../_shared/Icon'
|
||||
import type { Topic } from '../../../graphql/types.gen'
|
||||
|
||||
import { useModalStore } from '../../../stores/ui'
|
||||
import { router, useRouter } from '../../../stores/router'
|
||||
|
|
@ -17,6 +18,7 @@ import { getDescription } from '../../../utils/meta'
|
|||
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
import { useSession } from '../../../context/session'
|
||||
import { useTopicsStore } from '../../../stores/zine/topics'
|
||||
|
||||
import styles from './Header.module.scss'
|
||||
|
||||
|
|
@ -27,6 +29,7 @@ type Props = {
|
|||
articleBody?: string
|
||||
cover?: string
|
||||
scrollToComments?: (value: boolean) => void
|
||||
randomTopics?: Topic[]
|
||||
}
|
||||
|
||||
type HeaderSearchParams = {
|
||||
|
|
@ -34,7 +37,7 @@ type HeaderSearchParams = {
|
|||
}
|
||||
|
||||
export const Header = (props: Props) => {
|
||||
const { t } = useLocalize()
|
||||
const { t, lang } = useLocalize()
|
||||
|
||||
const { modal } = useModalStore()
|
||||
|
||||
|
|
@ -56,6 +59,9 @@ export const Header = (props: Props) => {
|
|||
|
||||
const toggleFixed = () => setFixed((oldFixed) => !oldFixed)
|
||||
|
||||
const tag = (topic: Topic) =>
|
||||
/[ЁА-яё]/.test(topic.title || '') && lang() !== 'ru' ? topic.slug : topic.title
|
||||
|
||||
let windowScrollTop = 0
|
||||
|
||||
createEffect(() => {
|
||||
|
|
@ -296,34 +302,25 @@ export const Header = (props: Props) => {
|
|||
>
|
||||
<ul class="nodash">
|
||||
<li>
|
||||
<a href="/expo/image">Искусство</a>
|
||||
<a href="/topic/interview">#Интервью</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Подкасты</a>
|
||||
<a href="/topic/reportage">#Репортажи</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Спецпроекты</a>
|
||||
<a href="/topic/empiric">#Личный опыт</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Интервью</a>
|
||||
<a href="/topic/society">#Общество</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Репортажи</a>
|
||||
<a href="/topic/culture">#Культура</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Личный опыт</a>
|
||||
<a href="/topic/theory">#Теории</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Общество</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Культура</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Теории</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Поэзия</a>
|
||||
<a href="/topic/poetry">#Поэзия</a>
|
||||
</li>
|
||||
<li class={styles.rightItem}>
|
||||
<a href="/topics">
|
||||
|
|
@ -341,36 +338,23 @@ export const Header = (props: Props) => {
|
|||
onMouseOut={hideSubnavigation}
|
||||
>
|
||||
<ul class="nodash">
|
||||
<li>
|
||||
<a href="">#Интервью</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Репортажи</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Личный опыт</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Общество</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Культура</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Теории</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Поэзия</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">#Теории</a>
|
||||
</li>
|
||||
<li class={styles.rightItem}>
|
||||
<a href="/topics">
|
||||
{t('All topics')}
|
||||
<Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} />
|
||||
</a>
|
||||
</li>
|
||||
<Show when={props.randomTopics && props.randomTopics.length > 0}>
|
||||
<For each={props.randomTopics}>
|
||||
{(topic) => (
|
||||
<li class="item">
|
||||
<a href={`/topic/${topic.slug}`}>
|
||||
<span>#{tag(topic)}</span>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
<li class={styles.rightItem}>
|
||||
<a href="/topics">
|
||||
{t('All topics')}
|
||||
<Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} />
|
||||
</a>
|
||||
</li>
|
||||
</Show>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.subnavigation {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
height: 6rem;
|
||||
line-height: 6rem;
|
||||
margin-bottom: 5rem !important;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transform: translateY(-2px);
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding: 0 divide($container-padding-x, 2);
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
|
||||
.item {
|
||||
margin-right: 2rem;
|
||||
margin-right: 2.4rem;
|
||||
|
||||
&.right {
|
||||
margin-right: 0;
|
||||
|
|
|
|||
|
|
@ -9,34 +9,25 @@ export const NavTopics = () => {
|
|||
<nav class="subnavigation wide-container text-2xl">
|
||||
<ul class="topics">
|
||||
<li class="item">
|
||||
<a href="/expo/image">Искусство</a>
|
||||
<a href="/topic/interview">#Интервью</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="">Подкасты</a>
|
||||
<a href="/topic/reportage">#Репортажи</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="">Спецпроекты</a>
|
||||
<a href="/topic/empiric">#Личный опыт</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="">#Интервью</a>
|
||||
<a href="/topic/society">#Общество</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="">#Репортажи</a>
|
||||
<a href="/topic/culture">#Культура</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="">#Личный опыт</a>
|
||||
<a href="/topic/theory">#Теории</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="">#Общество</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="">#Культура</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="">#Теории</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="">#Поэзия</a>
|
||||
<a href="/topic/poetry">#Поэзия</a>
|
||||
</li>
|
||||
<li class="item right">
|
||||
<a href={`/topics`}>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,8 @@ export const HomeView = (props: HomeProps) => {
|
|||
} = useArticlesStore({
|
||||
shouts: props.shouts
|
||||
})
|
||||
const { randomTopics, topTopics } = useTopicsStore({
|
||||
|
||||
const { topTopics } = useTopicsStore({
|
||||
randomTopics: props.randomTopics
|
||||
})
|
||||
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { clsx } from 'clsx'
|
|||
import '../../styles/app.scss'
|
||||
import styles from './PageLayout.module.scss'
|
||||
import { Meta } from '@solidjs/meta'
|
||||
import { Topic } from '../../graphql/types.gen'
|
||||
|
||||
type PageLayoutProps = {
|
||||
headerTitle?: string
|
||||
|
|
@ -19,6 +20,7 @@ type PageLayoutProps = {
|
|||
class?: string
|
||||
withPadding?: boolean
|
||||
scrollToComments?: (value: boolean) => void
|
||||
randomTopics?: Topic[]
|
||||
}
|
||||
|
||||
export const PageLayout = (props: PageLayoutProps) => {
|
||||
|
|
@ -30,7 +32,7 @@ export const PageLayout = (props: PageLayoutProps) => {
|
|||
props.scrollToComments(scrollToComments())
|
||||
}
|
||||
})
|
||||
|
||||
// const { randomTopics } = useTopicsStore()
|
||||
return (
|
||||
<>
|
||||
<Meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
|
@ -41,6 +43,7 @@ export const PageLayout = (props: PageLayoutProps) => {
|
|||
cover={props.articleBody}
|
||||
isHeaderFixed={isHeaderFixed}
|
||||
scrollToComments={(value) => setScrollToComments(value)}
|
||||
randomTopics={props.randomTopics}
|
||||
/>
|
||||
<main
|
||||
class={clsx('main-content', {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export const HomePage = (props: PageProps) => {
|
|||
onCleanup(() => resetSortedArticles())
|
||||
|
||||
return (
|
||||
<PageLayout withPadding={true}>
|
||||
<PageLayout randomTopics={props.randomTopics} withPadding={true}>
|
||||
<ReactionsProvider>
|
||||
<Title>{t('Discours')}</Title>
|
||||
<Show when={isLoaded()} fallback={<Loading />}>
|
||||
|
|
|
|||
|
|
@ -633,11 +633,6 @@ figure {
|
|||
border-bottom: 2px solid #000;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user