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

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

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

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

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

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

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

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

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