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

Fix/main menu (#216)

Browse Source 
* 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 2023-09-14 14:40:46 +03:00 committed by GitHub
parent 0e68d3db92
commit 019c4540d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 48 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
<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>

4
src/components/Nav/Topics.scss
View File

@ -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;

23
src/components/Nav/Topics.tsx
View File

@ -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`}>

3
src/components/Views/Home.tsx
View File

@ -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)

5
src/components/_shared/PageLayout.tsx
View File

@ -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', {

2
src/pages/index.page.tsx
View File

@ -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 />}>

5
src/styles/app.scss
View File

@ -633,11 +633,6 @@ figure {
border-bottom: 2px solid #000;
color: #000;
cursor: default;
pointer-events: none;
&:hover {
background: none;
}
}
}
}