Minor layout fixes
This commit is contained in:
parent
8ffa30f1be
commit
613617da0b
|
|
@ -3,10 +3,6 @@
|
|||
margin-top: 3.2rem;
|
||||
|
||||
.stats & {
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.topicDetailsItem {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,82 +57,80 @@ export const AllAuthorsView = (props: Props) => {
|
|||
// log.debug(getSearchParams())
|
||||
|
||||
return (
|
||||
<div class={styles.allTopicsPage}>
|
||||
<div class={clsx(styles.allTopicsPage, 'container')}>
|
||||
<Show when={sortedAuthors().length > 0}>
|
||||
<div class="wide-container">
|
||||
<div class="shift-content container">
|
||||
<div class="row">
|
||||
<div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-8')}>
|
||||
<h1>{t('Authors')}</h1>
|
||||
<p>{t('Subscribe who you like to tune your personal feed')}</p>
|
||||
</div>
|
||||
<div class="shift-content">
|
||||
<div class="row">
|
||||
<div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-8')}>
|
||||
<h1>{t('Authors')}</h1>
|
||||
<p>{t('Subscribe who you like to tune your personal feed')}</p>
|
||||
</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}>
|
||||
{t('By shouts')}
|
||||
</a>
|
||||
</li>
|
||||
<li classList={{ selected: searchParams().by === 'rating' }}>
|
||||
<a href="/authors?by=rating" onClick={handleClientRouteLinkClick}>
|
||||
{t('By rating')}
|
||||
</a>
|
||||
</li>
|
||||
<li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}>
|
||||
<a href="/authors" onClick={handleClientRouteLinkClick}>
|
||||
{t('By alphabet')}
|
||||
</a>
|
||||
</li>
|
||||
<li class="view-switcher__search">
|
||||
<a href="/authors/search">
|
||||
<Icon name="search" />
|
||||
{t('Search author')}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<Show
|
||||
when={!searchParams().by || searchParams().by === 'name'}
|
||||
fallback={() => (
|
||||
<div class={styles.stats}>
|
||||
<For each={sortedAuthors()}>
|
||||
{(author) => (
|
||||
<AuthorCard
|
||||
author={author}
|
||||
compact={false}
|
||||
hasLink={true}
|
||||
subscribed={subscribed(author.slug)}
|
||||
noSocialButtons={true}
|
||||
isAuthorsList={true}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<For each={sortedKeys()}>
|
||||
{(letter) => (
|
||||
<div class={clsx(styles.group, 'group')}>
|
||||
<h2>{letter}</h2>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<For each={byLetter()[letter]}>
|
||||
{(author: Author) => (
|
||||
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
|
||||
<div class="topic-title">
|
||||
<a href={`/author/${author.slug}`}>{author.name}</a>
|
||||
</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}>
|
||||
{t('By shouts')}
|
||||
</a>
|
||||
</li>
|
||||
<li classList={{ selected: searchParams().by === 'rating' }}>
|
||||
<a href="/authors?by=rating" onClick={handleClientRouteLinkClick}>
|
||||
{t('By rating')}
|
||||
</a>
|
||||
</li>
|
||||
<li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}>
|
||||
<a href="/authors" onClick={handleClientRouteLinkClick}>
|
||||
{t('By alphabet')}
|
||||
</a>
|
||||
</li>
|
||||
<li class="view-switcher__search">
|
||||
<a href="/authors/search">
|
||||
<Icon name="search" />
|
||||
{t('Search author')}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<Show
|
||||
when={!searchParams().by || searchParams().by === 'name'}
|
||||
fallback={() => (
|
||||
<div class={styles.stats}>
|
||||
<For each={sortedAuthors()}>
|
||||
{(author) => (
|
||||
<AuthorCard
|
||||
author={author}
|
||||
compact={false}
|
||||
hasLink={true}
|
||||
subscribed={subscribed(author.slug)}
|
||||
noSocialButtons={true}
|
||||
isAuthorsList={true}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<For each={sortedKeys()}>
|
||||
{(letter) => (
|
||||
<div class={clsx(styles.group, 'group')}>
|
||||
<h2>{letter}</h2>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<For each={byLetter()[letter]}>
|
||||
{(author: Author) => (
|
||||
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
|
||||
<div class="topic-title">
|
||||
<a href={`/author/${author.slug}`}>{author.name}</a>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,90 +54,80 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
|
|||
const subscribed = (s) => Boolean(session()?.news?.topics && session()?.news?.topics?.includes(s || ''))
|
||||
|
||||
return (
|
||||
<div class={styles.allTopicsPage}>
|
||||
<div class={clsx(styles.allTopicsPage, 'container')}>
|
||||
<Show when={sortedTopics().length > 0}>
|
||||
<div class="wide-container">
|
||||
<div class="shift-content">
|
||||
<div class="row">
|
||||
<div class={clsx(styles.pageHeader, 'col-lg-9')}>
|
||||
<h1>{t('Topics')}</h1>
|
||||
<div class="col-lg-10">
|
||||
<p>{t('Subscribe what you like to tune your personal feed')}</p>
|
||||
</div>
|
||||
<div class="shift-content">
|
||||
<div class="row">
|
||||
<div class={clsx(styles.pageHeader, 'col-lg-9')}>
|
||||
<h1>{t('Topics')}</h1>
|
||||
<div class="col-lg-10">
|
||||
<p>{t('Subscribe what you like to tune your personal feed')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}>
|
||||
<li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
|
||||
<a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
|
||||
{t('By shouts')}
|
||||
</a>
|
||||
</li>
|
||||
<li classList={{ selected: searchParams().by === 'authors' }}>
|
||||
<a href="/topics?by=authors" onClick={handleClientRouteLinkClick}>
|
||||
{t('By authors')}
|
||||
</a>
|
||||
</li>
|
||||
<li classList={{ selected: searchParams().by === 'title' }}>
|
||||
<a
|
||||
href="/topics?by=title"
|
||||
onClick={(ev) => {
|
||||
// just an example
|
||||
ev.preventDefault()
|
||||
changeSearchParam('by', 'title')
|
||||
}}
|
||||
>
|
||||
{t('By alphabet')}
|
||||
</a>
|
||||
</li>
|
||||
<li class="view-switcher__search">
|
||||
<a href="/topic/search">
|
||||
<Icon name="search" />
|
||||
{t('Search topic')}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}>
|
||||
<li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
|
||||
<a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
|
||||
{t('By shouts')}
|
||||
</a>
|
||||
</li>
|
||||
<li classList={{ selected: searchParams().by === 'authors' }}>
|
||||
<a href="/topics?by=authors" onClick={handleClientRouteLinkClick}>
|
||||
{t('By authors')}
|
||||
</a>
|
||||
</li>
|
||||
<li classList={{ selected: searchParams().by === 'title' }}>
|
||||
<a
|
||||
href="/topics?by=title"
|
||||
onClick={(ev) => {
|
||||
// just an example
|
||||
ev.preventDefault()
|
||||
changeSearchParam('by', 'title')
|
||||
}}
|
||||
>
|
||||
{t('By alphabet')}
|
||||
</a>
|
||||
</li>
|
||||
<li class="view-switcher__search">
|
||||
<a href="/topic/search">
|
||||
<Icon name="search" />
|
||||
{t('Search topic')}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show
|
||||
when={searchParams().by === 'title'}
|
||||
fallback={() => (
|
||||
<div class={cardStyles.stats}>
|
||||
<For each={sortedTopics()}>
|
||||
<Show
|
||||
when={searchParams().by === 'title'}
|
||||
fallback={() => (
|
||||
<For each={sortedTopics()}>
|
||||
{(topic) => <TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} />}
|
||||
</For>
|
||||
)}
|
||||
>
|
||||
<For each={sortedKeys()}>
|
||||
{(letter) => (
|
||||
<div class={clsx(styles.group, 'group')}>
|
||||
<h2>{letter}</h2>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<For each={byLetter()[letter]}>
|
||||
{(topic) => (
|
||||
<TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} />
|
||||
<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>
|
||||
)}
|
||||
>
|
||||
<For each={sortedKeys()}>
|
||||
{(letter) => (
|
||||
<div class={clsx(styles.group, 'group')}>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -660,11 +660,10 @@ astro-island {
|
|||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding: 0 $container-padding-x * 0.5;
|
||||
//padding: 0 $container-padding-x * 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user