Add "View on Bing Maps" link, cleanup css

(closes #5125)

css/60_photos.css

@@ -171,9 +171,24 @@
 
 
 /* Streetside Viewer (pannellum) */
-.ms-wrapper .photo-attribution .image_link {
+.ms-wrapper .photo-attribution .image-link {
     display: block;
 }
+.ms-wrapper .photo-attribution .attribution-row {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    pading: 0 5px;
+}
+.ms-wrapper .photo-attribution .image-view-link {
+    text-align: left;
+    margin: 0 5px;
+}
+.ms-wrapper .photo-attribution .image-report-link {
+    text-align: right;
+}
+
 .ms-wrapper .photo-attribution a:active,
 .ms-wrapper .photo-attribution a:hover {
     color: #0fffc4;
@@ -189,8 +204,6 @@
 }
 
 label.streetside-hires {
-    float: left;
-    padding: 0 10px;
     cursor: pointer;
 }
 .streetside-hires span {

data/core.yaml

@@ -598,6 +598,7 @@ en:
     tooltip: "Streetside photos from Microsoft"
     title: "Photo Overlay (Bing Streetside)"
     report: Report a privacy concern with this image
+    view_on_bing: "View on Bing Maps"
     hires: "High resolution"
   mapillary_images:
     tooltip: "Street-level photos from Mapillary"

dist/locales/en.json

@@ -725,6 +725,7 @@
             "tooltip": "Streetside photos from Microsoft",
             "title": "Photo Overlay (Bing Streetside)",
             "report": "Report a privacy concern with this image",
+            "view_on_bing": "View on Bing Maps",
             "hires": "High resolution"
         },
         "mapillary_images": {

modules/services/mapillary.js

@@ -623,7 +623,7 @@ export default {
 
             attribution
                 .append('a')
-                .attr('class', 'image_link')
+                .attr('class', 'image-link')
                 .attr('target', '_blank')
                 .attr('href', 'https://www.mapillary.com/app/?pKey=' + encodeURIComponent(d.key) +
                     '&focus=photo&lat=' + d.loc[1] + '&lng=' + d.loc[0] + '&z=17')

modules/services/openstreetcam.js

@@ -504,7 +504,7 @@ export default {
 
             attribution
                 .append('a')
-                .attr('class', 'image_link')
+                .attr('class', 'image-link')
                 .attr('target', '_blank')
                 .attr('href', 'https://openstreetcam.org/details/' + d.sequence_id + '/' + d.sequence_index)
                 .text('openstreetcam.org');

modules/services/streetside.js

@@ -831,8 +831,12 @@ export default {
             return response.promise;
         }
 
+        var line1 = attribution
+            .append('div')
+            .attr('class', 'attribution-row');
+
         // Add hires checkbox
-        var label = attribution
+        var label = line1
             .append('label')
             .attr('class', 'streetside-hires');
 
@@ -868,33 +872,49 @@ export default {
             .text(t('streetside.hires'));
 
 
+        var captureInfo = line1
+            .append('div')
+            .attr('class', 'attribution-capture-info');
+
         // Add capture date
         if (d.captured_by) {
             var yyyy = (new Date()).getFullYear();
 
-            attribution
+            captureInfo
                 .append('a')
                 .attr('class', 'captured_by')
                 .attr('target', '_blank')
                 .attr('href', 'https://www.microsoft.com/en-us/maps/streetside')
                 .text('©' + yyyy + ' Microsoft');
 
-            attribution
+            captureInfo
                 .append('span')
                 .text('|');
         }
 
         if (d.captured_at) {
-            attribution
+            captureInfo
                 .append('span')
                 .attr('class', 'captured_at')
                 .text(localeTimestamp(d.captured_at));
         }
 
-        // Add image link
-        attribution
+        // Add image links
+        var line2 = attribution
+            .append('div')
+            .attr('class', 'attribution-row');
+
+        line2
             .append('a')
-            .attr('class', 'image_link')
+            .attr('class', 'image-view-link')
+            .attr('target', '_blank')
+            .attr('href', 'https://www.bing.com/maps?cp=' + d.loc[1] + '~' + d.loc[0] +
+                '&lvl=17&dir=' + d.ca + '&style=x&v=2&sV=1')
+            .text(t('streetside.view_on_bing'));
+
+        line2
+            .append('a')
+            .attr('class', 'image-report-link')
             .attr('target', '_blank')
             .attr('href', 'https://www.bing.com/maps/privacyreport/streetsideprivacyreport?bubbleid=' + encodeURIComponent(d.key) +
                 '&focus=photo&lat=' + d.loc[1] + '&lng=' + d.loc[0] + '&z=17')