Verified Commit c37b0aa8 authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Fix style issues on mobile devices

parent 29b85cd4
......@@ -50,8 +50,12 @@ const useStyles = makeStyles(
width: '350px',
padding: '1em',
position: 'relative',
[theme.breakpoints.down('md')]: {
flexGrow: 1,
order: 2,
},
'&:after': {
'&::after': {
content: '" "',
display: 'block',
position: 'absolute',
......@@ -62,11 +66,13 @@ const useStyles = makeStyles(
right: 0,
borderRadius: '2px',
overflow: 'hidden',
[theme.breakpoints.down('md')]: {
width: 'calc(100% - 2em)',
borderRadius: 0,
width: 'unset',
height: '4px',
margin: '0 1em',
bottom: 'unset',
left: 0,
top: 0,
},
},
},
......@@ -74,8 +80,10 @@ const useStyles = makeStyles(
flexGrow: 1,
padding: '1em',
textAlign: 'left',
order: 2,
[theme.breakpoints.down('md')]: {
width: '100%',
order: 1,
},
},
divider: {
......@@ -84,6 +92,7 @@ const useStyles = makeStyles(
toolbar: {
width: '100%',
padding: '0 .4em',
order: 3,
'& > *': {
marginLeft: '.5em',
......
......@@ -16,25 +16,20 @@ import EventFreeSpots from './partials/freeSpots'
const useStyles = makeStyles(
theme => ({
root: {
display: 'grid',
gridTemplateAreas: "'image content'",
gridTemplateColumns: '150px 1fr',
display: 'flex',
width: '100%',
minHeight: '150px',
[theme.breakpoints.down('sm')]: {
gridTemplateAreas: 'content',
gridTemplateColumns: '1fr',
},
},
image: {
gridArea: 'image',
display: 'block',
width: '150px',
[theme.breakpoints.down('sm')]: {
display: 'none',
},
},
content: {
gridArea: 'content',
flexGrow: 1,
textAlign: 'left',
padding: '1em',
},
......@@ -79,7 +74,9 @@ const EventSummary = ({ eventId, ...props }) => {
if (!event || !event.data) {
return (
<div className={classes.root} {...props}>
<Img className={classes.image} ratioX={1} ratioY={1} />
<div className={classes.image}>
<Img ratioX={1} ratioY={1} />
</div>
<div className={classes.content}>
<Skeleton
className={classes.title}
......@@ -126,13 +123,9 @@ const EventSummary = ({ eventId, ...props }) => {
return (
<div className={classes.root} {...props}>
<Img
className={classes.image}
src={imageUrl}
ratioX={1}
ratioY={1}
alt={title}
/>
<div className={classes.image}>
<Img src={imageUrl} ratioX={1} ratioY={1} alt={title} />
</div>
<div className={classes.content}>
<h2 className={classes.title}>{title}</h2>
<div className={classes.catchphrase}>{catchphrase}</div>
......
Supports Markdown
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