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

Fixed alltopics and all authors page style

Browse Source
This commit is contained in:
kvakazyambra 2022-11-19 16:04:42 +03:00
parent ca525e7370
commit 9f537a75c1
3 changed files with 65 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,29 +59,27 @@ export const AllAuthorsView = (props: Props) => {
const showMore = () => setLimit((oldLimit) => oldLimit + PAGE_SIZE)
return (
<div class={clsx(styles.allTopicsPage, 'container')}>
<div class={clsx(styles.allTopicsPage, 'wide-container')}>
<Show when={sortedAuthors().length > 0}>
<div class="shift-content">
<div class="row">
<div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
<h1>{t('Authors')}</h1>
<p>{t('Subscribe who you like to tune your personal feed')}</p>
<div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
<h1>{t('Authors')}</h1>
<p>{t('Subscribe who you like to tune your personal feed')}</p>
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<li classList={{ selected: searchParams().by === 'shouts' }}>
<a href="/authors?by=shouts">{t('By shouts')}</a>
</li>
<li classList={{ selected: searchParams().by === 'rating' }}>
<a href="/authors?by=rating">{t('By rating')}</a>
</li>
<li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}>
<a href="/authors">{t('By alphabet')}</a>
</li>
<li class="view-switcher__search">
<SearchField onChange={searchAuthors} />
</li>
</ul>
</div>
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<li classList={{ selected: searchParams().by === 'shouts' }}>
<a href="/authors?by=shouts">{t('By shouts')}</a>
</li>
<li classList={{ selected: searchParams().by === 'rating' }}>
<a href="/authors?by=rating">{t('By rating')}</a>
</li>
<li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}>
<a href="/authors">{t('By alphabet')}</a>
</li>
<li class="view-switcher__search">
<SearchField onChange={searchAuthors} />
</li>
</ul>
</div>
<Show

81
src/components/Views/AllTopics.tsx
View File

@ -126,50 +126,46 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
}
const AllTopicsHead = () => (
<div class="row">
<div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
<h1>{t('Topics')}</h1>
<p>{t('Subscribe what you like to tune your personal feed')}</p>
<div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
<h1>{t('Topics')}</h1>
<p>{t('Subscribe what you like to tune your personal feed')}</p>
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<li classList={{ selected: searchParams().by === 'shouts' }}>
<a href="/topics?by=shouts">{t('By shouts')}</a>
</li>
<li classList={{ selected: searchParams().by === 'authors' }}>
<a href="/topics?by=authors">{t('By authors')}</a>
</li>
<li classList={{ selected: searchParams().by === 'title' }}>
<a href="/topics?by=title">{t('By alphabet')}</a>
</li>
<li class="view-switcher__search">
<SearchField onChange={searchTopics} />
</li>
</ul>
</div>
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<li classList={{ selected: searchParams().by === 'shouts' }}>
<a href="/topics?by=shouts">{t('By shouts')}</a>
</li>
<li classList={{ selected: searchParams().by === 'authors' }}>
<a href="/topics?by=authors">{t('By authors')}</a>
</li>
<li classList={{ selected: searchParams().by === 'title' }}>
<a href="/topics?by=title">{t('By alphabet')}</a>
</li>
<li class="view-switcher__search">
<SearchField onChange={searchTopics} />
</li>
</ul>
</div>
)
return (
<div class={clsx(styles.allTopicsPage, 'container')}>
<div class={clsx(styles.allTopicsPage, 'wide-container')}>
<div class="shift-content">
<AllTopicsHead />
<Show when={sortedTopics().length > 0 || searchResults().length > 0}>
<Show when={searchParams().by === 'title'}>
<div class="row">
<div class="col-lg-10 col-xl-9">
<ul class={clsx('nodash', styles.alphabet)}>
<For each={ALPHABET}>
{(letter, index) => (
<li>
<Show when={sortedKeys().includes(letter)}>
<a href={`#letter-${index()}`}>{letter}</a>
</Show>
<Show when={!sortedKeys().includes(letter)}>{letter}</Show>
</li>
)}
</For>
</ul>
</div>
<div class="col-lg-10 col-xl-9">
<ul class={clsx('nodash', styles.alphabet)}>
<For each={ALPHABET}>
{(letter, index) => (
<li>
<Show when={sortedKeys().includes(letter)}>
<a href={`#letter-${index()}`}>{letter}</a>
</Show>
<Show when={!sortedKeys().includes(letter)}>{letter}</Show>
</li>
)}
</For>
</ul>
</div>
<For each={sortedKeys()}>
@ -183,9 +179,8 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
<For each={byLetter()[letter]}>
{(topic) => (
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-4')}>
<div class="topic-title">
<a href={`/topic/${topic.slug}`}>{topic.title}</a>
</div>
<a href={`/topic/${topic.slug}`}>{topic.title}</a>
<span class={styles.articlesCounter}>{topic.stat.shouts}</span>
</div>
)}
</For>
@ -238,12 +233,10 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
</Show>
<Show when={sortedTopics().length > limit()}>
<div class="row">
<div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
<button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
{t('Load more')}
</button>
</div>
<div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10 offset-md-1')}>
<button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
{t('Load more')}
</button>
</div>
</Show>
</Show>

16
src/styles/AllTopics.module.scss
View File

@ -1,6 +1,6 @@
.allTopicsPage {
.group {
font-weight: bold;
@include font-size(1.6rem);
margin: 3em 0 9.6rem;
@include media-breakpoint-down(sm) {
@ -17,11 +17,7 @@
}
.topic {
margin-bottom: 1.6rem;
@include media-breakpoint-down(sm) {
margin-left: 2.6rem;
}
margin-bottom: 2.4rem;
}
}
@ -54,6 +50,7 @@
}
.alphabet {
color: rgba(0, 0, 0, 0.2);
display: flex;
flex-wrap: wrap;
font-weight: 700;
@ -66,3 +63,10 @@
margin-right: 3%;
}
}
.articlesCounter {
@include font-size(1.2rem);
margin-left: 0.5em;
vertical-align: super;
}