make links small when title wraps

This commit is contained in:
keyan 2021-09-15 18:42:44 -05:00
parent d70a85f5c6
commit 31b479d1b6
2 changed files with 19 additions and 4 deletions

View File

@ -3,7 +3,7 @@ import styles from './item.module.css'
import { timeSince } from '../lib/time'
import UpVote from './upvote'
import { useMe } from './me'
import { useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import Countdown from './countdown'
import { NOFOLLOW_LIMIT } from '../lib/constants'
@ -13,6 +13,15 @@ export default function Item ({ item, rank, children }) {
const editThreshold = new Date(item.createdAt).getTime() + 10 * 60000
const [canEdit, setCanEdit] =
useState(mine && (Date.now() < editThreshold))
const [wrap, setWrap] = useState(false)
const titleRef = useRef()
useEffect(() => {
setWrap(
parseInt(window.getComputedStyle(titleRef.current).lineHeight) <
titleRef.current.clientHeight)
}, [])
return (
<>
{rank
@ -24,13 +33,13 @@ export default function Item ({ item, rank, children }) {
<div className={styles.item}>
<UpVote item={item} className={styles.upvote} />
<div className={styles.hunk}>
<div className={`${styles.main} flex-wrap`}>
<div className={`${styles.main} flex-wrap ${wrap ? 'd-inline' : ''}`}>
<Link href={`/items/${item.id}`} passHref>
<a className={`${styles.title} text-reset mr-2`}>{item.title}</a>
<a ref={titleRef} className={`${styles.title} text-reset mr-2`}>{item.title}</a>
</Link>
{item.url &&
<a
className={styles.link} target='_blank' href={item.url} // eslint-disable-line
className={`${styles.link} ${wrap ? styles.linkSmall : ''}`} target='_blank' href={item.url} // eslint-disable-line
rel={item.sats + item.boost >= NOFOLLOW_LIMIT ? null : 'nofollow'}
>
{item.url.replace(/(^https?:|^)\/\//, '')}

View File

@ -16,6 +16,12 @@
flex: 1 0 128px;
}
.linkSmall {
width: 128px;
display: inline-block;
vertical-align: text-top;
}
a.link:visited {
color: #7acaf5;
}