Skip to content
Snippets Groups Projects
Commit 9af72445 authored by Janne Alatalo's avatar Janne Alatalo :neutral_face:
Browse files

Change hacky css to flexbox 

I have no idea what I'm doing... It seems to work and scales better.
parent a7ff7cd4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 82 additions and 44 deletions
src/PointMap.js
+ 82
− 44
View file @ 9af72445
...@@ -158,12 +158,20 @@ class PointMap extends Component { ...@@ -158,12 +158,20 @@ class PointMap extends Component {
getColorInfo(color_spectrum, undef_color) { getColorInfo(color_spectrum, undef_color) {
const gradient_str = color_spectrum.join(", "); const gradient_str = color_spectrum.join(", ");
const styles = { const styles = {
container: { flex_container: {
position: "absolute", position: "absolute",
zIndex: 10, width: "100%",
left: "90%", display: "flex",
top: 0, top: 0,
marginTop: "10px" justifyContent: "flex-end",
zIndex: 10,
pointerEvents: "none",
},
container: {
paddingTop: "10px",
paddingRight: "50px",
pointerEvents: "auto",
zIndex: 10,
}, },
gradient: { gradient: {
backgroundImage: `linear-gradient(${gradient_str})`, backgroundImage: `linear-gradient(${gradient_str})`,
...@@ -187,25 +195,27 @@ class PointMap extends Component { ...@@ -187,25 +195,27 @@ class PointMap extends Component {
}, },
}; };
return ( return (
<div style={styles.container}> <div style={styles.flex_container}>
<div style={styles.side_by_side}> <div style={styles.container}>
<div style={styles.gradient} /> <div style={styles.side_by_side}>
<div style={styles.caption_container}> <div style={styles.gradient} />
<Typography variant="caption"> <div style={styles.caption_container}>
Normal traffic <Typography variant="caption">
</Typography> Normal traffic
<span></span> </Typography>
<Typography variant="caption"> <span></span>
Congested traffic <Typography variant="caption">
</Typography> Congested traffic
</Typography>
</div>
</div> </div>
</div> <div style={styles.side_by_side}>
<div style={styles.side_by_side}> <div style={styles.undef} />
<div style={styles.undef} /> <div style={styles.caption_container}>
<div style={styles.caption_container}> <Typography variant="caption">
<Typography variant="caption"> Missing info
Missing info </Typography>
</Typography> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -214,44 +224,72 @@ class PointMap extends Component { ...@@ -214,44 +224,72 @@ class PointMap extends Component {
getTips() { getTips() {
const styles = { const styles = {
container: { column_flex_container: {
position: "absolute", position: "absolute",
top: 0,
height: "100%",
width: "100%",
display: "flex",
justifyContent: "flex-end",
flexDirection: "column",
zIndex: 10, zIndex: 10,
left: "75%", pointerEvents: "none",
top: "90%", },
row_flex_container: {
display: "flex",
justifyContent: "flex-end",
},
container: {
paddingRight: "50px",
paddingBottom: "10px",
pointerEvents: "auto",
}, },
}; };
return ( return (
<div style={styles.container}> <div style={styles.column_flex_container}>
<Typography variant="subheading" color="textSecondary"> <div style={styles.row_flex_container}>
Scroll Wheel = Zoom In Out <div style={styles.container}>
</Typography> <Typography variant="subheading" color="textSecondary">
<Typography variant="subheading" color="textSecondary"> Scroll Wheel = Zoom In Out
Mouse Left Click + Drag = Move Map </Typography>
</Typography> <Typography variant="subheading" color="textSecondary">
<Typography variant="subheading" color="textSecondary"> Mouse Left Click + Drag = Move Map
Ctrl + Mouse Left Click + Drag = Rotate/Tilt map </Typography>
</Typography> <Typography variant="subheading" color="textSecondary">
Ctrl + Mouse Left Click + Drag = Rotate/Tilt map
</Typography>
</div>
</div>
</div> </div>
); );
} }
getMoreInfoLink() { getMoreInfoLink() {
const styles = { const styles = {
container: { flex_container: {
position: "absolute", position: "absolute",
top: 0,
height: "100%",
display: "flex",
justifyContent: "flex-end",
flexDirection: "column",
pointerEvents: "none",
zIndex: 10, zIndex: 10,
top: "94%", },
container: {
pointerEvents: "auto",
}, },
}; };
return ( return (
<div style={styles.container}> <div style={styles.flex_container}>
<Button <div style={styles.container}>
href="https://gitlab.labranet.jamk.fi/data-analysis-and-ai/lam-station-visualization/blob/master/README.md" <Button
size="large" href="https://gitlab.labranet.jamk.fi/data-analysis-and-ai/lam-station-visualization/blob/master/README.md"
> size="large"
More Info >
</Button> More Info
</Button>
</div>
</div> </div>
); );
} }
......
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