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

fix(post mobile): tooltip for title wasn't centered

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-09-04 16:35:47 +02:00
parent fcd1ce65fb
commit ca0020f2c5
2 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-mobile/post-mobile.tsx
+12 -9
View File
@@ -130,15 +130,18 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
<img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} /> <img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
</span> </span>
)} )}
{title && {title && (
(title.length <= 30 ? ( <span className={styles.subjectWrapper}>
<span className={styles.subject}>{title}</span> {title.length <= 30 ? (
) : ( <span className={styles.subject}>{title}</span>
<Tooltip ) : (
children={<span className={styles.subject}>{title.slice(0, 30) + '(...)'}</span>} <Tooltip
content={title.length < 1000 ? title : title.slice(0, 1000) + `... ${t('title_too_long')}`} children={<span className={styles.subject}>{title.slice(0, 30) + '(...)'}</span>}
/> content={title.length < 1000 ? title : title.slice(0, 1000) + `... ${t('title_too_long')}`}
))} />
)}
</span>
)}
</span> </span>
<span className={styles.dateTimePostNum}> <span className={styles.dateTimePostNum}>
{subplebbitAddress && (isInAllView || isInSubscriptionsView) && !isReply && ( {subplebbitAddress && (isInAllView || isInSubscriptionsView) && !isReply && (
src/views/post/post.module.css
+4 -1
View File
@@ -303,13 +303,16 @@
padding: 0 13px; padding: 0 13px;
} }
.postMobile .nameBlock .subjectWrapper {
display: block;
}
.postMobile .nameBlock .subject { .postMobile .nameBlock .subject {
color: var(--post-mobile-subject-text-color); color: var(--post-mobile-subject-text-color);
font-weight: var(--post-mobile-subject-font-weight); font-weight: var(--post-mobile-subject-font-weight);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: block;
} }
.postMobile .dateTimePostNum { .postMobile .dateTimePostNum {