diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 064c8c5d..f8a6b5bb 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -106,9 +106,11 @@ "Create an account to subscribe": "Create an account to subscribe", "Create an account to vote": "Create an account to vote", "Create gallery": "Create gallery", + "Create own feed": "Создать свою ленту", "Create post": "Create post", "Create video": "Create video", "Crop image": "Crop image", + "Current discussions": "Актуальные дискуссии", "Culture": "Culture", "Date of Birth": "Date of Birth", "Decline": "Decline", @@ -154,6 +156,8 @@ "Feed": "Feed", "Feedback": "Feedback", "Fill email": "Fill email", + "Find co-authors": "Найти соавторов", + "Find collaborators": "Найдите соавторов и экспертов", "Fixed": "Fixed", "Follow the topic": "Follow the topic", "Follow": "Follow", @@ -260,6 +264,7 @@ "Our regular contributor": "Our regular contributor", "Paragraphs": "Абзацев", "Participate in the Discours: share information, join the editorial team": "Участвуйте в Дискурсе: делитесь информацией, присоединяйтесь к редакции", + "Participate in discussions": "Участвуйте в дискуссиях", "Participating": "Participating", "Participation": "Participation", "Partners": "Partners", @@ -273,6 +278,9 @@ "Paste Embed code": "Paste Embed code", "Personal": "Personal", "Pin": "Pin", + "Placeholder feed": "Подпишитесь на любимые темы, авторов и сообщества — моментально узнавайте о новых публикациях и обсуждениях", + "Placeholder feedCollaborations": "На платформе можно писать материалы вместе. Здесь появятся публикации, в которые вы внесли вклад", + "Placeholder feedDiscussions": "Дискурс — свободная платформа для осмысленного общения. Здесь появятся все ваши реплики, чтобы в любой момент вернуться к диалогу", "Platform Guide": "Platform Guide", "Please check your email address": "Please check your email address", "Please confirm your email to finish": "Confirm your email and the action will complete", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 09497c5a..5be74715 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -110,10 +110,12 @@ "Create an account to subscribe": "Создайте аккаунт, чтобы подписаться", "Create an account to vote": "Создайте аккаунт, чтобы голосовать", "Create gallery": "Создать галерею", + "Create own feed": "Создать свою ленту", "Create post": "Создать публикацию", "Create video": "Создать видео", "Crop image": "Кадрировать изображение", "Culture": "Культура", + "Current discussions": "Актуальные дискуссии", "Date of Birth": "Дата рождения", "Decline": "Отмена", "Delete cover": "Удалить обложку", @@ -160,6 +162,8 @@ "Feed": "Лента", "Feedback": "Обратная связь", "Fill email": "Введите почту", + "Find co-authors": "Найти соавторов", + "Find collaborators": "Найдите соавторов и экспертов", "Fixed": "Все поправлено", "Follow the topic": "Подписаться на тему", "Follow": "Подписаться", @@ -272,6 +276,7 @@ "Our regular contributor": "Наш постоянный автор", "Paragraphs": "Абзацев", "Participate in the Discours: share information, join the editorial team": "Participate in the Discours: share information, join the editorial team", + "Participate in discussions": "Участвуйте в дискуссиях", "Participating": "Участвовать", "Participation": "Соучастие", "Partners": "Партнёры", @@ -285,6 +290,9 @@ "Paste Embed code": "Вставьте embed код", "Personal": "Личные", "Pin": "Закрепить", + "Placeholder feed": "Подпишитесь на любимые темы, авторов и сообщества — моментально узнавайте о новых публикациях и обсуждениях", + "Placeholder feedCollaborations": "На платформе можно писать материалы вместе. Здесь появятся публикации, в которые вы внесли вклад", + "Placeholder feedDiscussions": "Дискурс — свободная платформа для осмысленного общения. Здесь появятся все ваши реплики, чтобы в любой момент вернуться к диалогу", "Platform Guide": "Гид по дискурсу", "Please check your email address": "Пожалуйста, проверьте введенный адрес почты", "Please check your inbox! We have sent a password reset link.": "Пожалуйста, проверьте свою почту, мы отправили вам письмо со ссылкой для сброса пароля", diff --git a/public/placeholder-discussions.webp b/public/placeholder-discussions.webp new file mode 100644 index 00000000..a653abed Binary files /dev/null and b/public/placeholder-discussions.webp differ diff --git a/public/placeholder-experts.webp b/public/placeholder-experts.webp new file mode 100644 index 00000000..a40021b2 Binary files /dev/null and b/public/placeholder-experts.webp differ diff --git a/public/placeholder-feed.webp b/public/placeholder-feed.webp new file mode 100644 index 00000000..9d002486 Binary files /dev/null and b/public/placeholder-feed.webp differ diff --git a/src/components/Feed/Placeholder/Placeholder.module.scss b/src/components/Feed/Placeholder/Placeholder.module.scss new file mode 100644 index 00000000..da4fd155 --- /dev/null +++ b/src/components/Feed/Placeholder/Placeholder.module.scss @@ -0,0 +1,117 @@ +.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; + + h3 { + @include font-size(2.4rem); + } + + button, + .button { + border-radius: 1.2rem; + display: block; + @include font-size(1.5rem); + margin-top: 3rem; + padding: 1rem 2rem; + width: 100%; + } +} + +.placeholderCover { + flex: 0 100%; + position: relative; + width: 100%; + + &:after { + bottom: 0; + content: ''; + height: 20%; + left: 0; + position: absolute; + width: 100%; + + .placeholder-feed & { + background: linear-gradient(to top, #171032, rgba(23, 16, 50, 0)); + } + + .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)); + } + } + + img { + left: 0; + height: 100%; + object-fit: cover; + position: absolute; + width: 100%; + } +} + +.placeholderContent { + padding: 1.6rem; + text-align: center; +} + +.placeholder-feed, +.placeholder-feedCollaborations { + color: var(--default-color-invert); + + button, + .button { + background: var(--background-color); + color: var(--default-color); + } +} + +.placeholder-feed { + background: #171032; + + .placeholderCover { + img { + object-position: top; + } + } +} + +.placeholder-feedCollaborations { + background: #070709; + + .placeholderCover { + img { + object-position: bottom; + } + } +} + +.placeholder-feedDiscussions { + background: #E9E9EE; + + .placeholderCover { + padding: 2rem; + text-align: center; + + img { + height: 90%; + mix-blend-mode: multiply; + object-fit: contain; + top: 10%; + } + } + + button, + .button { + background: var(--background-color-invert); + color: var(--default-color-invert); + } +} diff --git a/src/components/Feed/Placeholder/Placeholder.tsx b/src/components/Feed/Placeholder/Placeholder.tsx new file mode 100644 index 00000000..09356e6f --- /dev/null +++ b/src/components/Feed/Placeholder/Placeholder.tsx @@ -0,0 +1,59 @@ +import { clsx } from 'clsx' +import { Show } from 'solid-js' + +import { useLocalize } from '../../../context/localize' +import { useSession } from '../../../context/session' +import styles from './Placeholder.module.scss' + +export type PlaceholderProps = { + type: 'feed' | 'feedCollaborations' | 'feedDiscussions' +} + +export const Placeholder = (props: PlaceholderProps) => { + const { t } = useLocalize() + const { author } = useSession() + + const data = { + feed: { + image: 'placeholder-feed.webp', + header: t('Feed settings'), + text: t('Placeholder feed'), + buttonLabel: author() ? t('Popular authors') : t('Create own feed'), + }, + feedCollaborations: { + image: 'placeholder-experts.webp', + header: t('Find collaborators'), + text: t('Placeholder feedCollaborations'), + buttonLabel: t('Find co-authors'), + }, + feedDiscussions: { + image: 'placeholder-discussions.webp', + header: t('Participate in discussions'), + text: t('Placeholder feedDiscussions'), + buttonLabel: author() ? t('Current discussions') : t('Enter'), + }, + } + + return ( +
+
+ +
+
+

+

+ + + {data[props.type].buttonLabel} + + } + > + + +

+
+ ) +} diff --git a/src/components/Feed/Placeholder/index.ts b/src/components/Feed/Placeholder/index.ts new file mode 100644 index 00000000..20413aa5 --- /dev/null +++ b/src/components/Feed/Placeholder/index.ts @@ -0,0 +1 @@ +export { Placeholder } from './Placeholder' diff --git a/src/components/Views/Feed/Feed.tsx b/src/components/Views/Feed/Feed.tsx index b2fc5dfe..6f5613c2 100644 --- a/src/components/Views/Feed/Feed.tsx +++ b/src/components/Views/Feed/Feed.tsx @@ -20,6 +20,7 @@ import { getShareUrl } from '../../Article/SharePopup' import { AuthorBadge } from '../../Author/AuthorBadge' import { AuthorLink } from '../../Author/AuthorLink' import { ArticleCard } from '../../Feed/ArticleCard' +import { Placeholder } from '../../Feed/Placeholder' import { Sidebar } from '../../Feed/Sidebar' import { Modal } from '../../Nav/Modal' import { DropDown } from '../../_shared/DropDown' @@ -100,7 +101,7 @@ export const FeedView = (props: Props) => { const { page, searchParams, changeSearchParams } = useRouter() const [isLoading, setIsLoading] = createSignal(false) const [isRightColumnLoaded, setIsRightColumnLoaded] = createSignal(false) - const { session } = useSession() + const { author, session } = useSession() const { loadReactionsBy } = useReactions() const { sortedArticles } = useArticlesStore() const { topTopics } = useTopics() @@ -234,107 +235,109 @@ export const FeedView = (props: Props) => {
-
-
    -
  • - {t('Recent')} -
    • - {/*
  • */} - {/* {t('Most read')}*/} - {/*
    • */} -
  • - changeSearchParams({ by: 'likes' })}> - {t('Top rated')} - -
    • -
  • - changeSearchParams({ by: 'last_comment' })}> - {t('Most commented')} - -
    • -
-
- + }> +
+
    +
  • + {t('Recent')} +
    • + {/*
  • */} + {/* {t('Most read')}*/} + {/*
    • */} +
  • + changeSearchParams({ by: 'likes' })}> + {t('Top rated')} + +
    • +
  • + changeSearchParams({ by: 'last_comment' })}> + {t('Most commented')} + +
    • +
+
+ + changeSearchParams({ period: period.value })} + /> + changeSearchParams({ period: period.value })} + onChange={(visibility: VisibilityItem) => + changeSearchParams({ visibility: visibility.value }) + } /> - - - changeSearchParams({ visibility: visibility.value }) - } - /> +
-
- }> - 0}> - - {(article) => ( - handleShare(shared)} - onInvite={() => showModal('inviteMembers')} - article={article} - settings={{ isFeedMode: true }} - desktopCoverSize="M" - /> - )} - + }> + 0}> + + {(article) => ( + handleShare(shared)} + onInvite={() => showModal('inviteMembers')} + article={article} + settings={{ isFeedMode: true }} + desktopCoverSize="M" + /> + )} + -
-
-

{t('Popular authors')}

- - {t('All authors')} - - +
+
+

{t('Popular authors')}

+ + {t('All authors')} + + +
+ +
    + + {(author) => ( +
  • + +
    • + )} +     +
-
    - - {(author) => ( -
  • - -
    • - )} -     -
-
+ + {(article) => ( + + )} + + - - {(article) => ( - - )} - - - - -

- -

+ +

+ +

+