External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(catalog post): floating post preview was not visible on mobile

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-07-01 19:00:54 +02:00
parent eb6751ab25
commit 38e1c78654
1 changed files with 26 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/catalog-row/catalog-row.tsx
+26 -23
View File
@@ -16,6 +16,7 @@ import PostMenuDesktop from '../post-desktop/post-menu-desktop';
import styles from './catalog-row.module.css';
import Markdown from '../markdown';
import _ from 'lodash';
import useWindowWidth from '../../hooks/use-window-width';
interface CatalogPostMediaProps {
commentMediaInfo: any;
@@ -133,9 +134,10 @@ const CatalogPost = ({ post }: { post: Comment }) => {
const [hoveredCid, setHoveredCid] = useState<string | null>(null);
const [showPortal, setShowPortal] = useState<boolean>(false);
const placementRef = useRef<Placement>('right-start');
const availableWidthRef = useRef<number>(0);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const windowWidth = useWindowWidth();
const { refs, floatingStyles, update } = useFloating({
open: showPortal,
placement: placementRef.current,
@@ -143,12 +145,26 @@ const CatalogPost = ({ post }: { post: Comment }) => {
shift({ padding: 10 }),
offset({ mainAxis: 5 }),
size({
apply({ availableWidth, elements }) {
availableWidthRef.current = availableWidth;
if (availableWidth >= 250) {
elements.floating.style.maxWidth = `${availableWidth - 12}px`;
} else if (placementRef.current === 'right-start') {
placementRef.current = 'left-start';
apply({ elements }) {
const referenceElement = refs.reference.current;
if (referenceElement) {
const availableWidthToTheRight = windowWidth - (referenceElement.getBoundingClientRect().left + referenceElement.getBoundingClientRect().width);
const availableWidthToTheLeft = referenceElement.getBoundingClientRect().left;
const minWidth = windowWidth * 0.25;
if (availableWidthToTheRight >= minWidth) {
placementRef.current = 'right-start';
elements.floating.style.maxWidth = `${availableWidthToTheRight - 40}px`;
} else if (availableWidthToTheLeft >= minWidth) {
placementRef.current = 'left-start';
elements.floating.style.maxWidth = `${availableWidthToTheLeft - 25}px`;
} else if (availableWidthToTheRight > availableWidthToTheLeft) {
placementRef.current = 'right-start';
elements.floating.style.maxWidth = `${availableWidthToTheRight - 40}px`;
} else {
placementRef.current = 'left-start';
elements.floating.style.maxWidth = `${availableWidthToTheLeft - 25}px`;
}
}
},
}),
@@ -157,21 +173,8 @@ const CatalogPost = ({ post }: { post: Comment }) => {
});
useEffect(() => {
const handleResize = () => {
const availableWidth = availableWidthRef.current;
if (availableWidth >= 250) {
placementRef.current = 'right-start';
} else {
placementRef.current = 'left-start';
}
update();
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [update]);
update();
}, [update, windowWidth]);
const lastReply = useComment({ commentCid: lastChildCid });
@@ -248,7 +251,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
{(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}
</div>
</div>
{hoveredCid === cid &&
{(hoveredCid === cid || isDescription) &&
showPortal &&
createPortal(
<div className={styles.postPreview} ref={refs.setFloating} style={floatingStyles}>