From 0d0494a83a6b8251bc9e60a09f0e2911b4791197 Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Tue, 7 Feb 2023 00:35:08 +0300 Subject: [PATCH 1/2] Feed article actions popup --- src/components/Feed/Card.module.scss | 15 ++++- src/components/Feed/Card.tsx | 16 ++++- .../Feed/FeedArticlePopup.module.scss | 21 +++++++ src/components/Feed/FeedArticlePopup.tsx | 60 +++++++++++++++++++ src/components/_shared/Popup/Popup.tsx | 3 +- 5 files changed, 108 insertions(+), 7 deletions(-) create mode 100644 src/components/Feed/FeedArticlePopup.module.scss create mode 100644 src/components/Feed/FeedArticlePopup.tsx diff --git a/src/components/Feed/Card.module.scss b/src/components/Feed/Card.module.scss index 1040119a..4b88965d 100644 --- a/src/components/Feed/Card.module.scss +++ b/src/components/Feed/Card.module.scss @@ -411,20 +411,25 @@ } .shoutCardDetails { - border-top: 3px solid #141414; + align-items: flex-start; + border-top: 2px solid #141414; display: flex; justify-content: space-between; flex-wrap: wrap; @include font-size(1.5rem); margin-top: 1em; - padding: 1em 0 1.5em; + padding: 1em 0 0; position: relative; width: 100%; - z-index: 2; + z-index: 3; } .shoutCardDetailsContent { display: flex; + + &:first-child { + padding: 0 1em 1em 0; + } } .shoutCardDetailsItem { @@ -465,6 +470,10 @@ &:hover { background: none; color: rgb(0 0 0 / 60%); + + img { + filter: none; + } } } } diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx index 44d9d88a..8de609db 100644 --- a/src/components/Feed/Card.tsx +++ b/src/components/Feed/Card.tsx @@ -12,6 +12,7 @@ import { RatingControl } from '../Article/RatingControl' import { getShareUrl, SharePopup } from '../Article/SharePopup' import stylesHeader from '../Nav/Header.module.scss' import { getDescription } from '../../utils/meta' +import { FeedArticlePopup } from './FeedArticlePopup' interface ArticleCardProps { settings?: { @@ -207,9 +208,18 @@ export const ArticleCard = (props: ArticleCardProps) => {
- + + + + } + />
diff --git a/src/components/Feed/FeedArticlePopup.module.scss b/src/components/Feed/FeedArticlePopup.module.scss new file mode 100644 index 00000000..829ac58b --- /dev/null +++ b/src/components/Feed/FeedArticlePopup.module.scss @@ -0,0 +1,21 @@ +.feedArticlePopup { + box-shadow: none !important; + border: 1px solid rgb(0 0 0 / 0.15); + border-radius: 1.6rem; + padding: 1.6rem !important; + + @include media-breakpoint-between(sm, md) { + left: auto !important; + right: 0; + transform: none !important; + } + + button { + color: #696969; + + &:hover { + background: #000; + color: #fff; + } + } +} diff --git a/src/components/Feed/FeedArticlePopup.tsx b/src/components/Feed/FeedArticlePopup.tsx new file mode 100644 index 00000000..133ab3fe --- /dev/null +++ b/src/components/Feed/FeedArticlePopup.tsx @@ -0,0 +1,60 @@ +import styles from './FeedArticlePopup.module.scss' +import type { PopupProps } from '../_shared/Popup' +import { Popup } from '../_shared/Popup' + +type FeedArticlePopupProps = { + title: string + shareUrl?: string + imageUrl: string + description: string +} & Omit + +export const getShareUrl = (params: { pathname?: string } = {}) => { + if (typeof location === 'undefined') return '' + const pathname = params.pathname ?? location.pathname + return location.origin + pathname +} + +export const FeedArticlePopup = (props: FeedArticlePopupProps) => { + return ( + +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ + ) +} diff --git a/src/components/_shared/Popup/Popup.tsx b/src/components/_shared/Popup/Popup.tsx index 3b32d760..8a1e6935 100644 --- a/src/components/_shared/Popup/Popup.tsx +++ b/src/components/_shared/Popup/Popup.tsx @@ -8,6 +8,7 @@ type HorizontalAnchor = 'center' | 'right' export type PopupProps = { containerCssClass?: string + popupCssClass?: string trigger: JSX.Element children: JSX.Element onVisibilityChange?: (isVisible) => void @@ -40,7 +41,7 @@ export const Popup = (props: PopupProps) => { {props.trigger}
Date: Tue, 7 Feb 2023 14:20:07 +0100 Subject: [PATCH 2/2] code review --- src/components/Article/Comment.module.scss | 22 +++++++ src/components/Feed/Card.tsx | 16 ++--- src/components/Feed/FeedArticlePopup.tsx | 64 +++++++++++++++---- .../_shared/Button/Button.module.scss | 5 ++ src/locales/ru.json | 6 +- 5 files changed, 90 insertions(+), 23 deletions(-) diff --git a/src/components/Article/Comment.module.scss b/src/components/Article/Comment.module.scss index e5c93741..7a48dec2 100644 --- a/src/components/Article/Comment.module.scss +++ b/src/components/Article/Comment.module.scss @@ -37,6 +37,7 @@ display: none; } } + .shout-body { @include font-size(1.5rem); margin-bottom: 1em; @@ -44,11 +45,13 @@ margin-bottom: 0; } } + .author { align-items: center; margin-bottom: 1.4rem; } } + .commentContent { &:hover { .commentControlReply, @@ -60,11 +63,13 @@ } } } + .commentControls { @include font-size(1.2rem); margin-bottom: 0.5em; } + .commentControlReply, .commentControlShare, .commentControlDelete, @@ -75,6 +80,7 @@ transition: opacity 0.3s; } } + .commentControlReply, .commentControlShare, .commentControlDelete, @@ -84,6 +90,7 @@ width: 1.2rem; } } + .commentControl { border: none; color: #696969; @@ -94,6 +101,7 @@ padding: 0.2em 0.3em; transition: opacity 0.2s, color 0.3s, background-color 0.3s; vertical-align: top; + &:hover { background: #000; color: #fff; @@ -102,6 +110,7 @@ opacity: 1; } } + .icon { filter: invert(0); margin-right: 0.3em; @@ -112,12 +121,14 @@ } } } + .commentControlReply { .icon { height: 1.2em; width: 1.2em; } } + .commentBody { @include font-size(1.5rem); @@ -137,16 +148,19 @@ } } } + .commentAuthor, .commentDate, .commentRating { @include font-size(1.2rem); } + .articleAuthor { color: #2638d9; font-size: 12px; margin-right: 12px; } + .commentDate { color: rgb(0 0 0 / 30%); flex: 1; @@ -154,33 +168,41 @@ margin-left: 1rem; } } + .commentDetails { display: flex; margin-bottom: 1.2rem; } + .commentRating { align-items: center; display: flex; font-weight: bold; } + .commentRatingValue { padding: 0 0.3em; } + .commentRatingPositive { color: #2bb452; } + .commentRatingNegative { color: #d00820; } + .commentRatingControl { border-left: 6px solid transparent; border-right: 6px solid transparent; height: 0; width: 0; } + .commentRatingControlUp { border-bottom: 8px solid rgb(0 0 0 / 40%); } + .commentRatingControlDown { border-top: 8px solid rgb(0 0 0 / 40%); } diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx index 8de609db..ccc8de07 100644 --- a/src/components/Feed/Card.tsx +++ b/src/components/Feed/Card.tsx @@ -1,5 +1,5 @@ import { t } from '../../utils/intl' -import { createMemo, createSignal, For, onMount, Show } from 'solid-js' +import { createMemo, For, Show } from 'solid-js' import type { Shout } from '../../graphql/types.gen' import { capitalize } from '../../utils' import { translit } from '../../utils/ru2en' @@ -72,7 +72,7 @@ export const ArticleCard = (props: ArticleCardProps) => { const { title, subtitle } = getTitleAndSubtitle(props.article) - const { cover, layout, slug, authors, stat } = props.article + const { cover, layout, slug, authors, stat, body } = props.article return (
{
@@ -210,9 +210,9 @@ export const ArticleCard = (props: ArticleCardProps) => {
diff --git a/src/components/Feed/FeedArticlePopup.tsx b/src/components/Feed/FeedArticlePopup.tsx index 133ab3fe..c3525a43 100644 --- a/src/components/Feed/FeedArticlePopup.tsx +++ b/src/components/Feed/FeedArticlePopup.tsx @@ -1,6 +1,7 @@ import styles from './FeedArticlePopup.module.scss' import type { PopupProps } from '../_shared/Popup' import { Popup } from '../_shared/Popup' +import { t } from '../../utils/intl' type FeedArticlePopupProps = { title: string @@ -20,38 +21,73 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
  • -
  • -
  • -
  • -
  • -
  • -
  • -
diff --git a/src/components/_shared/Button/Button.module.scss b/src/components/_shared/Button/Button.module.scss index 68515649..f1e08220 100644 --- a/src/components/_shared/Button/Button.module.scss +++ b/src/components/_shared/Button/Button.module.scss @@ -8,9 +8,11 @@ &.primary { background: #000; color: #fff; + &:hover { color: #ccc; } + &:active { color: #9fa1a7; } @@ -19,9 +21,11 @@ &.secondary { background: #f7f7f7; color: #141414; + &:hover { background: #e8e8e8; } + &:active { background: #ccc; } @@ -33,6 +37,7 @@ color: #9fa1a7; background: #f6f6f6; } + &.loading, &.loading:hover { background: #f6f6f6; diff --git a/src/locales/ru.json b/src/locales/ru.json index 6164cfaf..cd78234d 100644 --- a/src/locales/ru.json +++ b/src/locales/ru.json @@ -222,5 +222,9 @@ "Write a comment...": "Написать комментарий...", "Add comment": "Комментировать", "My subscriptions": "Подписки", - "Nothing here yet": "Здесь пока ничего нет" + "Nothing here yet": "Здесь пока ничего нет", + "Invite experts": "Пригласить экспертов", + "Subscribe to comments": "Подписаться на комментарии", + "Add to bookmarks": "Добавить в закладки", + "Get notifications": "Получать уведомления" }