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

Merge branch 'search-component' of github.com:Discours/discoursio-webapp into search-component

Browse Source
This commit is contained in:
Igor Lobanov 2022-11-21 01:02:00 +01:00
commit 995a7be94e
5 changed files with 65 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Author/Card.module.scss
View File

@ -15,9 +15,6 @@
.authorDetails {
display: flex;
flex: 1;
width: max-content;
// padding-right: 1.2rem;
@include media-breakpoint-down(sm) {
flex-wrap: wrap;
@ -193,6 +190,7 @@
.authorSubscribe {
margin-top: 2rem;
padding-left: 0;
}
.authorDetails {

1
src/components/Author/Full.scss
View File

@ -1,6 +1,5 @@
.user-details {
margin-bottom: 4.4rem;
padding: 0;
}
.author-page {

8
src/components/Author/Full.tsx
View File

@ -4,11 +4,9 @@ import './Full.scss'
export const AuthorFull = (props: { author: Author }) => {
return (
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2 user-details">
<AuthorCard author={props.author} compact={false} isAuthorPage={true} />
</div>
<div class="row">
<div class="col-md-8 offset-md-2 user-details">
<AuthorCard author={props.author} compact={false} isAuthorPage={true} />
</div>
</div>
)

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

@ -182,7 +182,7 @@ export const AllAuthorsView = (props: Props) => {
</Show>
<Show when={searchParams().by && searchParams().by !== 'name'}>
<div class="row">
<div class={clsx(styles.stats, 'row')}>
<div class="col-lg-10 col-xl-9">
<For each={sortedAuthors().slice(0, limit())}>
{(author) => (

120
src/components/Views/Author.tsx
View File

@ -70,73 +70,73 @@ export const AuthorView = (props: AuthorProps) => {
)
return (
<div class="container author-page">
<div class="author-page">
<Show when={author()} fallback={<div class="center">{t('Loading')}</div>}>
<AuthorFull author={author()} />
<div class="row group__controls">
<div class="col-md-8">
<ul class="view-switcher">
<li classList={{ selected: searchParams().by === 'rating' }}>
<button type="button" onClick={() => changeSearchParam('by', 'rating')}>
{t('Popular')}
</button>
</li>
<li classList={{ selected: searchParams().by === 'followed' }}>
<button type="button" onClick={() => changeSearchParam('by', 'followed')}>
{t('Followers')}
</button>
</li>
<li classList={{ selected: searchParams().by === 'commented' }}>
<button type="button" onClick={() => changeSearchParam('by', 'commented')}>
{t('Discussing')}
</button>
</li>
</ul>
</div>
<div class="col-md-4">
<div class="mode-switcher">
{`${t('Show')} `}
<span class="mode-switcher__control">{t('All posts')}</span>
<div class="wide-container">
<AuthorFull author={author()} />
<div class="row group__controls">
<div class="col-md-8">
<ul class="view-switcher">
<li classList={{ selected: searchParams().by === 'rating' }}>
<button type="button" onClick={() => changeSearchParam('by', 'rating')}>
{t('Popular')}
</button>
</li>
<li classList={{ selected: searchParams().by === 'followed' }}>
<button type="button" onClick={() => changeSearchParam('by', 'followed')}>
{t('Followers')}
</button>
</li>
<li classList={{ selected: searchParams().by === 'commented' }}>
<button type="button" onClick={() => changeSearchParam('by', 'commented')}>
{t('Discussing')}
</button>
</li>
</ul>
</div>
<div class="col-md-4">
<div class="mode-switcher">
{`${t('Show')} `}
<span class="mode-switcher__control">{t('All posts')}</span>
</div>
</div>
<h3 class="col-12">{title()}</h3>
</div>
</div>
<h3 class="col-12">{title()}</h3>
<Beside
title={t('Topics which supported by author')}
values={topicsByAuthor()[author().slug].slice(0, 5)}
beside={sortedArticles()[0]}
wrapper={'topic'}
topicShortDescription={true}
isTopicCompact={true}
isTopicInRow={true}
iconButton={true}
/>
<Row3 articles={sortedArticles().slice(1, 4)} />
<Row2 articles={sortedArticles().slice(4, 6)} />
<Row3 articles={sortedArticles().slice(6, 9)} />
<Row3 articles={sortedArticles().slice(9, 12)} />
<div class="row">
<Beside
title={t('Topics which supported by author')}
values={topicsByAuthor()[author().slug].slice(0, 5)}
beside={sortedArticles()[0]}
wrapper={'topic'}
topicShortDescription={true}
isTopicCompact={true}
isTopicInRow={true}
iconButton={true}
/>
<Row3 articles={sortedArticles().slice(1, 4)} />
<Row2 articles={sortedArticles().slice(4, 6)} />
<Row3 articles={sortedArticles().slice(6, 9)} />
<Row3 articles={sortedArticles().slice(9, 12)} />
<For each={pages()}>
{(page) => (
<>
<Row3 articles={page.slice(0, 3)} />
<Row3 articles={page.slice(3, 6)} />
<Row3 articles={page.slice(6, 9)} />
</>
)}
</For>
<For each={pages()}>
{(page) => (
<>
<Row3 articles={page.slice(0, 3)} />
<Row3 articles={page.slice(3, 6)} />
<Row3 articles={page.slice(6, 9)} />
</>
)}
</For>
<Show when={isLoadMoreButtonVisible()}>
<p class="load-more-container">
<button class="button" onClick={loadMore}>
{t('Load more')}
</button>
</p>
</Show>
</div>
<Show when={isLoadMoreButtonVisible()}>
<p class="load-more-container">
<button class="button" onClick={loadMore}>
{t('Load more')}
</button>
</p>
</Show>
</Show>
</div>
)