diff --git a/src/components/Article/Comment.module.scss b/src/components/Article/Comment.module.scss index a74c1a51..786fe41d 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,10 +148,12 @@ } } } + .commentAuthor, .commentRating { @include font-size(1.2rem); } + .articleAuthor { color: #2638d9; font-size: 12px; @@ -173,33 +186,41 @@ } } } + .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.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..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' @@ -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?: { @@ -71,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 (
{
@@ -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..c3525a43 --- /dev/null +++ b/src/components/Feed/FeedArticlePopup.tsx @@ -0,0 +1,96 @@ +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 + 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/Button/Button.module.scss b/src/components/_shared/Button/Button.module.scss index a8d7e59b..50e510d7 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; } @@ -46,6 +50,7 @@ color: #9fa1a7; background: #f6f6f6; } + &.loading, &.loading:hover { background: #f6f6f6; 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}