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:
parent
20a28865fe
commit
5bc462927a
2 changed files with 8 additions and 37 deletions
|
@ -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>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue