664: Fix the display of marker popup content (Terrastories#667)

* Fix marker popup content

* Add bolding for Type of Place

* Expose description field to geojson in place.rb

rails/app/assets/stylesheets/components/_balloon.scss

@@ -24,6 +24,14 @@
  }
  }
 
+ &-label {
+ font-weight: bold !important;
+ }
+
+ &-description {
+ margin: 10px 0;
+ }
+
  .mapboxgl-popup-content {
  h1, h2, h3, h4, h5, p, img {
  margin: 0;

rails/app/javascript/components/Popup.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 const Popup = (props) => {
- const { id, name, photo_url, region, type_of_place } = props.feature.properties;
+ const { id, name, photo_url, description, region, type_of_place } = props.feature.properties;
 
  return (
  <div id={`popup-${id}`}>
@@ -11,10 +11,9 @@ const Popup = (props) => {
  </div>
  <div className="ts-markerPopup-content">
  {photo_url !== "null" && (<img src={photo_url} />)}
- {region || type_of_place && <div>
- {region !== "null" && <div>Region: {region} </div>}
- {type_of_place !== "null" && <div>Type of Place: {type_of_place} </div>}
- </div> }
+ {description !== "" && (<div class="ts-markerPopup-description">{description}</div>)}
+ {region !== "" && (<div><span class="ts-markerPopup-label">Region:</span> {region}</div>)}
+ {type_of_place !== "" && (<div><span class="ts-markerPopup-label">Type of Place:</span> {type_of_place}</div>)}
  </div>
  </div>
  );

rails/app/javascript/components/Story.jsx

@@ -46,7 +46,7 @@ const Story = props => {
  <div className="container">
  <h6 className="title">
  {story.title}
- {story.permission_level === "restricted" && " 🔒"} 
+ {story.permission_level === "restricted" && " 🔒"}
  </h6>
  <p>{story.desc}</p>
  {

rails/app/models/place.rb

@@ -49,6 +49,7 @@ def geojson
  RGeo::Cartesian.factory.point(long, lat),
  id,
  name: name,
+ description: description,
  region: region,
  type_of_place: type_of_place,
  photo_url: photo_url,