exif/map tweaks

src/components/atoms/Exif.jsx

@@ -7,27 +7,21 @@ import styles from './Exif.module.scss'
 const MAPBOX_ACCESS_TOKEN =
   'pk.eyJ1Ijoia3JlbWFsaWNpb3VzIiwiYSI6ImNqbTE2NHpkYjJmNm8zcHF4eDVqZzk3ejEifQ.1uwPzM6MSTgL2e1Hxcmuqw'
 
-const mapbox = (mapboxId, accessToken) => (x, y, z) => {
-  const retina =
-    typeof window !== 'undefined' && window.devicePixelRatio >= 2 ? '@2x' : ''
-  return `https://api.mapbox.com/styles/v1/mapbox/${mapboxId}/tiles/256/${z}/${x}/${y}${retina}?access_token=${accessToken}`
-}
+const retina =
+  typeof window !== 'undefined' && window.devicePixelRatio >= 2 ? '@2x' : ''
+
+const mapbox = (mapboxId, accessToken) => (x, y, z) =>
+  `https://api.mapbox.com/styles/v1/mapbox/${mapboxId}/tiles/256/${z}/${x}/${y}${retina}?access_token=${accessToken}`
 
 const providers = {
   osm: (x, y, z) => {
     const s = String.fromCharCode(97 + ((x + y + z) % 3))
     return `https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png`
   },
-  wikimedia: (x, y, z) => {
-    const retina =
-      typeof window !== 'undefined' && window.devicePixelRatio >= 2 ? '@2x' : ''
-    return `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}${retina}.png`
-  },
-  stamen: (x, y, z) => {
-    const retina =
-      typeof window !== 'undefined' && window.devicePixelRatio >= 2 ? '@2x' : ''
-    return `https://stamen-tiles.a.ssl.fastly.net/terrain/${z}/${x}/${y}${retina}.jpg`
-  },
+  wikimedia: (x, y, z) =>
+    `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}${retina}.png`,
+  stamen: (x, y, z) =>
+    `https://stamen-tiles.a.ssl.fastly.net/terrain/${z}/${x}/${y}${retina}.jpg`,
   streets: mapbox('streets-v10', MAPBOX_ACCESS_TOKEN),
   satellite: mapbox('satellite-streets-v10', MAPBOX_ACCESS_TOKEN),
   outdoors: mapbox('outdoors-v10', MAPBOX_ACCESS_TOKEN),
@@ -35,23 +29,37 @@ const providers = {
   dark: mapbox('dark-v9', MAPBOX_ACCESS_TOKEN)
 }
 
-class MapExif extends PureComponent {
+class ExifMap extends PureComponent {
+  state = { zoom: 6 }
+
   static propTypes = {
     gps: PropTypes.object
   }
 
+  zoomIn = () => {
+    this.setState({
+      zoom: Math.min(this.state.zoom + 3, 18)
+    })
+  }
+
   render() {
     const { latitude, longitude } = this.props.gps
 
     return (
       <Map
         center={[latitude, longitude]}
-        zoom={12}
+        zoom={this.state.zoom}
         height={160}
         attribution={false}
         provider={providers['light']}
+        metaWheelZoom={true}
+        metaWheelZoomWarning={'META+wheel to zoom'}
       >
-        <Marker anchor={[latitude, longitude]} payload={1} onClick={() => {}} />
+        <Marker
+          anchor={[latitude, longitude]}
+          payload={1}
+          onClick={this.zoomIn}
+        />
       </Map>
     )
   }
@@ -84,7 +92,7 @@ export default class Exif extends PureComponent {
             {iso && <span title="ISO">{iso}</span>}
             {focalLength && <span title="Focal length">{focalLength}</span>}
           </div>
-          <div className={styles.map}>{gps && <MapExif gps={gps} />}</div>
+          <div className={styles.map}>{gps && <ExifMap gps={gps} />}</div>
         </aside>
       </Fragment>
     )

src/components/atoms/Exif.module.scss

@@ -2,22 +2,27 @@
 @import 'mixins';
 
 .exif {
-    margin-top: -($spacer);
+    margin-top: -($spacer * 1.5);
     margin-bottom: $spacer * 2;
 }
 
 .data {
+    @include breakoutviewport;
+
     font-size: $font-size-mini;
     color: $brand-grey-light;
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
     text-align: center;
+    margin-bottom: -3px;
 
     span {
         display: block;
-        flex: 0 0 33%;
+        flex: 1 1 20%;
         white-space: nowrap;
-        padding: $spacer / 4;
+        padding: $spacer / 1.5;
+        border-bottom: 1px solid $brand-grey-dimmed;
 
         &:first-child {
             flex-basis: 100%;
@@ -25,21 +30,29 @@
     }
 
     @media (min-width: $screen-sm) {
+        margin-bottom: 0;
+
         span {
+            border-left: 1px solid $brand-grey-dimmed;
+            border-bottom: 0;
+            padding: $spacer;
+
             &,
             &:first-child {
                 flex: 1 1 auto;
             }
+
+            &:first-child {
+                border-left: 0;
+            }
         }
     }
 }
 
 .map {
     @include breakoutviewport;
+    @include media-frame;
 
-    border-radius: $border-radius;
     overflow: hidden;
-    margin-top: $spacer / 2;
-    border: 1px solid $brand-grey-dimmed;
     height: 160px;
 }

src/styles/_mixins.scss

@@ -84,7 +84,7 @@
 
 @mixin divider() {
     position: relative;
-    border-bottom: 1px dashed lighten($brand-grey-light, 7%);
+    border-bottom: 1px dashed lighten($brand-grey-light, 20%);
     margin-top: $spacer * $line-height;
     margin-bottom: $spacer * $line-height;
 
@@ -101,7 +101,7 @@
 
 @mixin divider-top() {
     position: relative;
-    border-top: 1px dashed lighten($brand-grey-light, 7%);
+    border-top: 1px dashed lighten($brand-grey-light, 20%);
     margin-top: $spacer * $line-height;
     margin-bottom: $spacer * $line-height;