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 styles from './catalog-row.module.css';
import Markdown from '../markdown'; import Markdown from '../markdown';
import _ from 'lodash'; import _ from 'lodash';
import useWindowWidth from '../../hooks/use-window-width';
interface CatalogPostMediaProps { interface CatalogPostMediaProps {
commentMediaInfo: any; commentMediaInfo: any;
@@ -133,9 +134,10 @@ const CatalogPost = ({ post }: { post: Comment }) => {
const [hoveredCid, setHoveredCid] = useState<string | null>(null); const [hoveredCid, setHoveredCid] = useState<string | null>(null);
const [showPortal, setShowPortal] = useState<boolean>(false); const [showPortal, setShowPortal] = useState<boolean>(false);
const placementRef = useRef<Placement>('right-start'); const placementRef = useRef<Placement>('right-start');
const availableWidthRef = useRef<number>(0);
const timeoutRef = useRef<NodeJS.Timeout | null>(null); const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const windowWidth = useWindowWidth();
const { refs, floatingStyles, update } = useFloating({ const { refs, floatingStyles, update } = useFloating({
open: showPortal, open: showPortal,
placement: placementRef.current, placement: placementRef.current,
@@ -143,12 +145,26 @@ const CatalogPost = ({ post }: { post: Comment }) => {
shift({ padding: 10 }), shift({ padding: 10 }),
offset({ mainAxis: 5 }), offset({ mainAxis: 5 }),
size({ size({
apply({ availableWidth, elements }) { apply({ elements }) {
availableWidthRef.current = availableWidth; const referenceElement = refs.reference.current;
if (availableWidth >= 250) { if (referenceElement) {
elements.floating.style.maxWidth = `${availableWidth - 12}px`; const availableWidthToTheRight = windowWidth - (referenceElement.getBoundingClientRect().left + referenceElement.getBoundingClientRect().width);
} else if (placementRef.current === 'right-start') { const availableWidthToTheLeft = referenceElement.getBoundingClientRect().left;
placementRef.current = 'left-start'; 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(() => { useEffect(() => {
const handleResize = () => { update();
const availableWidth = availableWidthRef.current; }, [update, windowWidth]);
if (availableWidth >= 250) {
placementRef.current = 'right-start';
} else {
placementRef.current = 'left-start';
}
update();
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [update]);
const lastReply = useComment({ commentCid: lastChildCid }); const lastReply = useComment({ commentCid: lastChildCid });
@@ -248,7 +251,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
{(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)} {(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}
</div> </div>
</div> </div>
{hoveredCid === cid && {(hoveredCid === cid || isDescription) &&
showPortal && showPortal &&
createPortal( createPortal(
<div className={styles.postPreview} ref={refs.setFloating} style={floatingStyles}> <div className={styles.postPreview} ref={refs.setFloating} style={floatingStyles}>