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 flow hero appearanec

Browse source
This commit is contained in:
Fedor Katurov 2020-04-15 17:15:25 +07:00
parent c094bd357f
commit 756c82c8aa
3 changed files with 31 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/flow/FlowHero/index.tsx
View file

@ -16,10 +16,10 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
const [limit, setLimit] = useState(Math.min(heroes.length, 6)); const [limit, setLimit] = useState(Math.min(heroes.length, 6));
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
const [loaded, setLoaded] = useState([]); const [loaded, setLoaded] = useState([]);
const [is_mobile, setIsMobile] = useState(false);
const timer = useRef(null); const timer = useRef(null);
const onLoad = useCallback(id => () => setLoaded([...loaded, id]), [setLoaded, loaded]); const onLoad = useCallback(id => () => setLoaded([...loaded, id]), [setLoaded, loaded]);
const onNext = useCallback(() => { const onNext = useCallback(() => {
clearTimeout(timer.current); clearTimeout(timer.current);
@ -80,6 +80,8 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
return item.title; return item.title;
}, [loaded, current, heroes]); }, [loaded, current, heroes]);
const preset = useMemo(() => (window.innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), []);
return ( return (
<div className={styles.wrap} onMouseOver={stopSliding} onFocus={stopSliding}> <div className={styles.wrap} onMouseOver={stopSliding} onFocus={stopSliding}>
{loaded && loaded.length > 0 && ( {loaded && loaded.length > 0 && (
@ -104,13 +106,13 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
[styles.is_active]: current === hero.id, [styles.is_active]: current === hero.id,
})} })}
style={{ style={{
backgroundImage: `url("${getURL({ url: hero.thumbnail }, PRESETS.small_hero)}")`, backgroundImage: `url("${getURL({ url: hero.thumbnail }, preset)}")`,
}} }}
key={hero.id} key={hero.id}
onClick={onClick} onClick={onClick}
> >
<img <img
src={getURL({ url: hero.thumbnail }, PRESETS.small_hero)} src={getURL({ url: hero.thumbnail }, preset)}
alt={hero.thumbnail} alt={hero.thumbnail}
onLoad={onLoad(hero.id)} onLoad={onLoad(hero.id)}
/> />

47
src/components/flow/FlowHero/styles.scss
View file

@ -1,12 +1,3 @@
// @keyframes rise {
// 0% {
// transform: translate(0, 0);
// }
// 100% {
// transform: translate(0, -10%);
// }
// }
.wrap { .wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -16,20 +7,20 @@
overflow: hidden; overflow: hidden;
&::after { &::after {
content: " "; content: ' ';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url("~/sprites/stripes.svg") rgba(0, 0, 0, 0.3); background: url('~/sprites/stripes.svg') rgba(0, 0, 0, 0.3);
z-index: 4; z-index: 4;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
} }
&::before { &::before {
content: " "; content: ' ';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -94,6 +85,7 @@
box-sizing: border-box; box-sizing: border-box;
z-index: 5; z-index: 5;
flex-direction: row; flex-direction: row;
align-items: flex-end;
} }
.title_wrap { .title_wrap {
@ -105,19 +97,28 @@
font: $font_hero_title; font: $font_hero_title;
text-transform: uppercase; text-transform: uppercase;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1.2em;
@include tablet {
white-space: initial;
word-wrap: break-word;
font: $font_32_bold;
max-height: 3.6em;
}
} }
.title { // .title {
flex: 0; // flex: 0;
height: 48px; // height: 48px;
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
padding: 0 $gap 0 0; // padding: 0 $gap 0 0;
border-radius: $radius; // background: red;
font: $font_hero_title; // border-radius: $radius;
text-transform: uppercase; // font: $font_hero_title;
} // text-transform: uppercase;
// }
.buttons { .buttons {
display: flex; display: flex;

1
src/styles/variables.scss
View file

@ -38,6 +38,7 @@ $font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helve
$font_48_semibold: $semibold 48px $font; $font_48_semibold: $semibold 48px $font;
$font_48_bold: $bold 48px $font; $font_48_bold: $bold 48px $font;
$font_32_bold: $bold 32px $font;
$font_24_bold: $bold 24px $font; $font_24_bold: $bold 24px $font;
$font_24_semibold: $bold 24px $font; $font_24_semibold: $bold 24px $font;
$font_24_medium: $medium 24px $font; $font_24_medium: $medium 24px $font;