diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index f1bc7a1d..30a19bde 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -1,12 +1,12 @@
import { Link, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Comment } from '@plebbit/plebbit-react-hooks';
+import styles from './catalog-row.module.css';
import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
import { isAllView } from '../../lib/utils/view-utils';
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
-import styles from './catalog-row.module.css';
-import PostMenu from '../post/post-menu/post-menu';
+import PostMenuDesktop from '../post/post-desktop/post-menu-desktop/';
export const CatalogPostMedia = ({ commentMediaInfo }: { commentMediaInfo: any }) => {
const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
@@ -93,7 +93,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
)}
-
+
diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx
index 0e1f3eb8..b65e8eee 100644
--- a/src/components/post/post-desktop/post-desktop.tsx
+++ b/src/components/post/post-desktop/post-desktop.tsx
@@ -4,6 +4,7 @@ import { useLocation, useParams } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { useAccount } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import styles from '../post.module.css';
import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils';
import { getFormattedDate } from '../../../lib/utils/time-utils';
import { isValidURL } from '../../../lib/utils/url-utils';
@@ -15,9 +16,8 @@ import CommentMedia from '../../comment-media';
import { canEmbed } from '../../embed';
import LoadingEllipsis from '../../loading-ellipsis';
import Markdown from '../../markdown';
+import PostMenuDesktop from './post-menu-desktop/';
import { PostProps } from '../post';
-import styles from '../post.module.css';
-import PostMenu from '../post-menu';
import _ from 'lodash';
const PostInfo = ({ openReplyModal, post, roles }: PostProps) => {
@@ -102,7 +102,7 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => {
)}
-
+
);
};
diff --git a/src/components/post/post-desktop/post-menu-desktop/index.ts b/src/components/post/post-desktop/post-menu-desktop/index.ts
new file mode 100644
index 00000000..54cc808b
--- /dev/null
+++ b/src/components/post/post-desktop/post-menu-desktop/index.ts
@@ -0,0 +1 @@
+export { default } from './post-menu-desktop';
diff --git a/src/components/post/post-menu/post-menu.module.css b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.module.css
similarity index 73%
rename from src/components/post/post-menu/post-menu.module.css
rename to src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.module.css
index 451151f5..1a48bec9 100644
--- a/src/components/post/post-menu/post-menu.module.css
+++ b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.module.css
@@ -1,8 +1,8 @@
.postMenu {
position: absolute;
- background-color: var(--post-menu-background-color);
- border-bottom: var(--post-menu-border-bottom);
- border-right: var(--post-menu-border-right);
+ background-color: var(--post-menu-desktop-background-color);
+ border-bottom: var(--post-menu-desktop-border-bottom);
+ border-right: var(--post-menu-desktop-border-right);
outline: none;
z-index: 2;
}
@@ -14,7 +14,7 @@
}
.postMenuBtn {
- color: var(--post-menu-button-color);
+ color: var(--post-menu-desktop-button-color);
transition: transform 0.1s;
transform: rotate(90deg);
position: absolute;
@@ -23,19 +23,19 @@
.postMenuBtn:hover {
cursor: pointer;
- color: var(--post-menu-button-color-hover);
+ color: var(--post-menu-desktop-button-color-hover);
}
.postMenuItem {
cursor: pointer;
padding: 2px 4px;
- border: 1px solid var(--post-menu-item-border-color);
- background-color: var(--post-menu-item-background-color);
+ border: 1px solid var(--post-menu-desktop-item-border-color);
+ background-color: var(--post-menu-desktop-item-background-color);
border-bottom: none;
}
.postMenuItem:hover {
- background-color: var(--post-menu-item-hover-background-color);
+ background-color: var(--post-menu-desktop-item-hover-background-color);
}
.dropdown {
@@ -47,8 +47,8 @@
left: 100%;
top: -1px;
display: none;
- border-bottom: var(--post-menu-border-bottom);
- border-right: var(--post-menu-border-right);
+ border-bottom: var(--post-menu-desktop-border-bottom);
+ border-right: var(--post-menu-desktop-border-right);
}
.dropdown a {
@@ -107,7 +107,7 @@
@media (min-width: 640px) {
.postMenuBtn {
right: -2px;
- opacity: var(--post-menu-btn-opacity);
+ opacity: var(--post-menu-desktop-btn-opacity);
}
.stickyIconWrapper {
diff --git a/src/components/post/post-menu/post-menu.tsx b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
similarity index 92%
rename from src/components/post/post-menu/post-menu.tsx
rename to src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
index 944c9097..6c19f7ff 100644
--- a/src/components/post/post-menu/post-menu.tsx
+++ b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
@@ -3,12 +3,12 @@ import { createPortal } from 'react-dom';
import { useLocation } from 'react-router-dom';
import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
import { Comment } from '@plebbit/plebbit-react-hooks';
-import styles from './post-menu.module.css';
-import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
-import { copyShareLinkToClipboard, isValidURL } from '../../../lib/utils/url-utils';
-import { isCatalogView } from '../../../lib/utils/view-utils';
+import styles from './post-menu-desktop.module.css';
+import { getCommentMediaInfo } from '../../../../lib/utils/media-utils';
+import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils';
+import { isCatalogView } from '../../../../lib/utils/view-utils';
-interface PostMenuProps {
+interface PostMenuDesktopProps {
cid: string;
isDescription?: boolean;
isRules?: boolean;
@@ -16,7 +16,7 @@ interface PostMenuProps {
onClose: () => void;
}
-const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuProps) => {
+const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuDesktopProps) => {
return (
{
@@ -63,7 +63,7 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
);
};
-const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuProps) => {
+const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuDesktopProps) => {
const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`;
@@ -95,7 +95,7 @@ const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose
);
};
-const PostMenu = ({ post }: { post: Comment }) => {
+const PostMenuDesktop = ({ post }: { post: Comment }) => {
const { cid, isDescription, isRules, link, subplebbitAddress } = post;
const commentMediaInfo = getCommentMediaInfo(post);
const { thumbnail, type, url } = commentMediaInfo || {};
@@ -145,4 +145,4 @@ const PostMenu = ({ post }: { post: Comment }) => {
);
};
-export default PostMenu;
+export default PostMenuDesktop;
diff --git a/src/components/post/post-menu/index.ts b/src/components/post/post-menu/index.ts
deleted file mode 100644
index 7c04c4cc..00000000
--- a/src/components/post/post-menu/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './post-menu';
diff --git a/src/components/post/post-mobile/post-menu-mobile/index.ts b/src/components/post/post-mobile/post-menu-mobile/index.ts
new file mode 100644
index 00000000..6fccc4be
--- /dev/null
+++ b/src/components/post/post-mobile/post-menu-mobile/index.ts
@@ -0,0 +1 @@
+export { default } from './post-menu-mobile';
diff --git a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css
new file mode 100644
index 00000000..bbcee2bd
--- /dev/null
+++ b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css
@@ -0,0 +1,37 @@
+.postMenuBtn {
+ color: var(--post-mobile-menu-button-color);
+ line-height: 1em;
+ width: 1em;
+ text-align: center;
+ transition: transform 0.1s;
+ transform: rotate(90deg);
+ -webkit-transform: rotate(90deg);
+ float: left;
+ font-weight: 700;
+ font-size: 16px;
+ height: 100%;
+}
+
+.postMenu {
+ font-size: 16px;
+ line-height: 2.5em;
+ background-color: var(--post-menu-mobile-background-color);
+ border: var(--post-menu-mobile-border);
+ border-right-width: var(---post-menu-mobile-border-right-width);
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ white-space: nowrap;
+}
+
+.postMenuItem {
+ cursor: pointer;
+ position: relative;
+ padding: 2px 4px;
+ vertical-align: middle;
+ border-bottom: var(--post-menu-mobile-item-border-bottom);
+}
+
+.postMenuItem:hover {
+ background-color: var(--post-menu-mobile-item-hover-background-color);
+}
\ No newline at end of file
diff --git a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
new file mode 100644
index 00000000..2d79a22a
--- /dev/null
+++ b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
+import { Comment } from '@plebbit/plebbit-react-hooks';
+import styles from './post-menu-mobile.module.css';
+
+const PostMenuMobile = ({ post }: { post: Comment }) => {
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+ const { refs, floatingStyles, context } = useFloating({
+ placement: 'bottom-start',
+ open: isMenuOpen,
+ onOpenChange: setIsMenuOpen,
+ middleware: [offset({ mainAxis: 3, crossAxis: 8 }), flip(), shift({ padding: 10 })],
+ whileElementsMounted: autoUpdate,
+ });
+ const click = useClick(context);
+ const dismiss = useDismiss(context);
+ const role = useRole(context);
+ const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
+ const headingId = useId();
+
+ return (
+ <>
+
setIsMenuOpen((prev) => !prev)} ref={refs.setReference} {...getReferenceProps()}>
+ ...
+
+ {isMenuOpen &&
+ createPortal(
+
+
+
Copy link
+
Search image on Google
+
Search image on Yandex
+
Search image on SauceNAO
+
View on Seedit
+
View on Plebones
+
+ ,
+ document.body,
+ )}
+ >
+ );
+};
+
+export default PostMenuMobile;
diff --git a/src/components/post/post-mobile/post-mobile.tsx b/src/components/post/post-mobile/post-mobile.tsx
index 3ad4c4ed..ec01f7c9 100644
--- a/src/components/post/post-mobile/post-mobile.tsx
+++ b/src/components/post/post-mobile/post-mobile.tsx
@@ -3,6 +3,7 @@ import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { useAccount } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import styles from '../post.module.css';
import { getCommentMediaInfo, getHasThumbnail } from '../../../lib/utils/media-utils';
import { getFormattedDate } from '../../../lib/utils/time-utils';
import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
@@ -12,8 +13,8 @@ import useStateString from '../../../hooks/use-state-string';
import CommentMedia from '../../comment-media';
import LoadingEllipsis from '../../loading-ellipsis';
import Markdown from '../../markdown';
+import PostMenuMobile from './post-menu-mobile';
import { PostProps } from '../post';
-import styles from '../post.module.css';
import _ from 'lodash';
const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
@@ -45,9 +46,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
return (
<>
-
- ...
-
+
{shortDisplayName || _.capitalize(t('anonymous'))}
diff --git a/src/themes.css b/src/themes.css
index 17b53f88..92b938ea 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -127,6 +127,13 @@
--post-menu-desktop-item-background-color: #f0e0d6;
--post-menu-desktop-item-hover-background-color: #ffe;
+ /* post menu mobile */
+ --post-menu-mobile-background-color: #f0e0d6;
+ --post-menu-mobile-border: 1px solid #d9bfb7;
+ --post-menu-mobile-border-right-width: 2px;
+ --post-menu-mobile-item-border-bottom: 1px solid #d9bfb7;
+ --post-menu-mobile-item-hover-background-color: #ffe;
+
/* post mobile */
--post-mobile-background-color: #f5e9e1;
--post-mobile-info-border-bottom: 1px solid #d9bfb7;
@@ -305,6 +312,13 @@
--post-menu-desktop-item-background-color: #d6daf0;
--post-menu-desktop-item-hover-background-color: #eef2ff;
+ /* post menu mobile */
+ --post-menu-mobile-background-color: #d6daf0;
+ --post-menu-mobile-border: 1px solid #b7c5d9;
+ --post-menu-mobile-border-right-width: 2px;
+ --post-menu-mobile-item-border-bottom: 1px solid #b7c5d9;
+ --post-menu-mobile-item-hover-background-color: #eef2ff;
+
/* post mobile */
--post-mobile-background-color: #d6daf0;
--post-mobile-info-border-bottom: 1px solid #b7c5d9;
@@ -453,6 +467,13 @@
--post-menu-desktop-item-background-color: #f0e0d6;
--post-menu-desktop-item-hover-background-color: #ffe;
+ /* post menu mobile */
+ --post-menu-mobile-background-color: #f0e0d6;
+ --post-menu-mobile-border: 1px solid #d9bfb7;
+ --post-menu-mobile-border-right-width: 2px;
+ --post-menu-mobile-item-border-bottom: 1px solid #d9bfb7;
+ --post-menu-mobile-item-hover-background-color: #ffe;
+
/* post mobile */
--post-mobile-background-color: #f5e9e1;
--post-mobile-info-border-bottom: 1px solid #d9bfb7;
@@ -610,6 +631,13 @@
--post-menu-desktop-item-background-color: #d6daf0;
--post-menu-desktop-item-hover-background-color: #eef2ff;
+ /* post menu mobile */
+ --post-menu-mobile-background-color: #d6daf0;
+ --post-menu-mobile-border: 1px solid #b7c5d9;
+ --post-menu-mobile-border-right-width: 2px;
+ --post-menu-mobile-item-border-bottom: 1px solid #b7c5d9;
+ --post-menu-mobile-item-hover-background-color: #eef2ff;
+
/* post mobile */
--post-mobile-background-color: #d6daf0;
--post-mobile-info-border-bottom: 1px solid #b7c5d9;
@@ -775,6 +803,13 @@
--post-menu-desktop-item-background-color: #282a2e;
--post-menu-desktop-item-hover-background-color: #1d1f21;
+ /* post menu mobile */
+ --post-menu-mobile-background-color: #282a2e;
+ --post-menu-mobile-border: 1px solid #000;
+ --post-menu-mobile-border-right-width: 2px;
+ --post-menu-mobile-item-border-bottom: 1px solid #000;
+ --post-menu-mobile-item-hover-background-color: #1d1f21;
+
/* post mobile */
--post-mobile-background-color: #282A2E;
--post-mobile-info-border-top: 1px solid #2D2F33;
@@ -959,6 +994,13 @@
--post-menu-desktop-item-background-color: #ddd;
--post-menu-desktop-item-hover-background-color: #eee;
+ /* post menu mobile */
+ --post-menu-mobile-background-color: #ddd;
+ --post-menu-mobile-border: 1px solid #ccc;
+ --post-menu-mobile-border-right-width: 2px;
+ --post-menu-mobile-item-border-bottom: 1px solid #ccc;
+ --post-menu-mobile-item-hover-background-color: #eee;
+
/* quotelink */
--post-quotelink-text-color: #f60;
--post-quotelink-text-color-hover: #f30;