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

improve catalog card hover

Browse Source
This commit is contained in:
plebeius.eth
2023-09-05 21:40:29 +02:00
parent 10a1b973de
commit 6b53ce6f7c
2 changed files with 51 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/views/Catalog.styled.jsx
+21 -21
View File
@@ -4,7 +4,7 @@ export const Threads = styled.div`
padding: 20px 0; padding: 20px 0;
text-align: center; text-align: center;
margin: 0; margin: 0;
overflow:hidden; overflow: hidden;
.thread { .thread {
width: 180px; width: 180px;
@@ -18,48 +18,49 @@ export const Threads = styled.div`
padding: 5px 0 3px; padding: 5px 0 3px;
} }
.thread_popup{ .thread_popup {
display: inline-block; display: inline-block;
height:auto; height: auto;
background-color:black; background-color: black;
position:absolute; position: absolute;
margin-top:0px; margin-top: 0px;
text-align:left; text-align: left;
z-index:10; z-index: 10;
transform:none; transform:none;
padding-left:5px;padding-right:5px; padding-left: 5px;
border-radius:3px; padding-right: 5px;
border-radius: 3px;
white-space: nowrap;
} }
.thread_popup_content { .thread_popup_content {
max-width: 500px;
margin: 5px 3px 2px 3px !important; margin: 5px 3px 2px 3px !important;
color: #dedede; color: #dedede;
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
white-space:nowrap; font-size: 13px;
font-size:13px;
} }
.thread_popup_lastReply{ .thread_popup_lastReply {
margin: 0px 4px 5px 4px !important; margin: 0px 4px 5px 4px !important;
color: #bbbfbd; color: #bbbfbd;
display: block; display: block;
width: auto;
min-width: 250px; min-width: 250px;
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size:90%; font-size: 90%;
} }
.thread_popup_title{ .thread_popup_title {
color:#a89baa color:#a89baa
} }
.thread_popup_author{ .thread_popup_author {
color:#519860;font-weight:bold color:#519860;
font-weight: bold
} }
.thread_popup_authorAdmin{ .thread_popup_authorAdmin {
color: purple; color: purple;
font-weight: 700; font-weight: 700;
} }
@@ -128,7 +129,6 @@ export const Threads = styled.div`
} }
.meta { .meta {
cursor: help;
font-size: 11px; font-size: 11px;
line-height: 8px; line-height: 8px;
margin-top: 2px; margin-top: 2px;
src/components/views/Catalog.jsx
+30 -21
View File
@@ -134,7 +134,6 @@ const CatalogPost = ({post}) => {
const handleMouseOnLeaveThread = () => { const handleMouseOnLeaveThread = () => {
setIsHoveringForMenu(false);
if (hoverTimeoutId) { if (hoverTimeoutId) {
clearTimeout(hoverTimeoutId); clearTimeout(hoverTimeoutId);
setHoverTimeoutId(null); setHoverTimeoutId(null);
@@ -350,13 +349,9 @@ const CatalogPost = ({post}) => {
<BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}} <BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}}
onMouseOver={() => { onMouseOver={() => {
setIsHoveringForMenu('rules'); setIsHoveringForMenu('rules');
if (!hoverTimeoutId) { handleMouseOnLeaveThread();
const timeoutId = setTimeout(() => { }}
setIsHoveringOnThread("rules"); onMouseLeave={() => setIsHoveringForMenu(false)}>
}, 250);
setHoverTimeoutId(timeoutId);
}
}}>
<div className='meta' title="(R)eplies / (L)ink Replies"> <div className='meta' title="(R)eplies / (L)ink Replies">
R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b> R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b>
<div className='thread-icons' <div className='thread-icons'
@@ -424,7 +419,8 @@ const CatalogPost = ({post}) => {
}, 250); }, 250);
setHoverTimeoutId(timeoutId); setHoverTimeoutId(timeoutId);
} }
}}> }}
onMouseLeave={() => setIsHoveringForMenu(false)}>
<div className="teaser" style={{maxHeight: '312px'}}> <div className="teaser" style={{maxHeight: '312px'}}>
<b>Rules</b> <b>Rules</b>
{": " + subplebbit.rules?.map((rule, index) => `${index + 1}. ${rule}`).join(' ')} {": " + subplebbit.rules?.map((rule, index) => `${index + 1}. ${rule}`).join(' ')}
@@ -459,6 +455,7 @@ const CatalogPost = ({post}) => {
setHoverTimeoutId(timeoutId); setHoverTimeoutId(timeoutId);
} }
}} }}
onMouseLeave={() => setIsHoveringForMenu(false)}
src={subplebbit.suggested.avatarUrl} alt="board avatar" /> src={subplebbit.suggested.avatarUrl} alt="board avatar" />
) : null} ) : null}
</Link> </Link>
@@ -475,13 +472,9 @@ const CatalogPost = ({post}) => {
<BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}} <BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}}
onMouseOver={() => { onMouseOver={() => {
setIsHoveringForMenu('description'); setIsHoveringForMenu('description');
if (!hoverTimeoutId) { handleMouseOnLeaveThread();
const timeoutId = setTimeout(() => { }}
setIsHoveringOnThread("description"); onMouseLeave={() => setIsHoveringForMenu(false)}>
}, 250);
setHoverTimeoutId(timeoutId);
}
}}>
<div className='meta' title="(R)eplies / (L)ink Replies"> <div className='meta' title="(R)eplies / (L)ink Replies">
R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b> R:&nbsp;<b>0</b>&nbsp;/&nbsp;L:&nbsp;<b>0</b>
{subplebbit.suggested?.avatarUrl ? null : ( {subplebbit.suggested?.avatarUrl ? null : (
@@ -579,7 +572,8 @@ const CatalogPost = ({post}) => {
}, 250); }, 250);
setHoverTimeoutId(timeoutId); setHoverTimeoutId(timeoutId);
} }
}}> }}
onMouseLeave={() => setIsHoveringForMenu(false)}>
<div className="teaser" style={{maxHeight: '170px'}}> <div className="teaser" style={{maxHeight: '170px'}}>
<b>Welcome to {subplebbit.title || subplebbit.address}!</b> <b>Welcome to {subplebbit.title || subplebbit.address}!</b>
{": " + subplebbit.description} {": " + subplebbit.description}
@@ -637,7 +631,12 @@ const CatalogPost = ({post}) => {
: null } : null }
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${selectedAddress}/c/${thread.cid}`} <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)} onMouseOver={() => setIsHoveringOnThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}
onMouseOver={() => {
setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid);
}}
onMouseLeave={() => setIsHoveringForMenu(false)}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? ( thread.thumbnailUrl ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
@@ -697,7 +696,12 @@ const CatalogPost = ({post}) => {
) : null} ) : null}
</div> </div>
) : null} ) : null}
<BoardForm selectedStyle={selectedStyle} onMouseOver={() => handleMouseOnLeaveThread()} <BoardForm selectedStyle={selectedStyle}
onMouseOver={() => {
setIsHoveringForMenu(thread.cid);
handleMouseOnLeaveThread();
}}
onMouseLeave={() => setIsHoveringForMenu(false)}
style={{ all: "unset"}}> style={{ all: "unset"}}>
<div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" > <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-`}>{thread.replyCount}</b> R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
@@ -723,7 +727,7 @@ const CatalogPost = ({post}) => {
</div> </div>
)} )}
<PostMenu <PostMenu
style={{ display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none', style={{ display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none', position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
zIndex: '999'}} zIndex: '999'}}
key={`pmb-`} key={`pmb-`}
@@ -861,7 +865,12 @@ const CatalogPost = ({post}) => {
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}> <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
<div style={{cursor:"text"}} <div style={{cursor:"text"}}
ref={(el) => (threadRefs.current[thread.cid] = el)}> ref={(el) => (threadRefs.current[thread.cid] = el)}>
<span key={`teaser-width${thread.cid}`} ref={textRef} onMouseOver={() => setIsHoveringOnThread(thread.cid)}> <span key={`teaser-width${thread.cid}`} ref={textRef}
onMouseOver={() => {
setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid);
}}
onMouseLeave={() => setIsHoveringForMenu(false)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b> <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null} {thread.content ? `: ${thread.content}` : null}
</span> </span>