update catalog

This commit is contained in:
Tom (plebeius.eth)
2024-12-24 18:10:16 +01:00
parent f533faf9f6
commit 20da674a1c
2 changed files with 42 additions and 23 deletions
@@ -13,7 +13,11 @@
padding: 10px 0 3px 0; padding: 10px 0 3px 0;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
}
.postContent {
overflow: hidden; overflow: hidden;
max-height: 155px;
} }
.large { .large {
@@ -145,4 +149,15 @@
.postPreview .capcode { .postPreview .capcode {
color: var(--catalog-post-preview-author-capcode-color); color: var(--catalog-post-preview-author-capcode-color);
} }
.xmasHat {
position: absolute;
top: 0;
left: 0;
width: 100px;
left: -10px;
margin-top: -55px;
z-index: 999;
box-shadow: none !important;
}
+26 -22
View File
@@ -19,6 +19,7 @@ import styles from './catalog-row.module.css';
import _ from 'lodash'; import _ from 'lodash';
import { ContentPreview } from '../../views/home/popular-threads-box'; import { ContentPreview } from '../../views/home/popular-threads-box';
import { useCommentMediaInfo } from '../../hooks/use-comment-media-info'; import { useCommentMediaInfo } from '../../hooks/use-comment-media-info';
import { shouldShowSnow } from '../../lib/snow';
interface CatalogPostMediaProps { interface CatalogPostMediaProps {
commentMediaInfo: any; commentMediaInfo: any;
@@ -228,27 +229,30 @@ const CatalogPost = ({ post }: { post: Comment }) => {
<span className={styles.hiddenThumbnail} /> <span className={styles.hiddenThumbnail} />
</Link> </Link>
) : hasThumbnail ? ( ) : hasThumbnail ? (
<Link to={postLink}> <>
<div {shouldShowSnow() && hasThumbnail && <img src={`${process.env.PUBLIC_URL}/assets/xmashat.gif`} className={styles.xmasHat} alt='' />}
className={`${styles.mediaPaddingWrapper} ${hidden && styles.hidden}`} <Link to={postLink}>
ref={refs.setReference} <div
onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))} className={`${styles.mediaPaddingWrapper} ${hidden && styles.hidden}`}
onMouseLeave={() => { ref={refs.setReference}
setShowPortal(false); onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))}
if (timeoutRef.current) { onMouseLeave={() => {
clearTimeout(timeoutRef.current); setShowPortal(false);
timeoutRef.current = null; if (timeoutRef.current) {
} clearTimeout(timeoutRef.current);
}} timeoutRef.current = null;
> }
{threadIcons} }}
{spoiler ? ( >
<img src='assets/spoiler.png' alt='' /> {threadIcons}
) : ( {spoiler ? (
<CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} /> <img src='assets/spoiler.png' alt='' />
)} ) : (
</div> <CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />
</Link> )}
</div>
</Link>
</>
) : ( ) : (
threadIcons threadIcons
)} )}
@@ -264,7 +268,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
<PostMenuDesktop post={post} /> <PostMenuDesktop post={post} />
</span> </span>
</div> </div>
{(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)} <div className={styles.postContent}>{(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}</div>
</div> </div>
</div> </div>
{(hoveredCid === cid || isDescription) && {(hoveredCid === cid || isDescription) &&