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

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

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

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

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