update comment media

This commit is contained in:
Tom (plebeius.eth)
2025-03-07 19:42:30 +01:00
parent d42edcf7ff
commit 974a10442e
2 changed files with 9 additions and 2 deletions
@@ -65,6 +65,10 @@
float: left; float: left;
} }
.removeFloat {
float: none !important;
}
.thumbnail video { .thumbnail video {
cursor: pointer; cursor: pointer;
} }
@@ -155,14 +155,17 @@ const Image = ({ commentMediaInfo, displayHeight, displayWidth, isOutOfFeed, par
if (spoiler && !isImageExpanded) { if (spoiler && !isImageExpanded) {
const spoilerDimensions = { '--width': '150px', '--height': '150px' } as React.CSSProperties; const spoilerDimensions = { '--width': '150px', '--height': '150px' } as React.CSSProperties;
return ( return (
<span className={`${isOutOfFeed ? styles.subplebbitAvatar : styles.thumbnailBig} ${styles.thumbnail}`} style={spoilerDimensions}> <span
className={`${isOutOfFeed ? styles.subplebbitAvatar : styles.thumbnailBig} ${styles.thumbnail} ${isImageExpanded && isMobile ? styles.removeFloat : ''}`}
style={spoilerDimensions}
>
<img className={styles.spoiler} src='assets/spoiler.png' alt='' onClick={() => setIsImageExpanded(true)} /> <img className={styles.spoiler} src='assets/spoiler.png' alt='' onClick={() => setIsImageExpanded(true)} />
</span> </span>
); );
} }
return isMobile ? ( return isMobile ? (
<span className={styles.thumbnail}> <span className={`${styles.thumbnail} ${isImageExpanded && isMobile ? styles.removeFloat : ''}`}>
<span <span
className={isImageExpanded ? mediaClass : `${isOutOfFeed ? styles.subplebbitAvatar : styles.thumbnailSmall} ${thumbnailSmallPadding}`} className={isImageExpanded ? mediaClass : `${isOutOfFeed ? styles.subplebbitAvatar : styles.thumbnailSmall} ${thumbnailSmallPadding}`}
style={isImageExpanded ? {} : thumbnailDimensions} style={isImageExpanded ? {} : thumbnailDimensions}