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

New grid

Browse Source
This commit is contained in:
kvakazyambra 2023-03-10 17:42:48 +00:00 committed by Igor
parent 9e69f280cf
commit 251df4b2c0
51 changed files with 423 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Article/CommentsTree.tsx
View File

@ -162,11 +162,11 @@ export const CommentsTree = (props: Props) => {
<ShowIfAuthenticated
fallback={
<div class={styles.signInMessage} id="comments">
{t('To write a comment, you must')}&nbsp;
{t('To write a comment, you must')}{' '}
<a href="?modal=auth&mode=register" class={styles.link}>
{t('sign up')}
</a>
&nbsp;{t('or')}&nbsp;
</a>{' '}
{t('or')}&nbsp;
<a href="?modal=auth&mode=login" class={styles.link}>
{t('sign in')}
</a>

264
src/components/Article/FullArticle.tsx
View File

@ -117,60 +117,62 @@ export const FullArticle = (props: ArticleProps) => {
<>
<Title>{props.article.title}</Title>
<div class="shout wide-container">
<article class="col-md-6 shift-content">
<div class={styles.shoutHeader}>
<div class={styles.shoutTopic}>
<a
href={getPagePath(router, 'topic', { slug: props.article.mainTopic })}
class={styles.mainTopicLink}
>
{mainTopic().title}
</a>
</div>
<div class="row">
<article class="col-md-16 col-lg-14 col-xl-12 offset-md-5">
<div class={styles.shoutHeader}>
<div class={styles.shoutTopic}>
<a
href={getPagePath(router, 'topic', { slug: props.article.mainTopic })}
class={styles.mainTopicLink}
>
{mainTopic().title}
</a>
</div>
<h1>{props.article.title}</h1>
<Show when={props.article.subtitle}>
<h4>{capitalize(props.article.subtitle, false)}</h4>
</Show>
<div class={styles.shoutAuthor}>
<For each={props.article.authors}>
{(a: Author, index) => (
<>
<Show when={index() > 0}>, </Show>
<a href={getPagePath(router, 'author', { slug: a.slug })}>{a.name}</a>
</>
)}
</For>
</div>
<div
class={styles.shoutCover}
style={{ 'background-image': `url('${props.article.cover}')` }}
/>
</div>
<Show when={media() && props.article.layout !== 'image'}>
<div class="media-items">
<For each={media() || []}>
{(m: MediaItem) => (
<div class={styles.shoutMediaBody}>
<MediaView media={m} kind={props.article.layout} />
<Show when={m?.body}>
<div innerHTML={m.body} />
</Show>
</div>
)}
</For>
</div>
</Show>
<Show when={body()}>
<div class={styles.shoutBody}>
<Show when={!body().startsWith('<')} fallback={<div innerHTML={body()} />}>
<MD body={body()} />
<h1>{props.article.title}</h1>
<Show when={props.article.subtitle}>
<h4>{capitalize(props.article.subtitle, false)}</h4>
</Show>
<div class={styles.shoutAuthor}>
<For each={props.article.authors}>
{(a: Author, index) => (
<>
<Show when={index() > 0}>, </Show>
<a href={getPagePath(router, 'author', { slug: a.slug })}>{a.name}</a>
</>
)}
</For>
</div>
<div
class={styles.shoutCover}
style={{ 'background-image': `url('${props.article.cover}')` }}
/>
</div>
</Show>
</article>
<Show when={media() && props.article.layout !== 'image'}>
<div class="media-items">
<For each={media() || []}>
{(m: MediaItem) => (
<div class={styles.shoutMediaBody}>
<MediaView media={m} kind={props.article.layout} />
<Show when={m?.body}>
<div innerHTML={m.body} />
</Show>
</div>
)}
</For>
</div>
</Show>
<Show when={body()}>
<div class={styles.shoutBody}>
<Show when={!body().startsWith('<')} fallback={<div innerHTML={body()} />}>
<MD body={body()} />
</Show>
</div>
</Show>
</article>
</div>
</div>
<Show when={media() && props.article.layout === 'image'}>
@ -190,91 +192,93 @@ export const FullArticle = (props: ArticleProps) => {
</Show>
<div class="shout wide-container">
<div class="col-md-8 shift-content">
<div class={styles.shoutStats}>
<div class={styles.shoutStatsItem}>
<ShoutRatingControl shout={props.article} class={styles.ratingControl} />
</div>
<Show when={props.article.stat?.viewed}>
<div class={clsx(styles.shoutStatsItem)}>
<Icon name="eye" class={clsx(styles.icon, styles.iconEye)} />
{props.article.stat?.viewed}
</div>
</Show>
<div class={styles.shoutStatsItem} onClick={() => scrollToComments()}>
<Icon name="comment" class={styles.icon} />
{/*{props.article.stat?.commented || ''}*/}
</div>
<div class={styles.shoutStatsItem}>
<SharePopup
title={props.article.title}
description={getDescription(props.article.body)}
imageUrl={props.article.cover}
containerCssClass={stylesHeader.control}
trigger={<Icon name="share-outline" class={styles.icon} />}
/>
</div>
<div class={styles.shoutStatsItem} onClick={bookmark}>
<Icon name="bookmark" class={styles.icon} />
</div>
<Show when={canEdit()}>
<div class="row">
<div class="col-md-16 offset-md-5">
<div class={styles.shoutStats}>
<div class={styles.shoutStatsItem}>
<a href="/edit">
<Icon name="edit" />
{t('Edit')}
</a>
<ShoutRatingControl shout={props.article} class={styles.ratingControl} />
</div>
</Show>
<div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalData)}>
<div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
{formattedDate()}
<Show when={props.article.stat?.viewed}>
<div class={clsx(styles.shoutStatsItem)}>
<Icon name="eye" class={clsx(styles.icon, styles.iconEye)} />
{props.article.stat?.viewed}
</div>
</Show>
<div class={styles.shoutStatsItem} onClick={() => scrollToComments()}>
<Icon name="comment" class={styles.icon} />
{/*{props.article.stat?.commented || ''}*/}
</div>
<div class={styles.shoutStatsItem}>
<SharePopup
title={props.article.title}
description={getDescription(props.article.body)}
imageUrl={props.article.cover}
containerCssClass={stylesHeader.control}
trigger={<Icon name="share-outline" class={styles.icon} />}
/>
</div>
<div class={styles.shoutStatsItem} onClick={bookmark}>
<Icon name="bookmark" class={styles.icon} />
</div>
<Show when={canEdit()}>
<div class={styles.shoutStatsItem}>
<a href="/edit">
<Icon name="edit" />
{t('Edit')}
</a>
</div>
</Show>
<div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalData)}>
<div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
{formattedDate()}
</div>
</div>
</div>
</div>
<div class={styles.help}>
<Show when={isAuthenticated()}>
<button class="button">{t('Cooperate')}</button>
</Show>
<Show when={canEdit()}>
<button class="button button--light">{t('Invite to collab')}</button>
</Show>
</div>
<div class={styles.help}>
<Show when={isAuthenticated()}>
<button class="button">{t('Cooperate')}</button>
</Show>
<Show when={canEdit()}>
<button class="button button--light">{t('Invite to collab')}</button>
</Show>
</div>
<div class={styles.topicsList}>
<For each={props.article.topics}>
{(topic) => (
<div class={styles.shoutTopic}>
<a href={getPagePath(router, 'topic', { slug: topic.slug })}>{topic.title}</a>
</div>
)}
</For>
</div>
<div class={styles.topicsList}>
<For each={props.article.topics}>
{(topic) => (
<div class={styles.shoutTopic}>
<a href={getPagePath(router, 'topic', { slug: topic.slug })}>{topic.title}</a>
</div>
)}
</For>
</div>
<div class={styles.shoutAuthorsList}>
<Show when={props.article.authors.length > 1}>
<h4>{t('Authors')}</h4>
</Show>
<For each={props.article.authors}>
{(a) => (
<div class="col-xl-6">
<AuthorCard author={a} compact={false} hasLink={true} liteButtons={true} />
</div>
)}
</For>
</div>
<div ref={commentsRef}>
<Show when={isReactionsLoaded()}>
<CommentsTree
shoutId={props.article.id}
shoutSlug={props.article.slug}
commentAuthors={props.article.authors}
/>
</Show>
<div class={styles.shoutAuthorsList}>
<Show when={props.article.authors.length > 1}>
<h4>{t('Authors')}</h4>
</Show>
<For each={props.article.authors}>
{(a) => (
<div class="col-xl-12">
<AuthorCard author={a} compact={false} hasLink={true} liteButtons={true} />
</div>
)}
</For>
</div>
<div ref={commentsRef}>
<Show when={isReactionsLoaded()}>
<CommentsTree
shoutId={props.article.id}
shoutSlug={props.article.slug}
commentAuthors={props.article.authors}
/>
</Show>
</div>
</div>
</div>
</div>

2
src/components/Author/Full.tsx
View File

@ -5,7 +5,7 @@ import './Full.scss'
export const AuthorFull = (props: { author: Author }) => {
return (
<div class="row">
<div class="col-md-9 col-lg-8 user-details">
<div class="col-md-18 col-lg-16 user-details">
<AuthorCard author={props.author} compact={false} isAuthorPage={true} />
</div>
</div>

4
src/components/Discours/Banner.tsx
View File

@ -10,7 +10,7 @@ export default () => {
<div class={styles.discoursBanner}>
<div class="wide-container">
<div class="row">
<div class={clsx(styles.discoursBannerContent, 'col-lg-5')}>
<div class={clsx(styles.discoursBannerContent, 'col-lg-10')}>
<h3>{t('Discours is created with our common effort')}</h3>
<p>
<a href="/about/help">{t('Support us')}</a>
@ -20,7 +20,7 @@ export default () => {
</a>
</p>
</div>
<div class={clsx(styles.discoursBannerImage, 'col-lg-6 offset-lg-1')}>
<div class={clsx(styles.discoursBannerImage, 'col-lg-12 offset-lg-2')}>
<img src="/discours-banner.jpg" alt={t('Discours')} />
</div>
</div>

8
src/components/Discours/Footer.tsx
View File

@ -116,7 +116,7 @@ export const Footer = () => {
<div class="row">
<For each={links()}>
{({ header, items }) => (
<div class="col-sm-4 col-md-3">
<div class="col-sm-8 col-md-6">
<h5>{t(header)}</h5>
<ul>
<For each={items}>
@ -133,7 +133,7 @@ export const Footer = () => {
</div>
)}
</For>
<div class="col-md-3">
<div class="col-md-6">
<h5>{t('Subscription')}</h5>
<p>{t('Join our maillist')}</p>
<Subscribe />
@ -141,14 +141,14 @@ export const Footer = () => {
</div>
<div class={clsx(styles.footerCopyright, 'row')}>
<div class="col-md-9 col-lg-10">
<div class="col-md-18 col-lg-20">
{t(
'Independant magazine with an open horizontal cooperation about culture, science and society'
)}
. {t('Discours')} &copy; 2015&ndash;{new Date().getFullYear()}{' '}
<a href="/about/terms-of-use">{t('Terms of use')}</a>
</div>
<div class={clsx(styles.footerCopyrightSocial, 'col-md-3 col-lg-2')}>
<div class={clsx(styles.footerCopyrightSocial, 'col-md-6 col-lg-4')}>
<For each={SOCIAL}>
{(social) => (
<div class={clsx(styles.socialItem, styles[`socialItem${social.name}`])}>

2
src/components/Discours/Hero.tsx
View File

@ -9,7 +9,7 @@ export default () => {
<div class="about-discours">
<div class="wide-container">
<div class="row">
<div class="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div class="col-lg-20 offset-lg-2 col-xl-16 offset-xl-4">
<h4>{t('Horizontal collaborative journalistic platform')}</h4>
<p>
{t(

4
src/components/Feed/Beside.tsx
View File

@ -32,7 +32,7 @@ export const Beside = (props: BesideProps) => {
<div class="wide-container">
<div class="row">
<Show when={!!props.values}>
<div class="col-md-4">
<div class="col-md-8">
<Show when={!!props.title}>
<div class={styles.besideColumnTitle}>
<h4>{props.title}</h4>
@ -92,7 +92,7 @@ export const Beside = (props: BesideProps) => {
</ul>
</div>
</Show>
<div class={clsx('col-md-8', styles.shoutCardContainer)}>
<div class={clsx('col-md-16', styles.shoutCardContainer)}>
<ArticleCard
article={props.beside}
settings={{ isBigTitle: true, isBeside: true, nodate: props.nodate }}

12
src/components/Feed/Card.module.scss
View File

@ -241,7 +241,7 @@
}
}
.col-md-6 .col-md-6 {
.col-md-12 .col-md-12 {
.shoutCard {
border-bottom: 1px solid rgb(255 255 255 / 20%);
margin: 3.6rem 0 0;
@ -495,7 +495,7 @@
margin: 0;
padding: 0 0 20%;
@include media-breakpoint-up(md) {
@include media-breakpoint-up(xl) {
aspect-ratio: 1 / 1.6;
padding: 0;
}
@ -681,9 +681,11 @@
flex: 1;
}
.shoutCardCover {
height: 100%;
padding: 0;
@include media-breakpoint-up(md) {
.shoutCardCover {
height: 100%;
padding: 0;
}
}
.shoutCardContent {

2
src/components/Feed/Group.scss
View File

@ -36,7 +36,7 @@
.floor--group {
@include media-breakpoint-down(sm) {
.col-lg-6 {
.col-lg-12 {
.row {
margin: 0 0 0 divide(-$container-padding-x, 2);
}

12
src/components/Feed/Group.tsx
View File

@ -16,22 +16,22 @@ export default (props: GroupProps) => {
<Show when={props.articles.length > 4}>
<div class="wide-container">
<div class="row">
<div class="group__header col-12">{props.header}</div>
<div class="group__header col-24">{props.header}</div>
<div class="col-lg-6">
<div class="col-lg-12">
<ArticleCard
article={props.articles[0]}
settings={{ nosubtitle: false, noicon: true, isFloorImportant: true, isBigTitle: true }}
/>
</div>
<div class="col-lg-6">
<div class="col-lg-12">
<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-md-16">
<ArticleCard
article={a}
settings={{ nosubtitle: false, noicon: true, isBigTitle: true }}
@ -42,7 +42,7 @@ export default (props: GroupProps) => {
</For>
</Show>
<Show when={props.articles.length >= 4}>
<div class="col-md-6">
<div class="col-md-12">
<For each={props.articles.slice(1, 3)}>
{(a) => (
<ArticleCard
@ -58,7 +58,7 @@ export default (props: GroupProps) => {
)}
</For>
</div>
<div class="col-md-6">
<div class="col-md-12">
<For each={props.articles.slice(3, 5)}>
{(a) => (
<ArticleCard

2
src/components/Feed/Row1.tsx
View File

@ -7,7 +7,7 @@ export const Row1 = (props: { article: Shout; nodate?: boolean }) => (
<div class="floor floor--one-article">
<div class="wide-container">
<div class="row">
<div class="col-12">
<div class="col-24">
<ArticleCard article={props.article} settings={{ isSingle: true, nodate: props.nodate }} />
</div>
</div>

10
src/components/Feed/Row2.tsx
View File

@ -3,9 +3,9 @@ import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card'
const x = [
['6', '6'],
['4', '8'],
['8', '4']
['12', '12'],
['8', '16'],
['16', '8']
]
export const Row2 = (props: { articles: Shout[]; isEqual?: boolean; nodate?: boolean }) => {
@ -21,11 +21,11 @@ export const Row2 = (props: { articles: Shout[]; isEqual?: boolean; nodate?: boo
{(a, i) => {
return (
<Show when={!!a}>
<div class={`col-md-${props.isEqual ? '6' : x[y()][i()]}`}>
<div class={`col-md-${props.isEqual ? '12' : x[y()][i()]}`}>
<ArticleCard
article={a}
settings={{
isWithCover: props.isEqual || x[y()][i()] === '8',
isWithCover: props.isEqual || x[y()][i()] === '16',
nodate: props.isEqual || props.nodate
}}
/>

2
src/components/Feed/Row3.tsx
View File

@ -11,7 +11,7 @@ export const Row3 = (props: { articles: Shout[]; header?: JSX.Element; nodate?:
<div class="floor-header">{props.header}</div>
<For each={props.articles}>
{(a) => (
<div class="col-md-4">
<div class="col-md-8">
<ArticleCard article={a} settings={{ nodate: props.nodate }} />
</div>
)}

6
src/components/Feed/Row5.tsx
View File

@ -6,20 +6,20 @@ export const Row5 = (props: { articles: Shout[]; nodate?: boolean }) => {
<div class="floor floor--1">
<div class="wide-container">
<div class="row">
<div class="col-md-3">
<div class="col-md-6">
<ArticleCard article={props.articles[0]} settings={{ nodate: props.nodate }} />
<ArticleCard
article={props.articles[1]}
settings={{ noimage: true, withBorder: true, nodate: props.nodate }}
/>
</div>
<div class="col-md-6">
<div class="col-md-12">
<ArticleCard
article={props.articles[2]}
settings={{ isBigTitle: true, nodate: props.nodate }}
/>
</div>
<div class="col-md-3">
<div class="col-md-6">
<ArticleCard article={props.articles[3]} settings={{ nodate: props.nodate }} />
<ArticleCard
article={props.articles[4]}

2
src/components/Feed/RowShort.tsx
View File

@ -8,7 +8,7 @@ export default (props: { articles: Shout[] }) => (
<div class="row">
<For each={props.articles}>
{(a) => (
<div class="col-md-6 col-lg-3">
<div class="col-md-12 col-lg-6">
<ArticleCard
article={a}
settings={{

1
src/components/Feed/Sidebar.module.scss
View File

@ -1,7 +1,6 @@
.sidebar {
max-height: calc(100vh - 120px);
overflow: hidden;
padding-right: 2.6rem;
position: sticky;
top: 120px;

2
src/components/Nav/AuthModal/AuthModal.module.scss
View File

@ -110,7 +110,7 @@
.submitButton {
display: block;
font-weight: 700;
padding: 1.6rem;
padding: 1.6rem !important;
width: 100%;
}

2
src/components/Nav/AuthModal/SocialProviders.module.scss
View File

@ -34,7 +34,7 @@
}
a {
border: none;
border: none !important;
}
.githubAuth:hover {

4
src/components/Nav/AuthModal/index.tsx
View File

@ -39,7 +39,7 @@ export const AuthModal = () => {
class={clsx('row', styles.view)}
classList={{ [styles.signUp]: mode() === 'register' || mode() === 'confirm-email' }}
>
<div class={clsx('col-md-6 d-none d-md-block', styles.authImage)}>
<div class={clsx('col-md-12 d-none d-md-block', styles.authImage)}>
<div
class={styles.authImageText}
classList={{ [styles.hidden]: mode() !== 'register' && mode() !== 'confirm-email' }}
@ -67,7 +67,7 @@ export const AuthModal = () => {
</p>
</div>
</div>
<div class={clsx('col-md-6', styles.auth)}>
<div class={clsx('col-md-12', styles.auth)}>
<Dynamic component={AUTH_MODAL_MODES[mode()]} />
</div>
</div>

14
src/components/Nav/Header.module.scss
View File

@ -8,7 +8,7 @@
.wide-container {
background: #fff;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(lg) {
padding: 0 divide($container-padding-x, 2);
}
}
@ -53,7 +53,7 @@
.headerInner {
align-items: center;
background: #fff;
flex-wrap: nowrap;
flex-wrap: nowrap !important;
justify-content: space-between;
margin: 0;
@ -130,15 +130,14 @@
display: inline-flex;
font-weight: 500;
position: relative;
//flex: 1 100% !important;
// replace row > * selector to remove !important
padding-right: 0 !important;
width: auto !important;
//width: auto !important;
@include media-breakpoint-down(md) {
flex: 1;
padding-left: 0;
padding-right: 0;
padding-right: 0 !important;
}
}
@ -225,7 +224,6 @@
float: right;
padding-left: 0;
padding-right: 0;
width: 2.2rem;
@include media-breakpoint-up(sm) {
padding-left: divide($container-padding-x, 2);
@ -312,7 +310,7 @@
.articleHeader {
@include font-size(1.4rem);
left: 0;
left: $container-padding-x;
margin: 0.2em 0;
overflow: hidden;
position: absolute;

6
src/components/Nav/Header.tsx
View File

@ -95,12 +95,12 @@ export const Header = (props: Props) => {
<div class={clsx(styles.mainHeaderInner, 'wide-container')}>
<nav class={clsx(styles.headerInner, 'row')} classList={{ fixed: fixed() }}>
<div class={clsx(styles.mainLogo, 'col-auto')}>
<div class={clsx(styles.mainLogo, 'col-auto col-md-4')}>
<a href={getPagePath(router, 'home')}>
<img src="/logo.svg" alt={t('Discours')} />
</a>
</div>
<div class={clsx(styles.mainNavigationWrapper, 'col')}>
<div class={clsx(styles.mainNavigationWrapper, 'col-auto offset-md-1')}>
<Show when={props.title}>
<div class={styles.articleHeader}>{props.title}</div>
</Show>
@ -149,7 +149,7 @@ export const Header = (props: Props) => {
</a>
</div>
</Show>
<div class={styles.burgerContainer}>
<div class={clsx(styles.burgerContainer, 'col-auto')}>
<div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
<div />
</div>

2
src/components/Nav/HeaderAuth.tsx
View File

@ -41,7 +41,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
return (
<ShowOnlyOnClient>
<Show when={isSessionLoaded()} keyed={true}>
<div class={styles.usernav}>
<div class={clsx(styles.usernav, 'col')}>
<div class={clsx(styles.userControl, styles.userControl, 'col')}>
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
<a href="/create">

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

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

4
src/components/Topic/FloorHeader.tsx
View File

@ -7,8 +7,8 @@ export default (props: { topic: Topic; color: string }) => {
const { t } = useLocalize()
return (
<>
<h3 class="col-sm-6">{props.topic.title}</h3>
<div class="col-sm-6 all-materials">
<h3 class="col-sm-12">{props.topic.title}</h3>
<div class="col-sm-12 all-materials">
<a href={`/topic/${props.topic.slug}`}>
{t('All posts')}
<Icon name={`arrow-right-${props.color}`} />

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

@ -17,7 +17,7 @@ export const FullTopic = (props: Props) => {
const { t } = useLocalize()
const subscribed = createMemo(() => session()?.news?.topics?.includes(props.topic?.slug))
return (
<div class={clsx(styles.topicHeader, 'col-md-8 col-lg-6 offset-md-2 offset-lg-3')}>
<div class={clsx(styles.topicHeader, 'col-md-16 col-lg-12 offset-md-4 offset-lg-6')}>
<h1>#{props.topic.title}</h1>
<p>{props.topic.body}</p>
<div class={clsx(styles.topicActions)}>

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

@ -94,7 +94,7 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
const showMore = () => setLimit((oldLimit) => oldLimit + PAGE_SIZE)
const AllAuthorsHead = () => (
<div class="row">
<div class={clsx('col-lg-10', 'col-xl-9')}>
<div class={clsx(styles.pageHeader, 'col-lg-20 col-xl-18')}>
<h1>{t('Authors')}</h1>
<p>{t('Subscribe who you like to tune your personal feed')}</p>
@ -121,12 +121,12 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
return (
<div class={clsx(styles.allTopicsPage, 'wide-container')}>
<Show when={sortedAuthors().length > 0}>
<div class="shift-content">
<div class="offset-md-5">
<AllAuthorsHead />
<Show when={searchParams().by === 'name'}>
<div class="row">
<div class="col-lg-10 col-xl-9">
<div class="col-lg-20 col-xl-18">
<ul class={clsx('nodash', styles.alphabet)}>
<For each={ALPHABET}>
{(letter, index) => (
@ -155,11 +155,11 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
<h2 id={`letter-${ALPHABET.indexOf(letter)}`}>{letter}</h2>
<div class="container">
<div class="row">
<div class="col-lg-10">
<div class="col-lg-20">
<div class="row">
<For each={byLetter()[letter]}>
{(author) => (
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-4')}>
<div class={clsx(styles.topic, 'topic col-sm-12 col-md-8')}>
<div class="topic-title">
<a href={`/author/${author.slug}`}>{author.name}</a>
<span class={styles.articlesCounter}>{author.stat.shouts}</span>
@ -180,7 +180,7 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
<For each={filteredAuthors().slice(0, limit())}>
{(author) => (
<div class="row">
<div class="col-lg-10 col-xl-9">
<div class="col-lg-20 col-xl-18">
<AuthorCard
author={author}
hasLink={true}
@ -197,7 +197,7 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
<Show when={filteredAuthors().length > limit() && searchParams().by !== 'name'}>
<div class="row">
<div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
<div class={clsx(styles.loadMoreContainer, 'col-24 col-md-20')}>
<button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
{t('Load more')}
</button>

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

@ -96,7 +96,7 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
const AllTopicsHead = () => (
<div class="row">
<div class={clsx('col-lg-10 col-xl-9')}>
<div class={clsx(styles.pageHeader, 'col-lg-20 col-xl-18')}>
<h1>{t('Topics')}</h1>
<p>{t('Subscribe what you like to tune your personal feed')}</p>
@ -122,82 +122,84 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
return (
<div class={clsx(styles.allTopicsPage, 'wide-container')}>
<div class="shift-content">
<AllTopicsHead />
<div class="row">
<div class="col-md-19 offset-md-5">
<AllTopicsHead />
<Show when={filteredResults().length > 0}>
<Show when={searchParams().by === 'title'}>
<div class="col-lg-10 col-xl-9">
<ul class={clsx('nodash', styles.alphabet)}>
<For each={ALPHABET}>
{(letter, index) => (
<li>
<Show when={letter in byLetter()} fallback={letter}>
<a
href={`/topics?by=title#letter-${index()}`}
onClick={(event) => {
event.preventDefault()
scrollHandler(`letter-${index()}`)
}}
>
{letter}
</a>
</Show>
</li>
)}
</For>
</ul>
</div>
<Show when={filteredResults().length > 0}>
<Show when={searchParams().by === 'title'}>
<div class="col-lg-20 col-xl-18">
<ul class={clsx('nodash', styles.alphabet)}>
<For each={ALPHABET}>
{(letter, index) => (
<li>
<Show when={letter in byLetter()} fallback={letter}>
<a
href={`/topics?by=title#letter-${index()}`}
onClick={(event) => {
event.preventDefault()
scrollHandler(`letter-${index()}`)
}}
>
{letter}
</a>
</Show>
</li>
)}
</For>
</ul>
</div>
<For each={sortedKeys()}>
{(letter) => (
<div class={clsx(styles.group, 'group')}>
<h2 id={`letter-${ALPHABET.indexOf(letter)}`}>{letter}</h2>
<div class="container">
<div class="row">
<div class="col-lg-10">
<div class="row">
<For each={byLetter()[letter]}>
{(topic) => (
<div class={clsx(styles.topic, 'topic col-sm-6 col-md-4')}>
<a href={`/topic/${topic.slug}`}>{topic.title}</a>
<span class={styles.articlesCounter}>{topic.stat.shouts}</span>
</div>
)}
</For>
<For each={sortedKeys()}>
{(letter) => (
<div class={clsx(styles.group, 'group')}>
<h2 id={`letter-${ALPHABET.indexOf(letter)}`}>{letter}</h2>
<div class="container">
<div class="row">
<div class="col-lg-20">
<div class="row">
<For each={byLetter()[letter]}>
{(topic) => (
<div class={clsx(styles.topic, 'topic col-sm-12 col-md-8')}>
<a href={`/topic/${topic.slug}`}>{topic.title}</a>
<span class={styles.articlesCounter}>{topic.stat.shouts}</span>
</div>
)}
</For>
</div>
</div>
</div>
</div>
</div>
</div>
)}
</For>
</Show>
)}
</For>
</Show>
<Show when={searchParams().by && searchParams().by !== 'title'}>
<For each={filteredResults().slice(0, limit())}>
{(topic) => (
<>
<TopicCard
topic={topic}
compact={false}
subscribed={subscribed(topic.slug)}
showPublications={true}
/>
<StatMetrics fields={['shouts', 'authors', 'followers']} stat={topic.stat} />
</>
)}
</For>
</Show>
<Show when={searchParams().by && searchParams().by !== 'title'}>
<For each={filteredResults().slice(0, limit())}>
{(topic) => (
<>
<TopicCard
topic={topic}
compact={false}
subscribed={subscribed(topic.slug)}
showPublications={true}
/>
<StatMetrics fields={['shouts', 'authors', 'followers']} stat={topic.stat} />
</>
)}
</For>
</Show>
<Show when={filteredResults().length > limit() && searchParams().by !== 'title'}>
<div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10 offset-md-1')}>
<button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
{t('Load more')}
</button>
</div>
<Show when={filteredResults().length > limit() && searchParams().by !== 'title'}>
<div class={clsx(styles.loadMoreContainer, 'col-24 col-md-20 col-lg-14 offset-md-2')}>
<button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
{t('Load more')}
</button>
</div>
</Show>
</Show>
</Show>
</div>
</div>
</div>
)

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

@ -105,7 +105,7 @@ export const AuthorView = (props: AuthorProps) => {
<div class="wide-container">
<AuthorFull author={author()} />
<div class="row group__controls">
<div class="col-md-8">
<div class="col-md-16">
<ul class="view-switcher">
<li classList={{ selected: searchParams().by === 'rating' }}>
<button type="button" onClick={() => changeSearchParam('by', 'rating')}>
@ -136,7 +136,7 @@ export const AuthorView = (props: AuthorProps) => {
</li>
</ul>
</div>
<div class={clsx('col-md-4', styles.additionalControls)}>
<div class={clsx('col-md-8', styles.additionalControls)}>
<Popup
trigger={
<div class={styles.subscribers}>

214
src/components/Views/Feed.tsx
View File

@ -83,123 +83,121 @@ export const FeedView = () => {
return (
<>
<div class="wide-container feed">
<div class="shift-content">
<div class={clsx('left-col', styles.feedNavigation)}>
<div class="row">
<div class={clsx('left-col col-md-5 col-xl-4', styles.feedNavigation)}>
<FeedSidebar authors={sortedAuthors()} />
</div>
<div class="row">
<div class="col-md-8">
<ul class="feed-filter">
<Show when={!!session()?.user?.slug}>
<li class="selected">
<a href="/feed/my">{t('My feed')}</a>
</li>
</Show>
<li>
<a href="/feed/?by=views">{t('Most read')}</a>
</li>
<li>
<a href="/feed/?by=rating">{t('Top rated')}</a>
</li>
<li>
<a href="/feed/?by=comments">{t('Most commented')}</a>
<div class="col-md-12 offset-xl-1">
<ul class="feed-filter">
<Show when={!!session()?.user?.slug}>
<li class="selected">
<a href="/feed/my">{t('My feed')}</a>
</li>
</Show>
<li>
<a href="/feed/?by=views">{t('Most read')}</a>
</li>
<li>
<a href="/feed/?by=rating">{t('Top rated')}</a>
</li>
<li>
<a href="/feed/?by=comments">{t('Most commented')}</a>
</li>
</ul>
<Show when={sortedArticles().length > 0}>
<For each={sortedArticles().slice(0, 4)}>
{(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
</For>
<div class={stylesBeside.besideColumnTitle}>
<h4>{t('Popular authors')}</h4>
<a href="/authors">
{t('All authors')}
<Icon name="arrow-right" class={stylesBeside.icon} />
</a>
</div>
<ul class={stylesBeside.besideColumn}>
<For each={topAuthors().slice(0, 5)}>
{(author) => (
<li>
<AuthorCard author={author} compact={true} hasLink={true} />
</li>
)}
</For>
</ul>
<Show when={sortedArticles().length > 0}>
<For each={sortedArticles().slice(0, 4)}>
{(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
</For>
<For each={sortedArticles().slice(4)}>
{(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
</For>
</Show>
<div class={stylesBeside.besideColumnTitle}>
<h4>{t('Popular authors')}</h4>
<a href="/authors">
{t('All authors')}
<Icon name="arrow-right" class={stylesBeside.icon} />
</a>
</div>
<ul class={stylesBeside.besideColumn}>
<For each={topAuthors().slice(0, 5)}>
{(author) => (
<li>
<AuthorCard author={author} compact={true} hasLink={true} />
</li>
)}
</For>
</ul>
<For each={sortedArticles().slice(4)}>
{(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
</For>
</Show>
</div>
<aside class={clsx('col-md-3', styles.feedAside)}>
<section class={styles.asideSection}>
<h4>{t('Comments')}</h4>
<For each={topComments()}>
{(comment) => {
return (
<div class={styles.comment}>
<div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} />
<AuthorCard
author={comment.createdBy as Author}
isFeedMode={true}
compact={true}
hideFollow={true}
/>
<div class={clsx('text-truncate', styles.commentArticleTitle)}>
<a href={`/${comment.shout.slug}`}>{comment.shout.title}</a>
</div>
</div>
)
}}
</For>
</section>
<Show when={topTopics().length > 0}>
<section class={styles.asideSection}>
<h4>{t('Topics')}</h4>
<For each={topTopics().slice(0, 5)}>
{(topic) => (
<span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
<a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
</span>
)}
</For>
</section>
</Show>
<section class={clsx(styles.asideSection, styles.pinnedLinks)}>
<Icon name="pin" class={styles.icon} />
<ul class="nodash">
<li>
<a href={getPagePath(router, 'guide')}>Как устроен Дискурс</a>
</li>
<li>
<a href="/how-to-write-a-good-article">Как создать хороший текст</a>
</li>
<li>
<a href="#">Правила конструктивных дискуссий</a>
</li>
<li>
<a href={getPagePath(router, 'principles')}>Принципы сообщества</a>
</li>
</ul>
</section>
</aside>
<Show when={isLoadMoreButtonVisible()}>
<p class="load-more-container">
<button class="button" onClick={loadMore}>
{t('Load more')}
</button>
</p>
</Show>
</div>
</div>
<Show when={isLoadMoreButtonVisible()}>
<p class="load-more-container">
<button class="button" onClick={loadMore}>
{t('Load more')}
</button>
</p>
</Show>
<aside class={clsx('col-md-7 col-xl-6 offset-xl-1', styles.feedAside)}>
<section class={styles.asideSection}>
<h4>{t('Comments')}</h4>
<For each={topComments()}>
{(comment) => {
return (
<div class={styles.comment}>
<div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} />
<AuthorCard
author={comment.createdBy as Author}
isFeedMode={true}
compact={true}
hideFollow={true}
/>
<div class={clsx('text-truncate', styles.commentArticleTitle)}>
<a href={`/${comment.shout.slug}`}>{comment.shout.title}</a>
</div>
</div>
)
}}
</For>
</section>
<Show when={topTopics().length > 0}>
<section class={styles.asideSection}>
<h4>{t('Topics')}</h4>
<For each={topTopics().slice(0, 5)}>
{(topic) => (
<span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
<a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
</span>
)}
</For>
</section>
</Show>
<section class={clsx(styles.asideSection, styles.pinnedLinks)}>
<Icon name="pin" class={styles.icon} />
<ul class="nodash">
<li>
<a href={getPagePath(router, 'guide')}>Как устроен Дискурс</a>
</li>
<li>
<a href="/how-to-write-a-good-article">Как создать хороший текст</a>
</li>
<li>
<a href="#">Правила конструктивных дискуссий</a>
</li>
<li>
<a href={getPagePath(router, 'principles')}>Принципы сообщества</a>
</li>
</ul>
</section>
</aside>
</div>
</div>
</>
)

6
src/components/Views/FourOuFour.tsx
View File

@ -10,20 +10,20 @@ export const FourOuFourView = (_props) => {
<div class={styles.errorPage}>
<div class="container">
<div class="row">
<div class="col-md-7 offset-md-3 col-lg-6">
<div class="col-md-14 offset-md-6 col-lg-12">
<a href="/" class="image-link">
<img class={styles.errorImage} src="/error.svg" alt="error" width="auto" height="auto" />
</a>
</div>
</div>
<div class="row">
<div class={clsx(styles.errorTextContainer, 'col-md-2 col-sm-3 offset-sm-1 offset-md-2')}>
<div class={clsx(styles.errorTextContainer, 'col-md-4 col-sm-6 offset-sm-2 offset-md-4')}>
<div class={styles.errorText}>
<div>{t('Error')}</div>
<div class={styles.big}>404</div>
</div>
</div>
<div class={clsx(styles.searchFormContainer, 'col-sm-5 col-md-4 col-lg-3')}>
<div class={clsx(styles.searchFormContainer, 'col-sm-10 col-md-8 col-lg-6')}>
<div class={styles.errorExplain}>
<p>{t(`You've reached a non-existed page`)}</p>
<p>{t('Try to find another way')}:</p>

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

@ -171,7 +171,7 @@ export const InboxView = () => {
<CreateModalContent users={recipients()} />
</Modal>
<div class={clsx('row', styles.row)}>
<div class={clsx(styles.chatList, 'col-md-4')}>
<div class={clsx(styles.chatList, 'col-md-8')}>
<div class={styles.sidebarHeader}>
<Search placeholder="Поиск" onChange={getQuery} />
<button type="button" onClick={handleOpenInviteModal}>
@ -231,7 +231,7 @@ export const InboxView = () => {
</div>
</div>
<div class={clsx('col-md-8', styles.conversation)}>
<div class={clsx('col-md-16', styles.conversation)}>
<Show
when={currentDialog()}
fallback={

8
src/components/Views/Search.tsx
View File

@ -50,7 +50,7 @@ export const SearchView = (props: Props) => {
return (
<div class="search-page wide-container">
<form action="/search" class="search-form row">
<div class="col-sm-9">
<div class="col-sm-18">
<input
type="search"
name="q"
@ -59,7 +59,7 @@ export const SearchView = (props: Props) => {
placeholder={t('Enter text') + '...'}
/>
</div>
<div class="col-sm-3">
<div class="col-sm-6">
<button class="button" type="submit" onClick={loadMore}>
{t('Search')}
</button>
@ -94,13 +94,13 @@ export const SearchView = (props: Props) => {
<div class="row">
<For each={sortedArticles()}>
{(article) => (
<div class="col-md-3">
<div class="col-md-6">
<ArticleCard article={article} />
</div>
)}
</For>
<div class="col-md-3">
<div class="col-md-6">
<a href="#" class="search__show-more">
<span class="search__show-more-inner">{t('Load more')}</span>
</a>

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

@ -81,7 +81,7 @@ export const TopicView = (props: TopicProps) => {
<FullTopic topic={topic()} />
<div class="wide-container">
<div class={clsx(styles.groupControls, 'row group__controls')}>
<div class="col-md-8">
<div class="col-md-16">
<ul class="view-switcher">
<li classList={{ selected: searchParams().by === 'recent' || !searchParams().by }}>
<button type="button" onClick={() => changeSearchParam('by', 'recent')}>
@ -106,7 +106,7 @@ export const TopicView = (props: TopicProps) => {
{/*</li>*/}
</ul>
</div>
<div class="col-md-4">
<div class="col-md-8">
<div class="mode-switcher">
{`${t('Show')} `}
<span class="mode-switcher__control">{t('All posts')}</span>

2
src/components/_shared/Slider.tsx
View File

@ -101,7 +101,7 @@ export default (props: SliderProps) => {
<div class="floor floor--important">
<div class="wide-container">
<div class="row">
<h2 class="col-12">{props.title}</h2>
<h2 class="col-24">{props.title}</h2>
<div class="sliders-container">
<div

2
src/pages/about/discussionRules.page.tsx
View File

@ -10,7 +10,7 @@ export const DiscussionRulesPage = () => {
<Title>{title}</Title>
<article class="wide-container container--static-page">
<div class="row">
<div class="col-md-6 col-xl-7 shift-content order-md-first">
<div class="col-md-12 col-xl-14 offset-md-5 order-md-first">
<h1>
<span class="wrapped" innerHTML={title} />
</h1>

2
src/pages/about/dogma.page.tsx
View File

@ -7,7 +7,7 @@ export const DogmaPage = () => {
<PageLayout>
<article class="wide-container container--static-page">
<div class="row">
<div class="col-md-6 col-xl-7 shift-content order-md-first">
<div class="col-md-12 col-xl-14 offset-md-5 order-md-first">
<h4>Редакционные принципы</h4>
<p>
Дискурс - журнал с открытой горизонтальной редакцией. Содержание журнала определяется прямым

4
src/pages/about/guide.page.tsx
View File

@ -23,7 +23,7 @@ export const GuidePage = () => {
<Meta property="og:image:height" content="630" />
<article class="wide-container container--static-page">
<div class="row">
<div class="col-md-3 col-lg-2 order-md-last">
<div class="col-md-6 col-lg-4 order-md-last">
<button class="button button--content-index" onClick={toggleIndexExpanded}>
<Show when={!indexExpanded()}>
<Icon name="content-index-control" />
@ -61,7 +61,7 @@ export const GuidePage = () => {
</Show>
</div>
<div class="col-md-6 col-xl-7 shift-content order-md-first">
<div class="col-md-12 col-xl-14 offset-md-5 order-md-first">
<h1 id="about">
<span class="wrapped">Как устроен Дискурс</span>
</h1>

6
src/pages/about/help.page.tsx
View File

@ -22,7 +22,7 @@ export const HelpPage = () => {
<article class="wide-container container--static-page discours-help">
<div class="row">
<div class="col-md-3 col-lg-2 order-md-last">
<div class="col-md-6 col-lg-4 order-md-last">
<button class="button button--content-index" onClick={toggleIndexExpanded}>
<Show when={!indexExpanded()}>
<Icon name="content-index-control" />
@ -54,7 +54,7 @@ export const HelpPage = () => {
</Show>
</div>
<div class="col-md-6 col-xl-7 shift-content order-md-first">
<div class="col-md-12 col-xl-14 offset-md-5 order-md-first">
<h1 id="help-us">
<span class="wrapped">Как вы&nbsp;можете поддержать Дискурс?</span>
</h1>
@ -78,7 +78,7 @@ export const HelpPage = () => {
продолжался, пожалуйста, поддержите проект.
</p>
<div class="row">
<div class="col-sm-11 col-md-12">
<div class="col-sm-22 col-md-24">
<Donate />
</div>
</div>

4
src/pages/about/manifest.page.tsx
View File

@ -23,7 +23,7 @@ export const ManifestPage = () => {
</Modal>
<article class="wide-container container--static-page">
<div class="row">
<div class="col-md-3 col-lg-2 order-md-last">
<div class="col-md-6 col-lg-4 order-md-last">
<button class="button button--content-index" onClick={toggleIndexExpanded}>
<Show when={!indexExpanded()}>
<Icon name="content-index-control" />
@ -66,7 +66,7 @@ export const ManifestPage = () => {
</Show>
</div>
<div class="col-md-6 col-xl-7 shift-content order-md-first">
<div class="col-md-12 col-xl-14 offset-md-5 order-md-first">
<h1 id="manifest">
<span class="wrapped">Манифест</span>
</h1>

2
src/pages/about/partners.page.tsx
View File

@ -9,7 +9,7 @@ export const PartnersPage = () => {
<Title>{t('Partners')}</Title>
<article class="wide-container container--static-page">
<div class="row">
<div class="col-md-6 col-xl-7 shift-content order-md-first">
<div class="col-md-12 col-xl-14 offset-md-5 order-md-first">
<h1>{t('Partners')}</h1>
</div>
</div>

2
src/pages/about/principles.page.tsx
View File

@ -10,7 +10,7 @@ export const PrinciplesPage = () => {
<Title>{t('Principles')}</Title>
<article class="wide-container container--static-page">
<div class="row">
<div class="col-md-6 col-xl-7 shift-content order-md-first">
<div class="col-md-12 col-xl-14 offset-md-5 order-md-first">
<h1>
<span class="wrapped">{t('Principles')}</span>
</h1>

2
src/pages/about/projects.page.tsx
View File

@ -9,7 +9,7 @@ export const ProjectsPage = () => {
<Title>{t('Projects')}</Title>
<article class="wide-container container--static-page">
<div class="row">
<div class="col-md-6 col-xl-7 shift-content order-md-first">
<div class="col-md-12 col-xl-14 offset-md-5 order-md-first">
<h1>{t('Projects')}</h1>
</div>
</div>

4
src/pages/about/termsOfUse.page.tsx
View File

@ -20,7 +20,7 @@ export const TermsOfUsePage = () => {
<Meta property="og:description" content={title} />
<article class="wide-container container--static-page">
<div class="row">
<div class="col-md-3 col-lg-2 order-md-last">
<div class="col-md-6 col-lg-4 order-md-last">
<button class="button button--content-index" onClick={toggleIndexExpanded}>
<Show when={!indexExpanded()}>
<Icon name="content-index-control" />
@ -58,7 +58,7 @@ export const TermsOfUsePage = () => {
</Show>
</div>
<div class="col-md-6 col-xl-7 shift-content order-md-first">
<div class="col-md-12 col-xl-14 offset-md-5 order-md-first">
<h1 id="terms-of-use">
<span class="wrapped">Пользовательское соглашение</span>
</h1>

2
src/pages/about/thanks.page.tsx
View File

@ -14,7 +14,7 @@ export const ThanksPage = () => {
<Meta property="og:description" content={title} />
<article class="wide-container container--static-page">
<div class="row">
<div class="col-md-6 col-xl-7 shift-content order-md-first">
<div class="col-md-12 col-xl-14 offset-md-5 order-md-first">
<h1>
<span class="wrapped">{title}</span>
</h1>

2
src/pages/connect.page.tsx
View File

@ -5,7 +5,7 @@ export const ConnectPage = () => {
<PageLayout>
<article class="wide-container container--static-page">
<div class="row">
<div class="col-sm-10 col-md-8 col-lg-7 col-xl-6 shift-content">
<div class="col-sm-20 col-md-16 col-lg-14 col-xl-12 offset-md-5">
<h1>
<span class="wrapped">Предложить идею</span>
</h1>

4
src/pages/layoutShouts.page.tsx
View File

@ -76,7 +76,7 @@ export const LayoutShoutsPage = (props: PageProps) => {
const ModeSwitcher = () => (
<div class="wide-container">
<div class={clsx(styles.groupControls, 'row group__controls')}>
<div class="col-md-8">
<div class="col-md-16">
<ul class="view-switcher">
<li classList={{ selected: getLayout() === 'audio' }}>
<a href="/expo/audio">{t('Audio')}</a>
@ -92,7 +92,7 @@ export const LayoutShoutsPage = (props: PageProps) => {
</li>
</ul>
</div>
<div class="col-md-4">
<div class="col-md-8">
<div class="mode-switcher">
{`${t('Show')} `}
<span class="mode-switcher__control">{t('All posts')}</span>

4
src/pages/profile/profileSecurity.page.tsx
View File

@ -8,7 +8,7 @@ export const ProfileSecurityPage = () => {
return (
<PageLayout>
<div class="wide-container">
<div class="shift-content">
<div class="offset-md-5">
<div class="left-col">
<div class={clsx('left-navigation', styles.leftNavigation)}>
<ProfileSettingsNavigation />
@ -16,7 +16,7 @@ export const ProfileSecurityPage = () => {
</div>
<div class="row">
<div class="col-md-10 col-lg-9 col-xl-8">
<div class="col-md-20 col-lg-18 col-xl-16">
<h1>Вход и&nbsp;безопасность</h1>
<p class="description">Настройки аккаунта, почты, пароля и&nbsp;способов входа.</p>

4
src/pages/profile/profileSettings.page.tsx
View File

@ -84,14 +84,14 @@ export const ProfileSettingsPage = () => {
<PageLayout>
<Show when={form}>
<div class="wide-container">
<div class="shift-content">
<div class="offset-md-5">
<div class="left-col">
<div class={clsx('left-navigation', styles.leftNavigation)}>
<ProfileSettingsNavigation />
</div>
</div>
<div class="row">
<div class="col-md-10 col-lg-9 col-xl-8">
<div class="col-md-20 col-lg-18 col-xl-16">
<h1>{t('Profile settings')}</h1>
<p class="description">{t('Here you can customize your profile the way you want.')}</p>
<form onSubmit={handleSubmit} enctype="multipart/form-data">

4
src/pages/profile/profileSubscriptions.page.tsx
View File

@ -9,7 +9,7 @@ export const ProfileSubscriptionsPage = () => {
return (
<PageLayout>
<div class="wide-container">
<div class="shift-content">
<div class="offset-md-5">
<div class="left-col">
<div class={clsx('left-navigation', styles.leftNavigation)}>
<ProfileSettingsNavigation />
@ -17,7 +17,7 @@ export const ProfileSubscriptionsPage = () => {
</div>
<div class="row">
<div class="col-md-10 col-lg-9 col-xl-8">
<div class="col-md-20 col-lg-18 col-xl-16">
<h1>Подписки</h1>
<p class="description">Здесь можно управлять всеми своими подписками на&nbsp;сайте.</p>

8
src/styles/_globals.scss
View File

@ -1,16 +1,16 @@
$include-column-box-sizing: true !default;
$rfs-breakpoint: 1360px !default;
$rfs-breakpoint: 1460px !default;
$rfs-base-value: 1.6rem !default;
$rfs-rem-value: 10 !default;
$grid-columns: 12;
$grid-gutter-width: 5.2rem !default;
$grid-columns: 24;
$grid-gutter-width: 4rem !default;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
// xxl: 1400px,
// xxl: 1500px,
) !default;
$default-color: #141414;
$link-color: #2638d9;

10
src/styles/app.scss
View File

@ -67,13 +67,17 @@ section {
.wide-container {
margin: 0 auto;
max-width: 1400px;
max-width: 1500px;
padding: 0 divide($container-padding-x, 2);
width: 100%;
@include media-breakpoint-up(sm) {
padding: 0 $container-padding-x;
}
@include media-breakpoint-up(xl) {
padding: 0 $grid-gutter-width;
}
}
h1,
@ -558,7 +562,7 @@ figcaption {
}
.floor--7 {
.col-md-6 {
.col-md-12 {
@include media-breakpoint-down(lg) {
&:nth-child(1),
&:nth-child(2) {
@ -647,7 +651,7 @@ figcaption {
}
.container {
max-width: 1400px;
max-width: 1500px;
width: auto;
@include media-breakpoint-down(sm) {