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

Minor layout fixes

Browse Source
This commit is contained in:
kvakazyambra 2022-11-11 13:22:07 +03:00
parent 8ffa30f1be
commit 613617da0b
4 changed files with 135 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Topic/Card.module.scss
View File

@ -3,10 +3,6 @@
margin-top: 3.2rem; margin-top: 3.2rem;
.stats & { .stats & {
@include media-breakpoint-down(sm) {
margin-left: 0;
}
.topicDetailsItem { .topicDetailsItem {
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
} }

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

@ -57,82 +57,80 @@ export const AllAuthorsView = (props: Props) => {
// log.debug(getSearchParams()) // log.debug(getSearchParams())
return ( return (
<div class={styles.allTopicsPage}> <div class={clsx(styles.allTopicsPage, 'container')}>
<Show when={sortedAuthors().length > 0}> <Show when={sortedAuthors().length > 0}>
<div class="wide-container"> <div class="shift-content">
<div class="shift-content container"> <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-8')}> <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>
<div class="row"> </div>
<div class="col-lg-10 col-xl-8"> <div class="row">
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}> <div class="col-lg-10 col-xl-8">
<li classList={{ selected: searchParams().by === 'shouts' }}> <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}> <li classList={{ selected: searchParams().by === 'shouts' }}>
{t('By shouts')} <a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}>
</a> {t('By shouts')}
</li> </a>
<li classList={{ selected: searchParams().by === 'rating' }}> </li>
<a href="/authors?by=rating" onClick={handleClientRouteLinkClick}> <li classList={{ selected: searchParams().by === 'rating' }}>
{t('By rating')} <a href="/authors?by=rating" onClick={handleClientRouteLinkClick}>
</a> {t('By rating')}
</li> </a>
<li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}> </li>
<a href="/authors" onClick={handleClientRouteLinkClick}> <li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}>
{t('By alphabet')} <a href="/authors" onClick={handleClientRouteLinkClick}>
</a> {t('By alphabet')}
</li> </a>
<li class="view-switcher__search"> </li>
<a href="/authors/search"> <li class="view-switcher__search">
<Icon name="search" /> <a href="/authors/search">
{t('Search author')} <Icon name="search" />
</a> {t('Search author')}
</li> </a>
</ul> </li>
<Show </ul>
when={!searchParams().by || searchParams().by === 'name'} <Show
fallback={() => ( when={!searchParams().by || searchParams().by === 'name'}
<div class={styles.stats}> fallback={() => (
<For each={sortedAuthors()}> <div class={styles.stats}>
{(author) => ( <For each={sortedAuthors()}>
<AuthorCard {(author) => (
author={author} <AuthorCard
compact={false} author={author}
hasLink={true} compact={false}
subscribed={subscribed(author.slug)} hasLink={true}
noSocialButtons={true} subscribed={subscribed(author.slug)}
isAuthorsList={true} noSocialButtons={true}
/> isAuthorsList={true}
)} />
</For> )}
</div> </For>
)} </div>
> )}
<For each={sortedKeys()}> >
{(letter) => ( <For each={sortedKeys()}>
<div class={clsx(styles.group, 'group')}> {(letter) => (
<h2>{letter}</h2> <div class={clsx(styles.group, 'group')}>
<div class="container"> <h2>{letter}</h2>
<div class="row"> <div class="container">
<For each={byLetter()[letter]}> <div class="row">
{(author: Author) => ( <For each={byLetter()[letter]}>
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}> {(author: Author) => (
<div class="topic-title"> <div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
<a href={`/author/${author.slug}`}>{author.name}</a> <div class="topic-title">
</div> <a href={`/author/${author.slug}`}>{author.name}</a>
</div> </div>
)} </div>
</For> )}
</div> </For>
</div> </div>
</div> </div>
)} </div>
</For> )}
</Show> </For>
</div> </Show>
</div> </div>
</div> </div>
</div> </div>

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

@ -54,90 +54,80 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
const subscribed = (s) => Boolean(session()?.news?.topics && session()?.news?.topics?.includes(s || '')) const subscribed = (s) => Boolean(session()?.news?.topics && session()?.news?.topics?.includes(s || ''))
return ( return (
<div class={styles.allTopicsPage}> <div class={clsx(styles.allTopicsPage, 'container')}>
<Show when={sortedTopics().length > 0}> <Show when={sortedTopics().length > 0}>
<div class="wide-container"> <div class="shift-content">
<div class="shift-content"> <div class="row">
<div class="row"> <div class={clsx(styles.pageHeader, 'col-lg-9')}>
<div class={clsx(styles.pageHeader, 'col-lg-9')}> <h1>{t('Topics')}</h1>
<h1>{t('Topics')}</h1> <div class="col-lg-10">
<div class="col-lg-10"> <p>{t('Subscribe what you like to tune your personal feed')}</p>
<p>{t('Subscribe what you like to tune your personal feed')}</p>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="col-12">
<div class="col"> <ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}>
<div class="row"> <li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
<ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}> <a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
<li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}> {t('By shouts')}
<a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}> </a>
{t('By shouts')} </li>
</a> <li classList={{ selected: searchParams().by === 'authors' }}>
</li> <a href="/topics?by=authors" onClick={handleClientRouteLinkClick}>
<li classList={{ selected: searchParams().by === 'authors' }}> {t('By authors')}
<a href="/topics?by=authors" onClick={handleClientRouteLinkClick}> </a>
{t('By authors')} </li>
</a> <li classList={{ selected: searchParams().by === 'title' }}>
</li> <a
<li classList={{ selected: searchParams().by === 'title' }}> href="/topics?by=title"
<a onClick={(ev) => {
href="/topics?by=title" // just an example
onClick={(ev) => { ev.preventDefault()
// just an example changeSearchParam('by', 'title')
ev.preventDefault() }}
changeSearchParam('by', 'title') >
}} {t('By alphabet')}
> </a>
{t('By alphabet')} </li>
</a> <li class="view-switcher__search">
</li> <a href="/topic/search">
<li class="view-switcher__search"> <Icon name="search" />
<a href="/topic/search"> {t('Search topic')}
<Icon name="search" /> </a>
{t('Search topic')} </li>
</a> </ul>
</li> </div>
</ul> </div>
</div>
<Show <Show
when={searchParams().by === 'title'} when={searchParams().by === 'title'}
fallback={() => ( fallback={() => (
<div class={cardStyles.stats}> <For each={sortedTopics()}>
<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) => ( {(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> </For>
</div> </div>
)} </div>
> </div>
<For each={sortedKeys()}> )}
{(letter) => ( </For>
<div class={clsx(styles.group, 'group')}> </Show>
<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>
</Show> </Show>
</div> </div>

3
src/styles/app.scss
View File

@ -660,11 +660,10 @@ astro-island {
.container { .container {
max-width: 1400px; max-width: 1400px;
padding: 0;
width: auto; width: auto;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
padding: 0 $container-padding-x * 0.5; //padding: 0 $container-padding-x * 0.5;
} }
} }