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 { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, SIMPLE_SITE } from 'config';
|
||||
import Button from 'component/button';
|
||||
import Icon from 'component/common/icon';
|
||||
import * as ICONS from 'constants/icons';
|
||||
|
||||
type SimpleTextProps = {
|
||||
|
@ -99,19 +98,14 @@ const SimpleImageLink = (props: ImageLinkProps) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="preview-link__img--no-preview">
|
||||
<Button
|
||||
button="link"
|
||||
icon={ICONS.IMAGE}
|
||||
iconSize={28}
|
||||
iconRight={ICONS.EXTERNAL}
|
||||
label={title || alt}
|
||||
title={title || alt}
|
||||
className="button--external-link"
|
||||
href={src}
|
||||
/>
|
||||
{helpText && <Icon className="icon--help" icon={ICONS.HELP} tooltip size={24} customTooltipText={helpText} />}
|
||||
</div>
|
||||
<Button
|
||||
button="link"
|
||||
iconRight={ICONS.EXTERNAL}
|
||||
label={title || alt || src}
|
||||
title={helpText || title || alt || src}
|
||||
className="button--external-link"
|
||||
href={src}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -253,29 +253,6 @@
|
|||
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 {
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue