1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00

added imagecache

This commit is contained in:
Fedor Katurov 2019-11-07 12:13:05 +07:00
parent 80c3a8a4c5
commit 88f50e3348
6 changed files with 29 additions and 6 deletions

View file

@ -6,6 +6,7 @@ import classNames from 'classnames';
import * as styles from './styles.scss'; import * as styles from './styles.scss';
import { Icon } from '~/components/input/Icon'; import { Icon } from '~/components/input/Icon';
import { flowSetCellView } from '~/redux/flow/actions'; import { flowSetCellView } from '~/redux/flow/actions';
import { PRESETS } from '~/constants/urls';
interface IProps { interface IProps {
node: INode; node: INode;
@ -104,7 +105,7 @@ const Cell: FC<IProps> = ({
<div <div
className={styles.thumbnail} className={styles.thumbnail}
style={{ style={{
backgroundImage: `url("${getURL({ url: thumbnail })}")`, backgroundImage: `url("${getURL({ url: thumbnail }, PRESETS.cover)}")`,
opacity: is_loaded ? 1 : 0, opacity: is_loaded ? 1 : 0,
}} }}
onClick={onClick} onClick={onClick}

View file

@ -84,9 +84,7 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
<div className={styles.wrap} onMouseOver={stopSliding} onFocus={stopSliding}> <div className={styles.wrap} onMouseOver={stopSliding} onFocus={stopSliding}>
{loaded && loaded.length > 0 && ( {loaded && loaded.length > 0 && (
<div className={styles.info}> <div className={styles.info}>
<div className={styles.title_wrap}> <div className={styles.title_wrap}>{title}</div>
<div className={styles.title}>{title}</div>
</div>
<div className={styles.buttons}> <div className={styles.buttons}>
<div className={styles.button} onClick={onPrevious}> <div className={styles.button} onClick={onPrevious}>

View file

@ -102,6 +102,9 @@
display: flex; display: flex;
margin-right: $gap; margin-right: $gap;
overflow: hidden; overflow: hidden;
font: $font_hero_title;
text-transform: uppercase;
text-overflow: ellipsis;
} }
.title { .title {

View file

@ -18,11 +18,14 @@
z-index: 1; z-index: 1;
background: $content_bg; background: $content_bg;
min-width: 100%; min-width: 100%;
box-sizing: border-box;
& > div { & > div {
padding: $gap $gap * 2; padding: $gap $gap * 2;
cursor: pointer; cursor: pointer;
opacity: 0.5; opacity: 0.5;
box-sizing: border-box;
transition: opacity 0.25s;
} }
&:hover > div { &:hover > div {
@ -41,7 +44,7 @@
white-space: nowrap; white-space: nowrap;
box-shadow: inset transparentize($content_bg, 0.8) 0 0 0 1px; box-shadow: inset transparentize($content_bg, 0.8) 0 0 0 1px;
background: transparentize($content_bg, 0.1); background: transparentize($content_bg, 0.1);
padding: 0 0 0 $gap; padding: 0;
} }
.user_avatar { .user_avatar {

View file

@ -9,3 +9,14 @@ export const URLS = {
}, },
NODE_URL: (id: number | string) => `/post${id}`, NODE_URL: (id: number | string) => `/post${id}`,
}; };
export const PRESETS = {
'1400': '1400',
'900': '900',
'600': '600',
'300': '300',
'100': '100',
placeholder: 'placeholder',
cover: 'cover',
hero: 'hero',
};

View file

@ -2,6 +2,7 @@ import { IFile } from '~/redux/types';
import formatDistanceToNow from 'date-fns/formatDistanceToNow'; import formatDistanceToNow from 'date-fns/formatDistanceToNow';
import { ru } from 'date-fns/locale'; import { ru } from 'date-fns/locale';
import Axios from 'axios'; import Axios from 'axios';
import { PRESETS } from '~/constants/urls';
export const getStyle = (oElm: any, strCssRule: string) => { export const getStyle = (oElm: any, strCssRule: string) => {
if (document.defaultView && document.defaultView.getComputedStyle) { if (document.defaultView && document.defaultView.getComputedStyle) {
@ -57,9 +58,15 @@ export const describeArc = (
].join(' '); ].join(' ');
}; };
export const getURL = (file: Partial<IFile>) => { export const getURL = (file: Partial<IFile>, size?: typeof PRESETS[keyof typeof PRESETS]) => {
if (!file || !file.url) return null; if (!file || !file.url) return null;
if (size) {
return file.url
.replace('REMOTE_CURRENT://', `${process.env.REMOTE_CURRENT}/cache/${size}/`)
.replace('REMOTE_OLD://', process.env.REMOTE_OLD);
}
return file.url return file.url
.replace('REMOTE_CURRENT://', process.env.REMOTE_CURRENT) .replace('REMOTE_CURRENT://', process.env.REMOTE_CURRENT)
.replace('REMOTE_OLD://', process.env.REMOTE_OLD); .replace('REMOTE_OLD://', process.env.REMOTE_OLD);