Browse Source

fix favicons

main
matthew 2 years ago
parent
commit
401776bf57
  1. 1
      searching-front/app/core/components/SearchForm/styles.module.css
  2. 15
      searching-front/app/core/components/WebsiteCard/WebsiteCard.tsx
  3. 11
      searching-front/app/core/components/WebsiteCard/styles.module.css

1
searching-front/app/core/components/SearchForm/styles.module.css

@ -29,6 +29,7 @@
}
.input {
min-width: 10px;
outline: none;
border: none;
flex: 1;

15
searching-front/app/core/components/WebsiteCard/WebsiteCard.tsx

@ -9,12 +9,13 @@ interface Props {
faviconUrl?: string
}
const WebsiteCard = (props: Props) => {
const faviconUrl = props.faviconUrl;
const faviconUrl = props.faviconUrl
const [faviconLoaded, setFaviconLoaded] = useState(false)
useEffect(() => {
if (faviconUrl) {
const faviconNode = document.createElement("img")
faviconNode.src = faviconUrl;
faviconNode.src = faviconUrl
faviconNode.onload = () => {
setFaviconLoaded(true)
}
@ -27,13 +28,15 @@ const WebsiteCard = (props: Props) => {
return (
<div className={s.root}>
{faviconLoaded &&<img className={(s.favicon)} src={faviconUrl} />}
<a target="_blank" className={s.titleLink} href={url}>
{props.title}
</a>
<a target="_blank" className={s.miniLink} href={url}>
{cleanUrlForUi(props.url)}
</a>
<div className={s.faviconAndUrlWrapper}>
{faviconLoaded && <img className={s.favicon} src={faviconUrl} />}
<a target="_blank" className={s.miniLink} href={url}>
{cleanUrlForUi(props.url)}
</a>
</div>
<div className={s.description}>{props.description}</div>
</div>
)

11
searching-front/app/core/components/WebsiteCard/styles.module.css

@ -45,8 +45,17 @@
top: 16px;
}
.faviconAndUrlWrapper {
display: flex;
align-items: center;
}
@media only screen and (max-width: 700px) {
.favicon {
left: -16px;
position: static;
margin-right: 5px;
}
.faviconAndUrlWrapper{
margin-bottom: 2px;
}
}

Loading…
Cancel
Save