diff --git a/public/icons/arrow-right-2.svg b/public/icons/arrow-right-2.svg new file mode 100644 index 00000000..2b4a95b3 --- /dev/null +++ b/public/icons/arrow-right-2.svg @@ -0,0 +1,5 @@ + + + + diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index b97bb291..69ce9f96 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -46,6 +46,7 @@ "Back": "Back", "Be the first to rate": "Be the first to rate", "Become an author": "Become an author", + "Block rules": "За что можно получить бан", "Bold": "Bold", "Bookmarked": "Saved", "Bookmarks": "Bookmarks", @@ -170,6 +171,7 @@ "Gallery": "Gallery", "Get to know the most intelligent people of our time, edit and discuss the articles, share your expertise, rate and decide what to publish in the magazine": "Get to know the most intelligent people of our time, edit and discuss the articles, share your expertise, rate and decide what to publish in the magazine", "Go to main page": "Go to main page", + "Go to discussions": "Перейти к обсуждениям", "Group Chat": "Group Chat", "Groups": "Groups", "Header 1": "Header 1", @@ -217,9 +219,13 @@ "It does not look like url": "It doesn't look like a link", "Italic": "Italic", "Join our maillist": "To receive the best postings, just enter your email", + "Join our team of authors": "Join our team of authors", + "Join our team of authors text": "Каждый месяц на Дискурсе публикуются десятки новых авторов. Станьте одним из них — предложите свой материал в журнал и присоединитесь к горизонтальной редакции", "Join the community": "Join the community", "Join the global community of authors!": "Join the global community of authors from all over the world!", "Join": "Join", + "Join discussions": "Присоединяйтесь к дискуссиям", + "Join discussions text": "Дискурс — свободная платформа для осмысленного общения.
Здесь появятся ваши реплики, чтобы в любой момент вернуться к диалогу.", "Just start typing...": "Just start typing...", "Knowledge base": "Knowledge base", "Language": "Language", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 45ce19b6..445c7906 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -49,6 +49,7 @@ "Back": "Назад", "Be the first to rate": "Оцените первым", "Become an author": "Стать автором", + "Block rules": "За что можно получить бан", "Bold": "Жирный", "Bookmarked": "Сохранено", "Bookmarks": "Закладки", @@ -178,6 +179,7 @@ "Get notifications": "Получать уведомления", "Get to know the most intelligent people of our time, edit and discuss the articles, share your expertise, rate and decide what to publish in the magazine": "Познакомитесь с выдающимися людьми нашего времени, участвуйте в редактировании и обсуждении статей, выступайте экспертом, оценивайте материалы других авторов со всего мира и определяйте, какие статьи будут опубликованы в журнале", "Go to main page": "Перейти на главную", + "Go to discussions": "Перейти к обсуждениям", "Group Chat": "Общий чат", "Groups": "Группы", "Header 1": "Заголовок 1", @@ -227,9 +229,13 @@ "It does not look like url": "Это не похоже на ссылку", "Italic": "Курсив", "Join our maillist": "Чтобы получать рассылку лучших публикаций, просто укажите свою почту", + "Join our team of authors": "Станьте автором", + "Join our team of authors text": "Каждый месяц на Дискурсе публикуются десятки новых авторов.
Станьте одним из них — предложите свой материал в журнал и присоединитесь к горизонтальной редакции", "Join the community": "Присоединиться к сообществу", "Join the global community of authors!": "Присоединятесь к глобальному сообществу авторов со всего мира!", "Join": "Присоединиться", + "Join discussions": "Присоединяйтесь к дискуссиям", + "Join discussions text": "Дискурс — свободная платформа для осмысленного общения.
Здесь появятся ваши реплики, чтобы в любой момент вернуться к диалогу.", "Just start typing...": "Просто начните печатать...", "Karma": "Карма", "Knowledge base": "База знаний", diff --git a/public/placeholder-join.webp b/public/placeholder-join.webp new file mode 100644 index 00000000..887c55cf Binary files /dev/null and b/public/placeholder-join.webp differ diff --git a/src/components/Feed/Placeholder/Placeholder.module.scss b/src/components/Feed/Placeholder/Placeholder.module.scss index da4fd155..abd61262 100644 --- a/src/components/Feed/Placeholder/Placeholder.module.scss +++ b/src/components/Feed/Placeholder/Placeholder.module.scss @@ -1,9 +1,7 @@ .placeholder { - aspect-ratio: 1 / 0.8; border-radius: 2.2rem; display: flex; @include font-size(1.4rem); - flex-direction: column; font-weight: 500; overflow: hidden; position: relative; @@ -14,19 +12,26 @@ button, .button { + align-items: center; border-radius: 1.2rem; - display: block; + display: flex; @include font-size(1.5rem); + gap: 0.6rem; margin-top: 3rem; padding: 1rem 2rem; width: 100%; + + .icon { + height: 2.4rem; + width: 2.4rem; + } } } -.placeholderCover { - flex: 0 100%; - position: relative; - width: 100%; +.placeholder--feed-mode { + aspect-ratio: 1 / 0.8; + flex-direction: column; + text-align: center; &:after { bottom: 0; @@ -36,35 +41,84 @@ position: absolute; width: 100%; - .placeholder-feed & { + .placeholder--feed & { background: linear-gradient(to top, #171032, rgba(23, 16, 50, 0)); } - .placeholder-feedCollaborations & { + .placeholder--feedCollaborations & { background: linear-gradient(to top, #070709, rgba(7, 7, 9, 0)); } + } - .placeholder-feedDiscussions & { - //background: linear-gradient(to top, #E9E9EE, rgba(233, 233, 238, 0)); + .placeholderCover { + flex: 0 100%; + width: 100%; + + img { + position: absolute; } } +} + +.placeholder--profile-mode { + min-height: 28rem; + + .placeholderCover { + flex: 0 45rem; + min-width: 45rem; + order: 2; + padding: 1.6rem; + + img { + height: auto; + width: 100%; + } + } + + .placeholderContent { + display: flex; + flex-direction: column; + justify-content: space-between; + @include font-size(2rem); + line-height: 1.2; + padding: 3rem; + } + + h3 { + @include font-size(3.8rem); + } + + .button { + background: var(--background-color-invert); + color: var(--default-color-invert); + bottom: 2rem; + position: absolute; + right: 2rem; + width: auto; + + .icon { + filter: invert(1); + } + } +} + +.placeholderCover { + position: relative; img { left: 0; height: 100%; object-fit: cover; - position: absolute; width: 100%; } } .placeholderContent { padding: 1.6rem; - text-align: center; } -.placeholder-feed, -.placeholder-feedCollaborations { +.placeholder--feed, +.placeholder--feedCollaborations { color: var(--default-color-invert); button, @@ -74,7 +128,7 @@ } } -.placeholder-feed { +.placeholder--feed { background: #171032; .placeholderCover { @@ -84,7 +138,7 @@ } } -.placeholder-feedCollaborations { +.placeholder--feedCollaborations { background: #070709; .placeholderCover { @@ -94,7 +148,7 @@ } } -.placeholder-feedDiscussions { +.placeholder--feedDiscussions { background: #E9E9EE; .placeholderCover { @@ -115,3 +169,45 @@ color: var(--default-color-invert); } } + + +.placeholder--author { + background: #E58B72; +} + +.placeholder--authorComments { + background: #E9E9EE; + + .placeholderCover { + img { + mix-blend-mode: multiply; + } + } +} + +.bottomLinks { + display: flex; + @include font-size(1.6rem); + gap: 4rem; + + a { + border: none !important; + padding-left: 2.6rem; + position: relative; + + &:hover { + .icon { + filter: invert(0); + } + } + } + + .icon { + filter: invert(1); + height: 1.8rem; + left: 0; + position: absolute; + transition: filter 0.2s; + width: 1.8rem; + } +} diff --git a/src/components/Feed/Placeholder/Placeholder.tsx b/src/components/Feed/Placeholder/Placeholder.tsx index a1323227..47022f6f 100644 --- a/src/components/Feed/Placeholder/Placeholder.tsx +++ b/src/components/Feed/Placeholder/Placeholder.tsx @@ -1,12 +1,14 @@ import { clsx } from 'clsx' -import { Show } from 'solid-js' +import { For, Show } from 'solid-js' import { useLocalize } from '../../../context/localize' import { useSession } from '../../../context/session' import styles from './Placeholder.module.scss' +import {Icon} from "../../_shared/Icon"; export type PlaceholderProps = { - type: string + type: string, + mode: 'feed' | 'profile' } export const Placeholder = (props: PlaceholderProps) => { @@ -35,16 +37,61 @@ export const Placeholder = (props: PlaceholderProps) => { buttonLabel: author() ? t('Current discussions') : t('Enter'), href: '/feed?by=last_comment', }, + author: { + image: 'placeholder-join.webp', + header: t('Join our team of authors'), + text: t('Join our team of authors text'), + buttonLabel: t('Create post'), + href: '/create', + profileLinks: [ + { + href: '/how-to-write-a-good-article', + label: t('How to write a good article') + } + ] + }, + authorComments: { + image: 'placeholder-discussions.webp', + header: t('Join discussions'), + text: t('Placeholder feedDiscussions'), + buttonLabel: t('Go to discussions'), + href: '/feed?by=last_comment', + profileLinks: [ + { + href: '/about/discussion-rules', + label: t('Discussion rules') + }, + { + href: '/about/discussion-rules#ban', + label: t('Block rules') + } + ] + }, } return ( -
+
-

-

+

+

+

+

+ + +
+ + {(link) => ( + + + {link.label} + + )} + +
+ { } > - {data[props.type].buttonLabel} + + {data[props.type].buttonLabel} + + + +

diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index 79140961..e2b6d4ad 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -28,6 +28,7 @@ import { MODALS, hideModal } from '../../../stores/ui' import { byCreated } from '../../../utils/sortby' import stylesArticle from '../../Article/Article.module.scss' import styles from './Author.module.scss' +import {Placeholder} from "../../Feed/Placeholder"; type Props = { authorSlug: string @@ -259,6 +260,11 @@ export const AuthorView = (props: Props) => {
+
+ +
+ +
@@ -279,46 +285,54 @@ export const AuthorView = (props: Props) => {
- - + +
+ +
- - - + 0}> + + + - - - + + + - 3}> - - - - - - + + + - - {(page) => ( - <> - - - - - - - - )} - - + 3}> + + + + + + - -

- -

+ + {(page) => ( + <> + + + + + + + + )} + + + + +

+ +

+ diff --git a/src/components/Views/Feed/Feed.tsx b/src/components/Views/Feed/Feed.tsx index 6f5613c2..f187ad07 100644 --- a/src/components/Views/Feed/Feed.tsx +++ b/src/components/Views/Feed/Feed.tsx @@ -235,7 +235,8 @@ export const FeedView = (props: Props) => {
- }> + }>
  • { людей рождается истина.

    -

    За что можно получить дырку в карме и выиграть бан в сообществе

    +

    За что можно получить дырку в карме и выиграть бан в сообществе