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
topicsBySlug?: { [slug: string]: Topic }
iconButton?: boolean
nodate?: boolean
}
export const Beside = (props: BesideProps) => {
@ -72,7 +73,10 @@ export const Beside = (props: BesideProps) => {
/>
</Show>
<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 when={props.wrapper === 'top-article' && value?.slug}>
<ArticleCard
@ -87,7 +91,10 @@ export const Beside = (props: BesideProps) => {
</div>
</Show>
<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>

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 { ArticleCard } from './Card'
export const Row1 = (props: { article: Shout }) => (
export const Row1 = (props: { article: Shout; nodate?: boolean }) => (
<Show when={!!props.article}>
<div class="floor floor--one-article">
<div class="wide-container">
<div class="row">
<div class="col-12">
<ArticleCard article={props.article} settings={{ isSingle: true }} />
<ArticleCard article={props.article} settings={{ isSingle: true, nodate: props.nodate }} />
</div>
</div>
</div>

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

@ -8,7 +8,7 @@ const x = [
['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)
createComputed(() => setY(Math.floor(Math.random() * x.length)))
@ -26,7 +26,7 @@ export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
article={a}
settings={{
isWithCover: props.isEqual || x[y()][i()] === '8',
nodate: props.isEqual
nodate: props.isEqual || props.nodate
}}
/>
</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 { ArticleCard } from './Card'
export const Row3 = (props: { articles: Shout[]; header?: JSX.Element }) => {
export const Row3 = (props: { articles: Shout[]; header?: JSX.Element; nodate?: boolean }) => {
return (
<div class="floor">
<div class="wide-container">
@ -12,7 +12,7 @@ export const Row3 = (props: { articles: Shout[]; header?: JSX.Element }) => {
<For each={props.articles}>
{(a) => (
<div class="col-md-4">
<ArticleCard article={a} />
<ArticleCard article={a} settings={{ nodate: props.nodate }} />
</div>
)}
</For>

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

@ -1,21 +1,30 @@
import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card'
export const Row5 = (props: { articles: Shout[] }) => {
export const Row5 = (props: { articles: Shout[]; nodate?: boolean }) => {
return (
<div class="floor floor--1">
<div class="wide-container">
<div class="row">
<div class="col-md-3">
<ArticleCard article={props.articles[0]} />
<ArticleCard article={props.articles[1]} settings={{ noimage: true, withBorder: true }} />
<ArticleCard article={props.articles[0]} settings={{ nodate: props.nodate }} />
<ArticleCard
article={props.articles[1]}
settings={{ noimage: true, withBorder: true, nodate: props.nodate }}
/>
</div>
<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 class="col-md-3">
<ArticleCard article={props.articles[3]} />
<ArticleCard article={props.articles[4]} settings={{ noimage: true, withBorder: true }} />
<ArticleCard article={props.articles[3]} settings={{ nodate: props.nodate }} />
<ArticleCard
article={props.articles[4]}
settings={{ noimage: true, withBorder: true, nodate: props.nodate }}
/>
</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}>
<NavTopics topics={randomTopics()} />
<Row5 articles={sortedArticles().slice(0, 5)} />
<Row5 articles={sortedArticles().slice(0, 5)} nodate={true} />
<Hero />
@ -117,15 +117,17 @@ export const HomeView = (props: HomeProps) => {
title={t('Top viewed')}
values={topViewedArticles().slice(0, 5)}
wrapper={'top-article'}
nodate={true}
/>
<Row3 articles={sortedArticles().slice(6, 9)} />
<Row3 articles={sortedArticles().slice(6, 9)} nodate={true} />
<Beside
beside={sortedArticles()[9]}
title={t('Top authors')}
values={topAuthors()}
wrapper={'author'}
nodate={true}
/>
<Slider title={t('Top month articles')}>
@ -144,13 +146,17 @@ export const HomeView = (props: HomeProps) => {
</For>
</Slider>
<Row2 articles={sortedArticles().slice(10, 12)} />
<Row2 articles={sortedArticles().slice(10, 12)} nodate={true} />
<RowShort articles={sortedArticles().slice(12, 16)} />
<Row1 article={sortedArticles()[16]} />
<Row3 articles={sortedArticles().slice(17, 20)} />
<Row3 articles={topCommentedArticles().slice(0, 3)} header={<h2>{t('Top commented')}</h2>} />
<Row1 article={sortedArticles()[16]} nodate={true} />
<Row3 articles={sortedArticles().slice(17, 20)} nodate={true} />
<Row3
articles={topCommentedArticles().slice(0, 3)}
header={<h2>{t('Top commented')}</h2>}
nodate={true}
/>
{randomLayout()}
@ -176,28 +182,29 @@ export const HomeView = (props: HomeProps) => {
values={topTopics().slice(0, 5)}
wrapper={'topic'}
isTopicCompact={true}
nodate={true}
/>
<Row3 articles={sortedArticles().slice(21, 24)} />
<Banner />
<Row2 articles={sortedArticles().slice(24, 26)} />
<Row3 articles={sortedArticles().slice(26, 29)} />
<Row2 articles={sortedArticles().slice(29, 31)} />
<Row3 articles={sortedArticles().slice(31, 34)} />
<Row2 articles={sortedArticles().slice(24, 26)} nodate={true} />
<Row3 articles={sortedArticles().slice(26, 29)} nodate={true} />
<Row2 articles={sortedArticles().slice(29, 31)} nodate={true} />
<Row3 articles={sortedArticles().slice(31, 34)} nodate={true} />
</Show>
<For each={pages()}>
{(page) => (
<>
<Row1 article={page[0]} />
<Row3 articles={page.slice(1, 4)} />
<Row2 articles={page.slice(4, 6)} />
<Beside values={page.slice(6, 9)} beside={page[9]} wrapper="article" />
<Row1 article={page[10]} />
<Row2 articles={page.slice(11, 13)} />
<Row3 articles={page.slice(13, 16)} />
<Row1 article={page[0]} nodate={true} />
<Row3 articles={page.slice(1, 4)} nodate={true} />
<Row2 articles={page.slice(4, 6)} nodate={true} />
<Beside values={page.slice(6, 9)} beside={page[9]} wrapper="article" nodate={true} />
<Row1 article={page[10]} nodate={true} />
<Row2 articles={page.slice(11, 13)} nodate={true} />
<Row3 articles={page.slice(13, 16)} nodate={true} />
</>
)}
</For>