Style fixes
This commit is contained in:
parent
2457ae05ac
commit
94f9e77203
|
|
@ -29,13 +29,8 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 0;
|
||||
padding-top: 1em;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-left: $grid-gutter-width;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 0 1em 1em 0;
|
||||
|
|
|
|||
|
|
@ -6,19 +6,21 @@ import { clsx } from 'clsx'
|
|||
export default () => {
|
||||
return (
|
||||
<div class={styles.discoursBanner}>
|
||||
<div class="wide-container row">
|
||||
<div class={clsx(styles.discoursBannerContent, 'col-lg-5')}>
|
||||
<h3>{t('Discours is created with our common effort')}</h3>
|
||||
<p>
|
||||
<a href="/about/help">{t('Support us')}</a>
|
||||
<a href="/create">{t('Become an author')}</a>
|
||||
<a href={''} onClick={() => showModal('auth')}>
|
||||
{t('Join the community')}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class={clsx(styles.discoursBannerImage, 'col-lg-6 offset-lg-1')}>
|
||||
<img src="/discours-banner.jpg" alt={t('Discours')} />
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<div class={clsx(styles.discoursBannerContent, 'col-lg-5')}>
|
||||
<h3>{t('Discours is created with our common effort')}</h3>
|
||||
<p>
|
||||
<a href="/about/help">{t('Support us')}</a>
|
||||
<a href="/create">{t('Become an author')}</a>
|
||||
<a href={''} onClick={() => showModal('auth')}>
|
||||
{t('Join the community')}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class={clsx(styles.discoursBannerImage, 'col-lg-6 offset-lg-1')}>
|
||||
<img src="/discours-banner.jpg" alt={t('Discours')} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,12 +34,6 @@
|
|||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.wideContainer {
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding: 0 $container-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ export const Footer = () => {
|
|||
]
|
||||
return (
|
||||
<footer class={styles.discoursFooter}>
|
||||
<div class={clsx('wide-container', styles.wideContainer)}>
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<For each={links()}>
|
||||
{({ header, items }) => (
|
||||
|
|
|
|||
|
|
@ -16,10 +16,6 @@
|
|||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.wide-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
|
|
|
|||
|
|
@ -5,35 +5,37 @@ import { showModal } from '../../stores/ui'
|
|||
export default () => {
|
||||
return (
|
||||
<div class="about-discours">
|
||||
<div class="wide-container row">
|
||||
<div class="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
||||
<h4>{t('Horizontal collaborative journalistic platform')}</h4>
|
||||
<p>
|
||||
{t(
|
||||
'Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects'
|
||||
)}
|
||||
.
|
||||
<br />
|
||||
<em>
|
||||
{t('We are convinced that one voice is good, but many is better') +
|
||||
'. ' +
|
||||
t('We create the most amazing stories together')}
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
||||
<h4>{t('Horizontal collaborative journalistic platform')}</h4>
|
||||
<p>
|
||||
{t(
|
||||
'Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects'
|
||||
)}
|
||||
.
|
||||
</em>
|
||||
</p>
|
||||
<div class="about-discours__actions">
|
||||
<a class="button" onClick={() => showModal('auth')}>
|
||||
{t('Join the community')}
|
||||
</a>
|
||||
<a class="button" href="/create">
|
||||
{t('Become an author')}
|
||||
</a>
|
||||
<a class="button" href="/about/manifest">
|
||||
{t('About the project')}
|
||||
</a>
|
||||
<a class="button" href="/about/help">
|
||||
{t('Support us')}
|
||||
</a>
|
||||
<br />
|
||||
<em>
|
||||
{t('We are convinced that one voice is good, but many is better') +
|
||||
'. ' +
|
||||
t('We create the most amazing stories together')}
|
||||
.
|
||||
</em>
|
||||
</p>
|
||||
<div class="about-discours__actions">
|
||||
<a class="button" onClick={() => showModal('auth')}>
|
||||
{t('Join the community')}
|
||||
</a>
|
||||
<a class="button" href="/create">
|
||||
{t('Become an author')}
|
||||
</a>
|
||||
<a class="button" href="/about/manifest">
|
||||
{t('About the project')}
|
||||
</a>
|
||||
<a class="button" href="/about/help">
|
||||
{t('Support us')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-between(md, xl) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,67 +26,69 @@ export const Beside = (props: BesideProps) => {
|
|||
return (
|
||||
<Show when={!!props.beside?.slug && props.values?.length > 0}>
|
||||
<div class="floor floor--9">
|
||||
<div class="wide-container row">
|
||||
<Show when={!!props.values}>
|
||||
<div class="col-md-4">
|
||||
<Show when={!!props.title}>
|
||||
<div class={styles.besideColumnTitle}>
|
||||
<h4>{props.title}</h4>
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<Show when={!!props.values}>
|
||||
<div class="col-md-4">
|
||||
<Show when={!!props.title}>
|
||||
<div class={styles.besideColumnTitle}>
|
||||
<h4>{props.title}</h4>
|
||||
|
||||
<Show when={props.wrapper === 'author'}>
|
||||
<a href="/authors">
|
||||
{t('All authors')}
|
||||
<Icon name="arrow-right" class={styles.icon} />
|
||||
</a>
|
||||
</Show>
|
||||
<Show when={props.wrapper === 'author'}>
|
||||
<a href="/authors">
|
||||
{t('All authors')}
|
||||
<Icon name="arrow-right" class={styles.icon} />
|
||||
</a>
|
||||
</Show>
|
||||
|
||||
<Show when={props.wrapper === 'topic'}>
|
||||
<a href="/topics">
|
||||
{t('All topics')}
|
||||
<Icon name="arrow-right" class={styles.icon} />
|
||||
</a>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
<ul class={styles.besideColumn}>
|
||||
<For each={[...props.values]}>
|
||||
{(value: Partial<Shout | User | Topic>) => (
|
||||
<li classList={{ [styles.top]: props.wrapper.startsWith('top-') }}>
|
||||
<Show when={props.wrapper === 'topic'}>
|
||||
<TopicCard
|
||||
topic={value as Topic}
|
||||
compact={props.isTopicCompact}
|
||||
shortDescription={props.topicShortDescription}
|
||||
isTopicInRow={props.isTopicInRow}
|
||||
iconButton={props.iconButton}
|
||||
showPublications={true}
|
||||
/>
|
||||
</Show>
|
||||
<Show when={props.wrapper === 'author'}>
|
||||
<AuthorCard
|
||||
author={value as Author}
|
||||
compact={true}
|
||||
hasLink={true}
|
||||
truncateBio={true}
|
||||
/>
|
||||
</Show>
|
||||
<Show when={props.wrapper === 'article' && value?.slug}>
|
||||
<ArticleCard article={value as Shout} settings={{ noimage: true }} />
|
||||
</Show>
|
||||
<Show when={props.wrapper === 'top-article' && value?.slug}>
|
||||
<ArticleCard
|
||||
article={value as Shout}
|
||||
settings={{ noimage: true, noauthor: true, nodate: true, isShort: true }}
|
||||
/>
|
||||
</Show>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
<Show when={props.wrapper === 'topic'}>
|
||||
<a href="/topics">
|
||||
{t('All topics')}
|
||||
<Icon name="arrow-right" class={styles.icon} />
|
||||
</a>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
<ul class={styles.besideColumn}>
|
||||
<For each={[...props.values]}>
|
||||
{(value: Partial<Shout | User | Topic>) => (
|
||||
<li classList={{ [styles.top]: props.wrapper.startsWith('top-') }}>
|
||||
<Show when={props.wrapper === 'topic'}>
|
||||
<TopicCard
|
||||
topic={value as Topic}
|
||||
compact={props.isTopicCompact}
|
||||
shortDescription={props.topicShortDescription}
|
||||
isTopicInRow={props.isTopicInRow}
|
||||
iconButton={props.iconButton}
|
||||
showPublications={true}
|
||||
/>
|
||||
</Show>
|
||||
<Show when={props.wrapper === 'author'}>
|
||||
<AuthorCard
|
||||
author={value as Author}
|
||||
compact={true}
|
||||
hasLink={true}
|
||||
truncateBio={true}
|
||||
/>
|
||||
</Show>
|
||||
<Show when={props.wrapper === 'article' && value?.slug}>
|
||||
<ArticleCard article={value as Shout} settings={{ noimage: true }} />
|
||||
</Show>
|
||||
<Show when={props.wrapper === 'top-article' && value?.slug}>
|
||||
<ArticleCard
|
||||
article={value as Shout}
|
||||
settings={{ noimage: true, noauthor: true, nodate: true, isShort: true }}
|
||||
/>
|
||||
</Show>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</div>
|
||||
</Show>
|
||||
<div class={clsx('col-md-8', styles.shoutCardContainer)}>
|
||||
<ArticleCard article={props.beside} settings={{ isBigTitle: true, isBeside: true }} />
|
||||
</div>
|
||||
</Show>
|
||||
<div class={clsx('col-md-8', styles.shoutCardContainer)}>
|
||||
<ArticleCard article={props.beside} settings={{ isBigTitle: true, isBeside: true }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,66 +14,68 @@ export default (props: GroupProps) => {
|
|||
return (
|
||||
<div class="floor floor--important floor--group">
|
||||
<Show when={props.articles.length > 4}>
|
||||
<div class="wide-container row">
|
||||
<div class="group__header col-12">{props.header}</div>
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<div class="group__header col-12">{props.header}</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<ArticleCard
|
||||
article={props.articles[0]}
|
||||
settings={{ nosubtitle: false, noicon: true, isFloorImportant: true, isBigTitle: true }}
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<ArticleCard
|
||||
article={props.articles[0]}
|
||||
settings={{ nosubtitle: false, noicon: true, isFloorImportant: true, isBigTitle: true }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="row">
|
||||
<Show when={props.articles.length < 4}>
|
||||
<For each={props.articles.slice(1, props.articles.length)}>
|
||||
{(a) => (
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="col-lg-6">
|
||||
<div class="row">
|
||||
<Show when={props.articles.length < 4}>
|
||||
<For each={props.articles.slice(1, props.articles.length)}>
|
||||
{(a) => (
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<ArticleCard
|
||||
article={a}
|
||||
settings={{ nosubtitle: false, noicon: true, isBigTitle: true }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
<Show when={props.articles.length >= 4}>
|
||||
<div class="col-md-6">
|
||||
<For each={props.articles.slice(1, 3)}>
|
||||
{(a) => (
|
||||
<ArticleCard
|
||||
article={a}
|
||||
settings={{ nosubtitle: false, noicon: true, isBigTitle: true }}
|
||||
settings={{
|
||||
noicon: true,
|
||||
noimage: true,
|
||||
isBigTitle: true,
|
||||
isCompact: true,
|
||||
isFloorImportant: true
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
<Show when={props.articles.length >= 4}>
|
||||
<div class="col-md-6">
|
||||
<For each={props.articles.slice(1, 3)}>
|
||||
{(a) => (
|
||||
<ArticleCard
|
||||
article={a}
|
||||
settings={{
|
||||
noicon: true,
|
||||
noimage: true,
|
||||
isBigTitle: true,
|
||||
isCompact: true,
|
||||
isFloorImportant: true
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<For each={props.articles.slice(3, 5)}>
|
||||
{(a) => (
|
||||
<ArticleCard
|
||||
article={a}
|
||||
settings={{
|
||||
noicon: true,
|
||||
noimage: true,
|
||||
isBigTitle: true,
|
||||
isCompact: true,
|
||||
isFloorImportant: true
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<For each={props.articles.slice(3, 5)}>
|
||||
{(a) => (
|
||||
<ArticleCard
|
||||
article={a}
|
||||
settings={{
|
||||
noicon: true,
|
||||
noimage: true,
|
||||
isBigTitle: true,
|
||||
isCompact: true,
|
||||
isFloorImportant: true
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,11 @@ import { ArticleCard } from './Card'
|
|||
export const Row1 = (props: { article: Shout }) => (
|
||||
<Show when={!!props.article}>
|
||||
<div class="floor floor--one-article">
|
||||
<div class="wide-container row">
|
||||
<div class="col-12">
|
||||
<ArticleCard article={props.article} settings={{ isSingle: true }} />
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<ArticleCard article={props.article} settings={{ isSingle: true }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,21 +15,26 @@ export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
|
|||
|
||||
return (
|
||||
<div class="floor">
|
||||
<div class="wide-container row">
|
||||
<For each={props.articles}>
|
||||
{(a, i) => {
|
||||
return (
|
||||
<Show when={!!a}>
|
||||
<div class={`col-md-${props.isEqual ? '6' : x[y()][i()]}`}>
|
||||
<ArticleCard
|
||||
article={a}
|
||||
settings={{ isWithCover: props.isEqual || x[y()][i()] === '8', nodate: props.isEqual }}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<For each={props.articles}>
|
||||
{(a, i) => {
|
||||
return (
|
||||
<Show when={!!a}>
|
||||
<div class={`col-md-${props.isEqual ? '6' : x[y()][i()]}`}>
|
||||
<ArticleCard
|
||||
article={a}
|
||||
settings={{
|
||||
isWithCover: props.isEqual || x[y()][i()] === '8',
|
||||
nodate: props.isEqual
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,15 +6,17 @@ import { ArticleCard } from './Card'
|
|||
export const Row3 = (props: { articles: Shout[]; header?: JSX.Element }) => {
|
||||
return (
|
||||
<div class="floor">
|
||||
<div class="wide-container row">
|
||||
<div class="floor-header">{props.header}</div>
|
||||
<For each={props.articles}>
|
||||
{(a) => (
|
||||
<div class="col-md-4">
|
||||
<ArticleCard article={a} />
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<div class="floor-header">{props.header}</div>
|
||||
<For each={props.articles}>
|
||||
{(a) => (
|
||||
<div class="col-md-4">
|
||||
<ArticleCard article={a} />
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -4,17 +4,19 @@ import { ArticleCard } from './Card'
|
|||
export const Row5 = (props: { articles: Shout[] }) => {
|
||||
return (
|
||||
<div class="floor floor--1">
|
||||
<div class="wide-container row">
|
||||
<div class="col-md-3">
|
||||
<ArticleCard article={props.articles[0]} />
|
||||
<ArticleCard article={props.articles[1]} settings={{ noimage: true, withBorder: true }} />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<ArticleCard article={props.articles[2]} settings={{ isBigTitle: true }} />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ArticleCard article={props.articles[3]} />
|
||||
<ArticleCard article={props.articles[4]} settings={{ noimage: true, withBorder: true }} />
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<ArticleCard article={props.articles[0]} />
|
||||
<ArticleCard article={props.articles[1]} settings={{ noimage: true, withBorder: true }} />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<ArticleCard article={props.articles[2]} settings={{ isBigTitle: true }} />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ArticleCard article={props.articles[3]} />
|
||||
<ArticleCard article={props.articles[4]} settings={{ noimage: true, withBorder: true }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,22 +4,24 @@ import { ArticleCard } from './Card'
|
|||
|
||||
export default (props: { articles: Shout[] }) => (
|
||||
<div class="floor floor--7">
|
||||
<div class="wide-container row">
|
||||
<For each={props.articles}>
|
||||
{(a) => (
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<ArticleCard
|
||||
article={a}
|
||||
settings={{
|
||||
additionalClass: 'shout-card--content-top',
|
||||
isWithCover: true,
|
||||
isBigTitle: true,
|
||||
isVertical: true
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<For each={props.articles}>
|
||||
{(a) => (
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<ArticleCard
|
||||
article={a}
|
||||
settings={{
|
||||
additionalClass: 'shout-card--content-top',
|
||||
isWithCover: true,
|
||||
isBigTitle: true,
|
||||
isVertical: true
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -61,34 +61,36 @@ export default (props: SliderProps) => {
|
|||
|
||||
return (
|
||||
<div class="floor floor--important">
|
||||
<div class="wide-container row">
|
||||
<h2 class="col-12">{props.title}</h2>
|
||||
<Show when={!!articles()}>
|
||||
<div class="swiper" classList={{ 'cards-with-cover': isCardsWithCover }} ref={el}>
|
||||
<div class="swiper-wrapper">
|
||||
<For each={articles()}>
|
||||
{(a: Shout) => (
|
||||
<ArticleCard
|
||||
article={a}
|
||||
settings={{
|
||||
additionalClass: 'swiper-slide',
|
||||
isFloorImportant: true,
|
||||
isWithCover: isCardsWithCover,
|
||||
nodate: true
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<h2 class="col-12">{props.title}</h2>
|
||||
<Show when={!!articles()}>
|
||||
<div class="swiper" classList={{ 'cards-with-cover': isCardsWithCover }} ref={el}>
|
||||
<div class="swiper-wrapper">
|
||||
<For each={articles()}>
|
||||
{(a: Shout) => (
|
||||
<ArticleCard
|
||||
article={a}
|
||||
settings={{
|
||||
additionalClass: 'swiper-slide',
|
||||
isFloorImportant: true,
|
||||
isWithCover: isCardsWithCover,
|
||||
nodate: true
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<div class="slider-arrow-next" ref={nextEl} onClick={() => swiper()?.slideNext()}>
|
||||
<Icon name="slider-arrow" class={'icon'} />
|
||||
</div>
|
||||
<div class="slider-arrow-prev" ref={prevEl} onClick={() => swiper()?.slidePrev()}>
|
||||
<Icon name="slider-arrow" class={'icon'} />
|
||||
</div>
|
||||
<div class="slider-pagination" ref={pagEl} />
|
||||
</div>
|
||||
<div class="slider-arrow-next" ref={nextEl} onClick={() => swiper()?.slideNext()}>
|
||||
<Icon name="slider-arrow" class={'icon'} />
|
||||
</div>
|
||||
<div class="slider-arrow-prev" ref={prevEl} onClick={() => swiper()?.slidePrev()}>
|
||||
<Icon name="slider-arrow" class={'icon'} />
|
||||
</div>
|
||||
<div class="slider-pagination" ref={pagEl} />
|
||||
</div>
|
||||
</Show>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ export const AllAuthorsView = (props: Props) => {
|
|||
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-4')}>
|
||||
<div class="topic-title">
|
||||
<a href={`/author/${author.slug}`}>{author.name}</a>
|
||||
<sup>{author.stat.shouts}</sup>
|
||||
<span class={styles.articlesCounter}>{author.stat.shouts}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -165,53 +165,51 @@ export const AllAuthorsView = (props: Props) => {
|
|||
</For>
|
||||
</Show>
|
||||
|
||||
<div class={styles.stats}>
|
||||
<Show when={searchResults().length > 0}>
|
||||
<For each={searchResults().slice(0, limit())}>
|
||||
{(author) => (
|
||||
<AuthorCard
|
||||
author={author}
|
||||
compact={false}
|
||||
hasLink={true}
|
||||
subscribed={subscribed(author.slug)}
|
||||
noSocialButtons={true}
|
||||
isAuthorsList={true}
|
||||
truncateBio={true}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
<Show when={searchResults().length > 0}>
|
||||
<For each={searchResults().slice(0, limit())}>
|
||||
{(author) => (
|
||||
<AuthorCard
|
||||
author={author}
|
||||
compact={false}
|
||||
hasLink={true}
|
||||
subscribed={subscribed(author.slug)}
|
||||
noSocialButtons={true}
|
||||
isAuthorsList={true}
|
||||
truncateBio={true}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
|
||||
<Show when={searchParams().by && searchParams().by !== 'name'}>
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-xl-9">
|
||||
<For each={sortedAuthors().slice(0, limit())}>
|
||||
{(author) => (
|
||||
<AuthorCard
|
||||
author={author}
|
||||
compact={false}
|
||||
hasLink={true}
|
||||
subscribed={subscribed(author.slug)}
|
||||
noSocialButtons={true}
|
||||
isAuthorsList={true}
|
||||
truncateBio={true}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<Show when={searchParams().by && searchParams().by !== 'name'}>
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-xl-9">
|
||||
<For each={sortedAuthors().slice(0, limit())}>
|
||||
{(author) => (
|
||||
<AuthorCard
|
||||
author={author}
|
||||
compact={false}
|
||||
hasLink={true}
|
||||
subscribed={subscribed(author.slug)}
|
||||
noSocialButtons={true}
|
||||
isAuthorsList={true}
|
||||
truncateBio={true}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<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('Load more')}
|
||||
</button>
|
||||
</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('Load more')}
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -92,24 +92,26 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
|
|||
}
|
||||
|
||||
const AllTopicsHead = () => (
|
||||
<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="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>
|
||||
|
||||
<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 title')}</a>
|
||||
</li>
|
||||
<li class="view-switcher__search">
|
||||
<SearchField onChange={searchTopics} />
|
||||
</li>
|
||||
</ul>
|
||||
<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 title')}</a>
|
||||
</li>
|
||||
<li class="view-switcher__search">
|
||||
<SearchField onChange={searchTopics} />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -550,10 +550,6 @@ figcaption {
|
|||
margin-bottom: 6.4rem;
|
||||
}
|
||||
|
||||
.wide-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-left: $container-padding-x;
|
||||
padding-right: $container-padding-x;
|
||||
|
|
@ -617,14 +613,14 @@ figcaption {
|
|||
}
|
||||
}
|
||||
|
||||
.row > * {
|
||||
.row {
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-left: divide($container-padding-x, 2);
|
||||
padding-right: divide($container-padding-x, 2);
|
||||
margin-left: divide(-$container-padding-x, 2);
|
||||
margin-right: divide(-$container-padding-x, 2);
|
||||
|
||||
> .row {
|
||||
margin-left: divide(-$container-padding-x, 2);
|
||||
margin-right: divide(-$container-padding-x, 2);
|
||||
> * {
|
||||
padding-left: divide($container-padding-x, 2);
|
||||
padding-right: divide($container-padding-x, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -789,6 +785,7 @@ details {
|
|||
.text-truncate {
|
||||
display: -webkit-box !important;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user