From aa45e4c96352bc690b4cea1b7b7027754047d47f Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sat, 10 Jun 2023 13:07:16 +0200 Subject: [PATCH] fix calculation --- src/components/views/All.jsx | 71 +++++++++++++------------- src/components/views/Board.jsx | 53 +++++++++---------- src/components/views/Subscriptions.jsx | 1 + src/components/views/Thread.jsx | 19 +++---- 4 files changed, 74 insertions(+), 70 deletions(-) diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index 62a2d8e0..a0a4a500 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -544,20 +544,20 @@ const All = () => { const rect = backlinkRefs.current[reply.cid].getBoundingClientRect(); const distanceToRight = window.innerWidth - rect.right; - if (distanceToRight < 200) { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left - }); + if (distanceToRight < 200) { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); - } else { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width - 5, - maxWidth: window.innerWidth - rect.left - rect.width - }); - } + } else { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width + 5 + }); + } }); }} onMouseLeave={() => { @@ -764,15 +764,15 @@ const All = () => { if (distanceToRight < 200) { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 }); } else { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width - 5, - maxWidth: window.innerWidth - rect.left - rect.width + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width + 5 }); } }); @@ -862,20 +862,20 @@ const All = () => { const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); const distanceToRight = window.innerWidth - rect.right; - if (distanceToRight < 200) { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left - }); - - } else { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width - 5, - maxWidth: window.innerWidth - rect.left - rect.width - }); - } + if (distanceToRight < 200) { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + + } else { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width + 5 + }); + } } }); }} @@ -912,15 +912,15 @@ const All = () => { if (distanceToRight < 200) { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 }); } else { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width - 5, - maxWidth: window.innerWidth - rect.left - rect.width + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width + 5 }); } } @@ -1303,6 +1303,7 @@ const All = () => { position: "absolute", top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, left: outOfViewPosition.left, + right: outOfViewPosition.right, maxWidth: outOfViewPosition.maxWidth, }} > diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index ea52f5ab..78a48391 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -997,15 +997,15 @@ const Board = () => { if (distanceToRight < 200) { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 }); } else { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width - 5, - maxWidth: window.innerWidth - rect.left - rect.width + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width + 5 }); } setOutOfViewCid(reply.cid); @@ -1247,15 +1247,15 @@ const Board = () => { if (distanceToRight < 200) { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 }); } else { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width - 5, - maxWidth: window.innerWidth - rect.left - rect.width + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width + 5 }); } }); @@ -1344,20 +1344,20 @@ const Board = () => { const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); const distanceToRight = window.innerWidth - rect.right; - if (distanceToRight < 200) { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left - }); - - } else { - setOutOfViewPosition({ - top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width - 5, - maxWidth: window.innerWidth - rect.left - rect.width - }); - } + if (distanceToRight < 200) { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + + } else { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width + 5 + }); + } } }); }} @@ -1401,15 +1401,15 @@ const Board = () => { if (distanceToRight < 200) { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 }); } else { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, - left: rect.left + rect.width - 5, - maxWidth: window.innerWidth - rect.left - rect.width + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width + 5 }); } } @@ -1800,6 +1800,7 @@ const Board = () => { position: "absolute", top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, left: outOfViewPosition.left, + right: outOfViewPosition.right, maxWidth: outOfViewPosition.maxWidth, }} > diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index 89abe401..a63d0c1c 100755 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -1308,6 +1308,7 @@ const Subscriptions = () => { position: "absolute", top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, left: outOfViewPosition.left, + right: outOfViewPosition.right, maxWidth: outOfViewPosition.maxWidth, }} > diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index c355050f..4c05f48b 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -953,15 +953,15 @@ const Thread = () => { if (distanceToRight < 200) { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 }); } else { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + maxWidth: window.innerWidth - rect.left - rect.width + 5 }); } }); @@ -1165,15 +1165,15 @@ const Thread = () => { if (distanceToRight < 200) { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 }); } else { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + maxWidth: window.innerWidth - rect.left - rect.width + 5 }); } }); @@ -1259,15 +1259,15 @@ const Thread = () => { if (distanceToRight < 200) { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, - left: rect.left - rect.innerWidth - 5, - maxWidth: rect.left + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 }); } else { setOutOfViewPosition({ top: rect.top + window.scrollY - rect.height / 2, left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width + maxWidth: window.innerWidth - rect.left - rect.width + 5 }); } } @@ -1680,6 +1680,7 @@ const Thread = () => { position: "absolute", top: outOfViewPosition.top - postOnHoverHeight / 2 + 10, left: outOfViewPosition.left, + right: outOfViewPosition.right, maxWidth: outOfViewPosition.maxWidth, }} >