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 [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}> <Show when={props.topic.title}>
<h3 class={styles.topicTitle}> <h3 class={styles.topicTitle}>
<a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a> <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>

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

@ -111,11 +111,13 @@ export const AllAuthorsView = (props: Props) => {
)} )}
</For> </For>
<Show when={sortedAuthors().length > limit()}> <Show when={sortedAuthors().length > limit()}>
<div class={styles.loadMoreContainer}> <div class="row">
<div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
<button class={clsx('button', styles.loadMoreButton)} onClick={showMore}> <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
{t('More')} {t('More')}
</button> </button>
</div> </div>
</div>
</Show> </Show>
</div> </div>
)} )}

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

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

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

@ -41,6 +41,11 @@
text-align: center; text-align: center;
.loadMoreButton { .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; flex-wrap: wrap;
font-weight: bold; font-weight: bold;
list-style: none; list-style: none;
margin: 2.4rem 0 0; margin: 3.6rem 0 0;
padding: 0; padding: 0;
.all-topics-page & {
@include media-breakpoint-down(sm) {
margin-left: 1.3rem;
}
}
li { li {
display: inline-block; display: inline-block;
margin-right: 1em; margin-right: 1em;
@ -628,12 +622,10 @@ figcaption {
padding-left: divide($container-padding-x, 2); padding-left: divide($container-padding-x, 2);
padding-right: divide($container-padding-x, 2); padding-right: divide($container-padding-x, 2);
/* > .row {
.row {
margin-left: divide(-$container-padding-x, 2); margin-left: divide(-$container-padding-x, 2);
margin-right: divide(-$container-padding-x, 2); margin-right: divide(-$container-padding-x, 2);
} }
*/
} }
} }