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

Hide articles dates on the main page

Browse Source
This commit is contained in:
Alexey Khaov 2023-01-25 01:15:29 +03:00
parent a2f80f90fd
commit 9483b84bad
6 changed files with 54 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Feed/Beside.tsx
View File

@ -20,6 +20,7 @@ interface BesideProps {
topicShortDescription?: boolean topicShortDescription?: boolean
topicsBySlug?: { [slug: string]: Topic } topicsBySlug?: { [slug: string]: Topic }
iconButton?: boolean iconButton?: boolean
nodate?: boolean
} }
export const Beside = (props: BesideProps) => { export const Beside = (props: BesideProps) => {
@ -72,7 +73,10 @@ export const Beside = (props: BesideProps) => {
/> />
</Show> </Show>
<Show when={props.wrapper === 'article' && value?.slug}> <Show when={props.wrapper === 'article' && value?.slug}>
<ArticleCard article={value as Shout} settings={{ noimage: true }} /> <ArticleCard
article={value as Shout}
settings={{ noimage: true, nodate: props.nodate }}
/>
</Show> </Show>
<Show when={props.wrapper === 'top-article' && value?.slug}> <Show when={props.wrapper === 'top-article' && value?.slug}>
<ArticleCard <ArticleCard
@ -87,7 +91,10 @@ export const Beside = (props: BesideProps) => {
</div> </div>
</Show> </Show>
<div class={clsx('col-md-8', styles.shoutCardContainer)}> <div class={clsx('col-md-8', styles.shoutCardContainer)}>
<ArticleCard article={props.beside} settings={{ isBigTitle: true, isBeside: true }} /> <ArticleCard
article={props.beside}
settings={{ isBigTitle: true, isBeside: true, nodate: props.nodate }}
/>
</div> </div>
</div> </div>
</div> </div>

4
src/components/Feed/Row1.tsx
View File

@ -2,13 +2,13 @@ import { Show } from 'solid-js'
import type { Shout } from '../../graphql/types.gen' import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card' import { ArticleCard } from './Card'
export const Row1 = (props: { article: Shout }) => ( export const Row1 = (props: { article: Shout; nodate?: boolean }) => (
<Show when={!!props.article}> <Show when={!!props.article}>
<div class="floor floor--one-article"> <div class="floor floor--one-article">
<div class="wide-container"> <div class="wide-container">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<ArticleCard article={props.article} settings={{ isSingle: true }} /> <ArticleCard article={props.article} settings={{ isSingle: true, nodate: props.nodate }} />
</div> </div>
</div> </div>
</div> </div>

4
src/components/Feed/Row2.tsx
View File

@ -8,7 +8,7 @@ const x = [
['8', '4'] ['8', '4']
] ]
export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => { export const Row2 = (props: { articles: Shout[]; isEqual?: boolean; nodate?: boolean }) => {
const [y, setY] = createSignal(0) const [y, setY] = createSignal(0)
createComputed(() => setY(Math.floor(Math.random() * x.length))) createComputed(() => setY(Math.floor(Math.random() * x.length)))
@ -26,7 +26,7 @@ export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
article={a} article={a}
settings={{ settings={{
isWithCover: props.isEqual || x[y()][i()] === '8', isWithCover: props.isEqual || x[y()][i()] === '8',
nodate: props.isEqual nodate: props.isEqual || props.nodate
}} }}
/> />
</div> </div>

4
src/components/Feed/Row3.tsx
View File

@ -3,7 +3,7 @@ import { For } from 'solid-js'
import type { Shout } from '../../graphql/types.gen' import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card' import { ArticleCard } from './Card'
export const Row3 = (props: { articles: Shout[]; header?: JSX.Element }) => { export const Row3 = (props: { articles: Shout[]; header?: JSX.Element; nodate?: boolean }) => {
return ( return (
<div class="floor"> <div class="floor">
<div class="wide-container"> <div class="wide-container">
@ -12,7 +12,7 @@ export const Row3 = (props: { articles: Shout[]; header?: JSX.Element }) => {
<For each={props.articles}> <For each={props.articles}>
{(a) => ( {(a) => (
<div class="col-md-4"> <div class="col-md-4">
<ArticleCard article={a} /> <ArticleCard article={a} settings={{ nodate: props.nodate }} />
</div> </div>
)} )}
</For> </For>

21
src/components/Feed/Row5.tsx
View File

@ -1,21 +1,30 @@
import type { Shout } from '../../graphql/types.gen' import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card' import { ArticleCard } from './Card'
export const Row5 = (props: { articles: Shout[] }) => { export const Row5 = (props: { articles: Shout[]; nodate?: boolean }) => {
return ( return (
<div class="floor floor--1"> <div class="floor floor--1">
<div class="wide-container"> <div class="wide-container">
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">
<ArticleCard article={props.articles[0]} /> <ArticleCard article={props.articles[0]} settings={{ nodate: props.nodate }} />
<ArticleCard article={props.articles[1]} settings={{ noimage: true, withBorder: true }} /> <ArticleCard
article={props.articles[1]}
settings={{ noimage: true, withBorder: true, nodate: props.nodate }}
/>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<ArticleCard article={props.articles[2]} settings={{ isBigTitle: true }} /> <ArticleCard
article={props.articles[2]}
settings={{ isBigTitle: true, nodate: props.nodate }}
/>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<ArticleCard article={props.articles[3]} /> <ArticleCard article={props.articles[3]} settings={{ nodate: props.nodate }} />
<ArticleCard article={props.articles[4]} settings={{ noimage: true, withBorder: true }} /> <ArticleCard
article={props.articles[4]}
settings={{ noimage: true, withBorder: true, nodate: props.nodate }}
/>
</div> </div>
</div> </div>
</div> </div>

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

@ -107,7 +107,7 @@ export const HomeView = (props: HomeProps) => {
<Show when={locale() && sortedArticles().length > 0}> <Show when={locale() && sortedArticles().length > 0}>
<NavTopics topics={randomTopics()} /> <NavTopics topics={randomTopics()} />
<Row5 articles={sortedArticles().slice(0, 5)} /> <Row5 articles={sortedArticles().slice(0, 5)} nodate={true} />
<Hero /> <Hero />
@ -117,15 +117,17 @@ export const HomeView = (props: HomeProps) => {
title={t('Top viewed')} title={t('Top viewed')}
values={topViewedArticles().slice(0, 5)} values={topViewedArticles().slice(0, 5)}
wrapper={'top-article'} wrapper={'top-article'}
nodate={true}
/> />
<Row3 articles={sortedArticles().slice(6, 9)} /> <Row3 articles={sortedArticles().slice(6, 9)} nodate={true} />
<Beside <Beside
beside={sortedArticles()[9]} beside={sortedArticles()[9]}
title={t('Top authors')} title={t('Top authors')}
values={topAuthors()} values={topAuthors()}
wrapper={'author'} wrapper={'author'}
nodate={true}
/> />
<Slider title={t('Top month articles')}> <Slider title={t('Top month articles')}>
@ -144,13 +146,17 @@ export const HomeView = (props: HomeProps) => {
</For> </For>
</Slider> </Slider>
<Row2 articles={sortedArticles().slice(10, 12)} /> <Row2 articles={sortedArticles().slice(10, 12)} nodate={true} />
<RowShort articles={sortedArticles().slice(12, 16)} /> <RowShort articles={sortedArticles().slice(12, 16)} />
<Row1 article={sortedArticles()[16]} /> <Row1 article={sortedArticles()[16]} nodate={true} />
<Row3 articles={sortedArticles().slice(17, 20)} /> <Row3 articles={sortedArticles().slice(17, 20)} nodate={true} />
<Row3 articles={topCommentedArticles().slice(0, 3)} header={<h2>{t('Top commented')}</h2>} /> <Row3
articles={topCommentedArticles().slice(0, 3)}
header={<h2>{t('Top commented')}</h2>}
nodate={true}
/>
{randomLayout()} {randomLayout()}
@ -176,28 +182,29 @@ export const HomeView = (props: HomeProps) => {
values={topTopics().slice(0, 5)} values={topTopics().slice(0, 5)}
wrapper={'topic'} wrapper={'topic'}
isTopicCompact={true} isTopicCompact={true}
nodate={true}
/> />
<Row3 articles={sortedArticles().slice(21, 24)} /> <Row3 articles={sortedArticles().slice(21, 24)} />
<Banner /> <Banner />
<Row2 articles={sortedArticles().slice(24, 26)} /> <Row2 articles={sortedArticles().slice(24, 26)} nodate={true} />
<Row3 articles={sortedArticles().slice(26, 29)} /> <Row3 articles={sortedArticles().slice(26, 29)} nodate={true} />
<Row2 articles={sortedArticles().slice(29, 31)} /> <Row2 articles={sortedArticles().slice(29, 31)} nodate={true} />
<Row3 articles={sortedArticles().slice(31, 34)} /> <Row3 articles={sortedArticles().slice(31, 34)} nodate={true} />
</Show> </Show>
<For each={pages()}> <For each={pages()}>
{(page) => ( {(page) => (
<> <>
<Row1 article={page[0]} /> <Row1 article={page[0]} nodate={true} />
<Row3 articles={page.slice(1, 4)} /> <Row3 articles={page.slice(1, 4)} nodate={true} />
<Row2 articles={page.slice(4, 6)} /> <Row2 articles={page.slice(4, 6)} nodate={true} />
<Beside values={page.slice(6, 9)} beside={page[9]} wrapper="article" /> <Beside values={page.slice(6, 9)} beside={page[9]} wrapper="article" nodate={true} />
<Row1 article={page[10]} /> <Row1 article={page[10]} nodate={true} />
<Row2 articles={page.slice(11, 13)} /> <Row2 articles={page.slice(11, 13)} nodate={true} />
<Row3 articles={page.slice(13, 16)} /> <Row3 articles={page.slice(13, 16)} nodate={true} />
</> </>
)} )}
</For> </For>