SimpleImageLink: simplify + use 'src' as last resort

- The icon makes the screen too busy when there are lots of images in a page.

- Use src as the last resort for the text (I though `title` and `alt` was mandatory in markdown; apparently not).
This commit is contained in:
infinite-persistence 2021-04-09 01:14:42 +08:00 committed by Sean Yesmunt
parent 20a28865fe
commit 5bc462927a
2 changed files with 8 additions and 37 deletions

View file

@ -15,7 +15,6 @@ import { formattedTimestamp, inlineTimestamp } from 'util/remark-timestamp';
import ZoomableImage from 'component/zoomableImage'; import ZoomableImage from 'component/zoomableImage';
import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, SIMPLE_SITE } from 'config'; import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, SIMPLE_SITE } from 'config';
import Button from 'component/button'; import Button from 'component/button';
import Icon from 'component/common/icon';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
type SimpleTextProps = { type SimpleTextProps = {
@ -99,19 +98,14 @@ const SimpleImageLink = (props: ImageLinkProps) => {
} }
return ( return (
<div className="preview-link__img--no-preview"> <Button
<Button button="link"
button="link" iconRight={ICONS.EXTERNAL}
icon={ICONS.IMAGE} label={title || alt || src}
iconSize={28} title={helpText || title || alt || src}
iconRight={ICONS.EXTERNAL} className="button--external-link"
label={title || alt} href={src}
title={title || alt} />
className="button--external-link"
href={src}
/>
{helpText && <Icon className="icon--help" icon={ICONS.HELP} tooltip size={24} customTooltipText={helpText} />}
</div>
); );
}; };

View file

@ -253,29 +253,6 @@
width: 8rem; width: 8rem;
} }
.preview-link__img--no-preview {
margin: var(--spacing-s) var(--spacing-m);
padding: var(--spacing-s);
background-color: var(--color-card-background);
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
border-top-left-radius: 0;
border-top-right-radius: 0;
display: flex;
justify-content: space-between;
align-items: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
.button {
max-width: 90%;
}
}
.preview-link__description { .preview-link__description {
margin-top: var(--spacing-s); margin-top: var(--spacing-s);
} }