From 13b92c2201e4dbb6328a4c1073b466f735ed4c65 Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Thu, 12 Oct 2023 17:28:00 +0300 Subject: [PATCH] Feature/profile improvements (#255) * Show social in profile * change profile view * fix facebook --- public/locales/en/translation.json | 4 +- public/locales/ru/translation.json | 8 +- .../Author/AuthorCard/AuthorCard.module.scss | 477 +++++++++--------- .../Author/AuthorCard/AuthorCard.tsx | 143 +++--- src/components/Views/Author/Author.tsx | 7 +- src/graphql/types.gen.ts | 45 +- 6 files changed, 370 insertions(+), 314 deletions(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 773d2921..91b84fc6 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -413,5 +413,7 @@ "video": "video", "view": "view", "zine": "zine", - "PublicationsWithCount": "{count, plural, =0 {no publications} one {{count} publication} other {{count} publications}}" + "SubscriptionWithPlurals": "{count, plural, =0 {no subscriptions} one {{count} subscription} other {{count} subscriptions}", + "PublicationsWithCount": "{count, plural, =0 {no publications} one {{count} publication} other {{count} publications}}", + "Edit profile": "Edit profile" } diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index ee6c1e12..5f63ca7c 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -430,14 +430,14 @@ "subscriber": "подписчик", "subscriber_rp": "подписчика", "subscribers": "подписчиков", - "subscription": "подписка", - "subscription_rp": "подписки", - "subscriptions": "подписок", "terms of use": "правилами пользования сайтом", "topics": "темы", "user already exist": "пользователь уже существует", "video": "видео", "view": "просмотр", "zine": "журнал", - "PublicationsWithCount": "{count, plural, =0 {нет публикаций} one {{count} публикация} few {{count} публикации} other {{count} публикаций}}" + "SubscriberWithCount": "{count, plural, =0 {нет подписчиков} one {{count} подписчик} few {{count} подписчика} other {{count} подписчиков}}", + "SubscriptionWithCount": "{count, plural, =0 {нет подписок} one {{count} подписка} few {{count} подписки} other {{count} подписок}}", + "PublicationsWithCount": "{count, plural, =0 {нет публикаций} one {{count} публикация} few {{count} публикации} other {{count} публикаций}}", + "Edit profile": "Редактировать профиль" } diff --git a/src/components/Author/AuthorCard/AuthorCard.module.scss b/src/components/Author/AuthorCard/AuthorCard.module.scss index dcbcfd34..df6805a4 100644 --- a/src/components/Author/AuthorCard/AuthorCard.module.scss +++ b/src/components/Author/AuthorCard/AuthorCard.module.scss @@ -124,7 +124,45 @@ flex-wrap: wrap; } - a { + .button { + padding-left: 2rem; + padding-right: 2rem; + margin-right: 0.5em; + + &:first-of-type { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + + &:hover { + .buttonUnfollowLabel { + display: block; + } + + .buttonSubscribedLabel { + display: none; + } + } + + .buttonUnfollowLabel { + display: none; + } + } +} + +.authorSubscribeSocialLabel { + display: none; +} + +.authorSubscribeSocial { + align-items: center; + display: flex; + margin: 2rem 0; + + .socialLink { border: none; display: inline-block; height: 24px; @@ -165,251 +203,213 @@ position: absolute; } } - } - a[href*='facebook.com/'] { - &::before { - background-image: url(/icons/user-link-facebook.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='twitter.com/'] { - &::before { - background-image: url(/icons/user-link-twitter.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='telegram.com/'] { - &::before { - background-image: url(/icons/user-link-telegram.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='vk.cc/'], - a[href*='vk.com/'] { - &::before { - background-image: url(/icons/user-link-vk.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='tumblr.com/'] { - &::before { - background-image: url(/icons/user-link-tumblr.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='instagram.com/'] { - &::before { - background-image: url(/icons/user-link-instagram.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='behance.net/'] { - &::before { - background-image: url(/icons/user-link-behance.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='dribbble.com/'] { - &::before { - background-image: url(/icons/user-link-dribbble.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='github.com/'] { - &::before { - background-image: url(/icons/user-link-github.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='linkedin.com/'] { - &::before { - background-image: url(/icons/user-link-linkedin.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='medium.com/'] { - &::before { - background-image: url(/icons/user-link-medium.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='ok.ru/'] { - &::before { - background-image: url(/icons/user-link-ok.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='pinterest.com/'] { - &::before { - background-image: url(/icons/user-link-pinterest.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='reddit.com/'] { - &::before { - background-image: url(/icons/user-link-reddit.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='tiktok.com/'] { - &::before { - background-image: url(/icons/user-link-tiktok.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='youtube.com/'], - a[href*='youtu.be/'] { - &::before { - background-image: url(/icons/user-link-youtube.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - a[href*='dzen.ru/'] { - &::before { - background-image: url(/icons/user-link-dzen.svg); - } - - &:hover { - .authorSubscribeSocialLabel { - display: none; - } - } - } - - .button { - padding-left: 2rem; - padding-right: 2rem; - margin-right: 0.5em; - - &:first-of-type { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - - &:hover { - .buttonUnfollowLabel { - display: block; + &[href*='facebook.com/'] { + &::before { + background-image: url(/icons/user-link-facebook.svg); } - .buttonSubscribedLabel { - display: none; + &:hover { + .authorSubscribeSocialLabel { + display: none; + } } } - .buttonUnfollowLabel { - display: none; + &[href*='twitter.com/'] { + &::before { + background-image: url(/icons/user-link-twitter.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='telegram.com/'] { + &::before { + background-image: url(/icons/user-link-telegram.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='vk.cc/'], + &[href*='vk.com/'] { + &::before { + background-image: url(/icons/user-link-vk.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='tumblr.com/'] { + &::before { + background-image: url(/icons/user-link-tumblr.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='instagram.com/'] { + &::before { + background-image: url(/icons/user-link-instagram.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='behance.net/'] { + &::before { + background-image: url(/icons/user-link-behance.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='dribbble.com/'] { + &::before { + background-image: url(/icons/user-link-dribbble.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='github.com/'] { + &::before { + background-image: url(/icons/user-link-github.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='linkedin.com/'] { + &::before { + background-image: url(/icons/user-link-linkedin.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='medium.com/'] { + &::before { + background-image: url(/icons/user-link-medium.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='ok.ru/'] { + &::before { + background-image: url(/icons/user-link-ok.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='pinterest.com/'] { + &::before { + background-image: url(/icons/user-link-pinterest.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='reddit.com/'] { + &::before { + background-image: url(/icons/user-link-reddit.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='tiktok.com/'] { + &::before { + background-image: url(/icons/user-link-tiktok.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='youtube.com/'], + &[href*='youtu.be/'] { + &::before { + background-image: url(/icons/user-link-youtube.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } + } + + &[href*='dzen.ru/'] { + &::before { + background-image: url(/icons/user-link-dzen.svg); + } + + &:hover { + .authorSubscribeSocialLabel { + display: none; + } + } } } -} - -.authorSubscribeSocialLabel { - display: none; -} - -.authorSubscribeSocial { - align-items: center; - display: flex; - margin: 0 0.8rem 2rem 0; @include media-breakpoint-down(sm) { flex: 1 100%; @@ -626,6 +626,7 @@ flex-wrap: wrap; font-size: 1.4rem; margin-top: 0.5rem; + gap: 1rem; @include media-breakpoint-down(md) { justify-content: center; diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx index ece9c456..7a301656 100644 --- a/src/components/Author/AuthorCard/AuthorCard.tsx +++ b/src/components/Author/AuthorCard/AuthorCard.tsx @@ -2,7 +2,7 @@ import type { Author } from '../../../graphql/types.gen' import { Userpic } from '../Userpic' import { Icon } from '../../_shared/Icon' import styles from './AuthorCard.module.scss' -import { createEffect, createMemo, createSignal, For, Show } from 'solid-js' +import { createEffect, createMemo, createSignal, For, Match, Show, Switch } from 'solid-js' import { translit } from '../../../utils/ru2en' import { follow, unfollow } from '../../../stores/zine/common' import { clsx } from 'clsx' @@ -15,11 +15,15 @@ import { useLocalize } from '../../../context/localize' import { ConditionalWrapper } from '../../_shared/ConditionalWrapper' import { Modal } from '../../Nav/Modal' import { showModal } from '../../../stores/ui' -import { getNumeralsDeclension } from '../../../utils/getNumeralsDeclension' import { SubscriptionFilter } from '../../../pages/types' import { isAuthor } from '../../../utils/isAuthor' import { AuthorBadge } from '../AuthorBadge' import { TopicBadge } from '../../Topic/TopicBadge' +import { Button } from '../../_shared/Button' +import { getShareUrl, SharePopup } from '../../Article/SharePopup' +import stylesHeader from '../../Nav/Header/Header.module.scss' +import { getDescription } from '../../../utils/meta' +import { Popover } from '../../_shared/Popover' type Props = { caption?: string @@ -43,6 +47,7 @@ type Props = { following?: Array showPublicationsCounter?: boolean hideBio?: boolean + isCurrentUser?: boolean } export const AuthorCard = (props: Props) => { @@ -130,7 +135,6 @@ export const AuthorCard = (props: Props) => { if (props.isAuthorPage && props.author.userpic?.includes('assets.discours.io')) { setUserpicUrl(props.author.userpic.replace('100x', '500x500')) } - return ( <>
{ } >
- 0}> -
{ - redirectPage(router, 'authorFollowers', { slug: props.author.slug }) - showModal('followers') - }} - > - - {(f) => } - -
- {props.followers.length}  - {getNumeralsDeclension(props.followers.length, [ - t('subscriber'), - t('subscriber_rp'), - t('subscribers') - ])} -
-
- - 0}> -
{ - redirectPage(router, 'authorFollowing', { slug: props.author.slug }) - showModal('following') - }} - > - - {(f) => { - if ('name' in f) { - return - } else if ('title' in f) { - return - } - return null + + 0 && !props.isCurrentUser}> +
{ + redirectPage(router, 'authorFollowers', { slug: props.author.slug }) + showModal('followers') }} - -
- {props.following.length}  - {getNumeralsDeclension(props.following.length, [ - t('subscription'), - t('subscription_rp'), - t('subscriptions') - ])} + > + + {(f) => } + +
+ {t('SubscriptionWithCount', { count: props.followers.length })} +
-
- + + 0 && props.isCurrentUser}> +
+
+ + {(link) => ( + + + {link.startsWith('http') ? link : `https://${link}`} + + + )} + +
- -
- - {(link) => ( - - {link} - - )} - -
- - { const { authorEntities } = useAuthorsStore({ authors: [props.author] }) const { page } = useRouter() + const { user } = useSession() const author = createMemo(() => authorEntities()[props.authorSlug]) const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) const [isBioExpanded, setIsBioExpanded] = createSignal(false) @@ -131,6 +133,7 @@ export const AuthorView = (props: Props) => { isAuthorPage={true} followers={followers()} following={following()} + isCurrentUser={author().slug === user()?.slug} />
@@ -139,13 +142,13 @@ export const AuthorView = (props: Props) => {