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

Fixed all topics and all authors style

Browse Source
This commit is contained in:
kvakazyambra 2022-11-15 00:58:33 +03:00
parent 058a763f49
commit e645fae850
4 changed files with 52 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,10 +52,7 @@
.authorSubscribe {
align-items: center;
display: flex;
@include media-breakpoint-down(lg) {
padding: 0 0 0 42px;
}
padding: 0 0 0 42px;
a {
background: #f7f7f7;

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

@ -64,13 +64,10 @@ export const AllAuthorsView = (props: Props) => {
<Show when={sortedAuthors().length > 0}>
<div class="shift-content">
<div class="row">
<div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-8')}>
<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>
</div>
<div class="row">
<div class="col-lg-10 col-xl-8">
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<li classList={{ selected: searchParams().by === 'shouts' }}>
<a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}>
@ -94,10 +91,15 @@ export const AllAuthorsView = (props: Props) => {
</a>
</li>
</ul>
<Show
when={!searchParams().by || searchParams().by === 'name'}
fallback={() => (
<div class={styles.stats}>
</div>
</div>
<Show
when={!searchParams().by || searchParams().by === 'name'}
fallback={() => (
<div class={styles.stats}>
<div class="row">
<div class="col-lg-10 col-xl-9">
<For each={sortedAuthors().slice(0, limit())}>
{(author) => (
<AuthorCard
@ -110,27 +112,31 @@ export const AllAuthorsView = (props: Props) => {
/>
)}
</For>
<Show when={sortedAuthors().length > limit()}>
<div class="row">
<div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
<button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
{t('More')}
</button>
</div>
</div>
</Show>
</div>
)}
>
<For each={sortedKeys()}>
{(letter) => (
<div class={clsx(styles.group, 'group')}>
<h2>{letter}</h2>
<div class="container">
</div>
<Show when={sortedAuthors().length > limit()}>
<div class="row">
<div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
<button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
{t('More')}
</button>
</div>
</div>
</Show>
</div>
)}
>
<For each={sortedKeys()}>
{(letter) => (
<div class={clsx(styles.group, 'group')}>
<h2>{letter}</h2>
<div class="container">
<div class="row">
<div class="col-lg-10">
<div class="row">
<For each={byLetter()[letter]}>
{(author: Author) => (
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-4')}>
<div class="topic-title">
<a href={`/author/${author.slug}`}>{author.name}</a>
</div>
@ -140,11 +146,11 @@ export const AllAuthorsView = (props: Props) => {
</div>
</div>
</div>
)}
</For>
</Show>
</div>
</div>
</div>
</div>
)}
</For>
</Show>
</div>
</Show>
</div>

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

@ -127,15 +127,19 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
<h2>{letter}</h2>
<div class="container">
<div class="row">
<For each={byLetter()[letter]}>
{(topic) => (
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
<div class="topic-title">
<a href={`/topic/${topic.slug}`}>{topic.title}</a>
</div>
</div>
)}
</For>
<div class="col-lg-10">
<div class="row">
<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>
</div>
)}
</For>
</div>
</div>
</div>
</div>
</div>

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

@ -17,9 +17,7 @@
}
.topic {
@include media-breakpoint-down(md) {
margin-top: 1.6rem;
}
margin-bottom: 1.6rem;
@include media-breakpoint-down(sm) {
margin-left: 2.6rem;