fixed thread bottom bar

This commit is contained in:
plebbitor
2023-04-21 17:13:13 +02:00
parent 2ecc877968
commit 2ebee13bf6
2 changed files with 62 additions and 59 deletions
-1
View File
@@ -10,7 +10,6 @@ export const ReplyFormLink = styled.div`
} }
@media (max-width: 480px) { @media (max-width: 480px) {
display: ${props => (props.showReplyFormLink ? 'block' : 'none')};
#post-form-link-desktop { #post-form-link-desktop {
display: none; display: none;
+62 -58
View File
@@ -835,7 +835,7 @@ const Thread = () => {
</span> </span>
<span className="quickreply-button"> <span className="quickreply-button">
[ [
<Link to={() => {}} onClick={() => {}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</Link> <a onClick={() => {setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
] ]
</span> </span>
{comment.replyCount > 0 ? ( {comment.replyCount > 0 ? (
@@ -846,67 +846,71 @@ const Thread = () => {
<hr /> <hr />
</div> </div>
</BottomBar> </BottomBar>
<div id="bottombar-mobile"> {comment.replyCount > 5 ? (
<TopBar selectedStyle={selectedStyle}> <div id="bottombar-mobile">
<hr /> <TopBar selectedStyle={selectedStyle} style={{marginTop: "20px"}}>
<span className="style-changer"> <hr />
Style: <span className="style-changer">
  Style:
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>  
<option value="Yotsuba">Yotsuba</option> <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba-B">Yotsuba B</option> <option value="Yotsuba">Yotsuba</option>
<option value="Futaba">Futaba</option> <option value="Yotsuba-B">Yotsuba B</option>
<option value="Burichan">Burichan</option> <option value="Futaba">Futaba</option>
<option value="Tomorrow">Tomorrow</option> <option value="Burichan">Burichan</option>
<option value="Photon">Photon</option> <option value="Tomorrow">Tomorrow</option>
</select> <option value="Photon">Photon</option>
</span> </select>
{comment ? ( </span>
comment.replyCount !== undefined ? ( {comment ? (
comment.replyCount > 0 ? ( comment.replyCount !== undefined ? (
comment.replyCount === 1 ? ( comment.replyCount > 0 ? (
<span className="reply-stat">{comment.replyCount} reply</span> comment.replyCount === 1 ? (
<span className="reply-stat">{comment.replyCount} reply</span>
) : (
<span className="reply-stat">{comment.replyCount} replies</span>
)
) : (
<span className="reply-stat">No replies yet</span>
)
) : ( ) : (
<span className="reply-stat">{comment.replyCount} replies</span> <span className="reply-stat">Loading...</span>
) )
) : ( ) : (
<span className="reply-stat">No replies yet</span> null
) )}
) : ( <hr />
<span className="reply-stat">Loading...</span> </TopBar>
) <ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} >
) : ( <div id="post-form-link-mobile" className="post-button-mobile">
null <span className="btn-wrap">
)} <a onClick={() => {setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
<hr /> </span>
</TopBar> </div>
<ReplyFormLink id="post-form-link" selectedStyle={selectedStyle} > <div id="btns-container">
<div id="post-form-link-mobile" className="post-button-mobile"> <div id="return-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a> <Link to={`/p/${selectedAddress}`}>Return</Link>
</span> </span>
</div>
<div id="catalog-button-mobile" style={{paddingRight: "2px"}}>
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
</span>
</div>
<span className="bottom-bar-top">
<span className="btn-wrap">
<a onClick={() => window.scrollTo(0, 0)}
onMouseOver={(event) => event.target.style.cursor='pointer'}
onTouchStart={() => window.scrollTo(0, 0)}
style={{marginRight: "10px", marginLeft: "10px"}}
>Top</a>
</span>
</span>
</div>
</ReplyFormLink>
</div> </div>
<div id="btns-container"> ) : (null)}
<div id="return-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}`}>Return</Link>
</span>
</div>
<div id="catalog-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
</span>
</div>
<span className="bottom-bar-top">
<span className="btn-wrap">
<a onClick={() => window.scrollTo(0, 0)}
onMouseOver={(event) => event.target.style.cursor='pointer'}
onTouchStart={() => window.scrollTo(0, 0)}>Top</a>
</span>
</span>
</div>
</ReplyFormLink>
</div>
</> </>
) : ( ) : (
<PostLoader /> <PostLoader />