Commit a009e779 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov Committed by Matija Obreza

Fix Banner on the home page is shifted

- Added mock background image with minimal resolution
parent 113a7e1e
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {withStyles} from '@material-ui/core/styles';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withStyles } from '@material-ui/core/styles';
import { translate } from 'react-i18next';
// import { navigateTo } from 'actions/navigation';
......@@ -36,20 +36,31 @@ const styles = (theme) => ({
},
},
backgroundImageWrapper:{
marginTop:'-25%',
display: 'flex',
alignItems: 'center' as 'center',
justifyContent: 'center' as 'center',
width: '100%',
zIndex: -1,
},
backgroundImage: {
top: '-50%',
display: 'block' as 'block',
marginBottom: '-100%',
backgroundImage: 'url(/images/entrypage.jpg)',
backgroundRepeat: 'no-repeat' as 'no-repeat',
backgroundSize: 'cover' as 'cover',
position: 'absolute' as 'absolute',
width: '100vw',
'& > img': {
width: '100vw',
},
[theme.breakpoints.down('sm')]: {
minWidth: '1000px',
width:'110%',
marginTop:'0px',
width: 'initial',
'& > img': {
width: 'initial',
},
},
},
background: {
overflow: 'hidden' as 'hidden',
position: 'relative' as 'relative',
},
searchBox: {
textAlign: 'center' as 'center',
......@@ -311,12 +322,14 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
<Markdown source={ t('common.tagline') } />
</div>
<Grid container spacing={ 0 } className={ classes.background }>
<div className={ classes.backgroundImageWrapper }>
<img className={ classes.backgroundImage } srcSet="
images/entrypage1x.jpg 1000w,
images/entrypage2x.jpg 2000w,
images/entrypage4x.jpg 4000w "
/>
<div className={ classes.backgroundImageWrapper }>
<picture className={ classes.backgroundImage }>
<source key="1" srcSet="images/entrypage.jpg" media="(max-width: 500px)"/>
<source key="2" srcSet="images/entrypage1x.jpg" media="(max-width: 1000px)"/>
<source key="3" srcSet="images/entrypage2x.jpg" media="(max-width: 2000px)"/>
<source key="4" srcSet="images/entrypage4x.jpg" media="(min-width: 2001px)"/>
<img src="images/entrypage.jpg"/>
</picture>
</div>
<Grid item xs={ 12 }>
<div className={ classes.searchBox }>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment