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

Fixed topics page style

Browse Source
This commit is contained in:
kvakazyambra 2022-11-15 00:17:20 +03:00
parent 59c2283b39
commit 50dfab4254
5 changed files with 24 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Topic/Card.tsx
View File

@ -50,7 +50,7 @@ export const TopicCard = (props: TopicProps) => {
[styles.topicInRow]: props.isTopicInRow
}}
>
<div classList={{ 'col-md-9 col-lg-7': !props.compact && !props.subscribeButtonBottom }}>
<div classList={{ 'col-md-9 col-lg-7 col-xl-6': !props.compact && !props.subscribeButtonBottom }}>
<Show when={props.topic.title}>
<h3 class={styles.topicTitle}>
<a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>

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

@ -111,10 +111,12 @@ export const AllAuthorsView = (props: Props) => {
)}
</For>
<Show when={sortedAuthors().length > limit()}>
<div class={styles.loadMoreContainer}>
<button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
{t('More')}
</button>
<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>

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

@ -63,15 +63,11 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
<Show when={sortedTopics().length > 0}>
<div class="shift-content">
<div class="row">
<div class={clsx(styles.pageHeader, 'col-lg-9')}>
<div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
<h1>{t('Topics')}</h1>
<div class="col-lg-10">
<p>{t('Subscribe what you like to tune your personal feed')}</p>
</div>
</div>
<p>{t('Subscribe what you like to tune your personal feed')}</p>
<div class="col-12">
<ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}>
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
<a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
{t('By shouts')}
@ -114,10 +110,12 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
)}
</For>
<Show when={sortedTopics().length > limit()}>
<div class={styles.loadMoreContainer}>
<button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
{t('More')}
</button>
<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>
</>

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

@ -41,6 +41,11 @@
text-align: center;
.loadMoreButton {
padding: 0.6em 1.5em;
padding: 0.6em 5em;
width: 100%;
@include media-breakpoint-up(sm) {
width: auto;
}
}
}

12
src/styles/app.scss
View File

@ -471,15 +471,9 @@ figcaption {
flex-wrap: wrap;
font-weight: bold;
list-style: none;
margin: 2.4rem 0 0;
margin: 3.6rem 0 0;
padding: 0;
.all-topics-page & {
@include media-breakpoint-down(sm) {
margin-left: 1.3rem;
}
}
li {
display: inline-block;
margin-right: 1em;
@ -628,12 +622,10 @@ figcaption {
padding-left: divide($container-padding-x, 2);
padding-right: divide($container-padding-x, 2);
/*
.row {
> .row {
margin-left: divide(-$container-padding-x, 2);
margin-right: divide(-$container-padding-x, 2);
}
*/
}
}