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

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

@ -59,10 +59,9 @@ 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>
@ -82,7 +81,6 @@ export const AllAuthorsView = (props: Props) => {
</li> </li>
</ul> </ul>
</div> </div>
</div>
<Show <Show
when={!searchParams().by || searchParams().by === 'name'} when={!searchParams().by || searchParams().by === 'name'}

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

@ -126,7 +126,6 @@ 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>
@ -146,16 +145,14 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
</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}>
@ -170,7 +167,6 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
</For> </For>
</ul> </ul>
</div> </div>
</div>
<For each={sortedKeys()}> <For each={sortedKeys()}>
{(letter, index) => ( {(letter, index) => (
@ -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>
</div> <span class={styles.articlesCounter}>{topic.stat.shouts}</span>
</div> </div>
)} )}
</For> </For>
@ -238,13 +233,11 @@ 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>
</div> </div>

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;
}