Skip to content

GitLab

S
scratch-www
Commit 67ff3927 authored by rschamp's avatar rschamp Committed by Karishma Chadha
Browse files
Options

Start on responsive map

parent d1285b91
Hide whitespace changes
Inline Side-by-side
Showing with 18 additions and 14 deletions
src/_frameless.scss
View file @ 67ff3927
...@@ -35,8 +35,8 @@ $cols11: (11 * ($column + $gutter) - $gutter) / $em; ...@@ -35,8 +35,8 @@ $cols11: (11 * ($column + $gutter) - $gutter) / $em;
$cols12: (12 * ($column + $gutter) - $gutter) / $em; $cols12: (12 * ($column + $gutter) - $gutter) / $em;
$desktop: 942px; $desktop: 942px;
$mobileIntermediate: 640px;
$tabletPortrait: 768px; $tabletPortrait: 768px;
$mobileIntermediate: 640px;
$mobile: 480px; $mobile: 480px;
/* Media Queries */ /* Media Queries */
......
src/components/world-map/world-map.jsx
View file @ 67ff3927
...@@ -66,9 +66,7 @@ const WorldMap = props => ( ...@@ -66,9 +66,7 @@ const WorldMap = props => (
pad: 0, pad: 0,
autoexpand: true autoexpand: true
}, },
// autosize: true, autosize: true
width: props.mapWidth,
height: props.mapHeight
} }
} }
/> />
......
src/views/annual-report/annual-report.jsx
View file @ 67ff3927
...@@ -729,14 +729,14 @@ class AnnualReport extends React.Component { ...@@ -729,14 +729,14 @@ class AnnualReport extends React.Component {
<p> <p>
<FormattedMessage id="annualReport.reachMapBlurb" /> <FormattedMessage id="annualReport.reachMapBlurb" />
</p> </p>
<div className="map-wrapper">
<MediaQuery minWidth={frameless.desktop}> <MediaQuery minWidth={frameless.desktop}>
<WorldMap <WorldMap
className="map" className="map"
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
mapHeight={530} mapHeight={471}
mapWidth={1060}
/> />
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery
...@@ -748,8 +748,7 @@ class AnnualReport extends React.Component { ...@@ -748,8 +748,7 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
mapHeight={450} mapHeight={384}
mapWidth={900}
/> />
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery
...@@ -761,8 +760,7 @@ class AnnualReport extends React.Component { ...@@ -761,8 +760,7 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
mapHeight={400} mapHeight={320}
mapWidth={800}
/> />
</MediaQuery> </MediaQuery>
<MediaQuery maxWidth={frameless.mobileIntermediate - 1}> <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
...@@ -771,10 +769,10 @@ class AnnualReport extends React.Component { ...@@ -771,10 +769,10 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
mapHeight={172} mapHeight={240}
mapWidth={396}
/> />
</MediaQuery> </MediaQuery>
</div>
</div> </div>
</div> </div>
<div className="inner"> <div className="inner">
......
src/views/annual-report/annual-report.scss
View file @ 67ff3927
...@@ -551,7 +551,6 @@ p { ...@@ -551,7 +551,6 @@ p {
} }
.reach-map { .reach-map {
width: 1064px;
background-color: $ui-white; background-color: $ui-white;
border-radius: 6px; border-radius: 6px;
color: $type-gray; color: $type-gray;
...@@ -564,11 +563,20 @@ p { ...@@ -564,11 +563,20 @@ p {
color: $type-gray; color: $type-gray;
padding: 0 48px; padding: 0 48px;
} }
@media #{$intermediate-and-smaller} { @media #{$intermediate-and-smaller} {
width: 100%; width: 100%;
border-radius: 0px; border-radius: 0px;
} }
.map-wrapper {
width: 100%;
}
.map {
width: 100%;
}
} }
.reach-translation { .reach-translation {
......
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