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 { .authorSubscribe {
align-items: center; align-items: center;
display: flex; display: flex;
padding: 0 0 0 42px;
@include media-breakpoint-down(lg) {
padding: 0 0 0 42px;
}
a { a {
background: #f7f7f7; background: #f7f7f7;

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

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

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

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

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

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