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}