muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

fixed image width calculation

Browse source
This commit is contained in:
Fedor Katurov 2021-06-25 17:09:03 +07:00
parent 02bc12f727
commit 7ce8939dce
2 changed files with 25 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/media/ImagePreloader/index.tsx
View file

@ -47,43 +47,37 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
useResizeHandler(onResize); useResizeHandler(onResize);
const estimatedWidth = (width * maxHeight) / height;
return ( return (
<> <>
<svg <svg
viewBox={`0 0 ${width} ${height}`} viewBox={`0 0 ${width} ${height}`}
className={classNames(styles.preview, { [styles.is_loaded]: loaded })} className={classNames(styles.preview, { [styles.is_loaded]: loaded })}
style={{ style={{
maxHeight, maxHeight: maxHeight,
height: height, width: estimatedWidth,
}} }}
onClick={onClick} onClick={onClick}
> >
<defs> <defs>
<filter id="f1" x="0" y="0"> <filter id="f1" x="0" y="0">
<feGaussianBlur <feGaussianBlur in="SourceGraphic" stdDeviation="30" />
stdDeviation="30 30"
x="0%"
y="0%"
width="100%"
height="100%"
in="blend"
edgeMode="none"
result="blur2"
/>
</filter> </filter>
</defs> </defs>
<rect fill="#242222" width="100%" height="100%" stroke="none" rx="8" ry="8" /> <g filter="url(#f1)">
<rect fill="#222222" width="100%" height="100%" stroke="none" rx="8" ry="8" />
{!hasError && ( {!hasError && (
<image <image
xlinkHref={getURL(file, PRESETS['300'])} xlinkHref={getURL(file, PRESETS['300'])}
width="100%" width="100%"
height="100%" height="100%"
filter="url(#f1)" onLoad={onLoad}
onLoad={onLoad} />
/> )}
)} </g>
</svg> </svg>
<img <img

9
src/components/media/ImagePreloader/styles.module.scss
View file

@ -24,8 +24,17 @@
bottom: 40px; bottom: 40px;
opacity: 0.4; opacity: 0.4;
@include tablet {
right: 5px;
bottom: 5px;
}
svg { svg {
fill: currentColor; fill: currentColor;
@include tablet {
transform: scale(0.6);
}
} }
} }