Cleanup attribution CSS.. fix viewer northOffset / yaw

css/60_photos.css

@@ -25,12 +25,13 @@
 }
 
 .photo-wrapper .photo-attribution {
-    width: 100%;
-    font-size: 10px;
-    text-align: right;
     position: absolute;
     bottom: 0;
     right: 0;
+    width: 100%;
+    font-size: 10px;
+    text-align: right;
+    line-height: 1.1em;
     padding: 4px 2px;
     z-index: 10;
 }
@@ -42,32 +43,6 @@
     color: #fff;
 }
 
-/* streetside photo attribution */
-.photo-wrapper .photo-attribution-streetside {
-    width: 100%;
-    font-size: 10px;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    padding: 4px 2px;
-    z-index: 10;
-}
-
-.photo-attribution-streetside a,
-.photo-attribution-streetside a:visited,
-.photo-attribution-streetside span {
-    padding: 4px 2px;
-    color: #fff;
-}
-.photo-attribution-streetside .image_link{
-    color: #fff;
-    float: left;
-    line-height: 6px;
-}
-.photo-attribution-streetside .image_link:hover{
-    color: #06b8ff;
-}
-
 /* markers and sequences */
 .viewfield-group {
     pointer-events: visible;
@@ -194,13 +169,16 @@
 }
 
 
-/* Streetside viewer */
+/* Streetside Viewer (pannellum) */
+.ms-wrapper .photo-attribution .image_link {
+    display: block;
+}
 .ms-wrapper .photo-attribution a:active,
 .ms-wrapper .photo-attribution a:hover {
     color: #35af6d;
 }
 
-.pnlm-compass {
+.ms-wrapper .pnlm-compass.pnlm-control {
     width: 26px;
     height: 26px;
     left: 4px;

modules/services/streetside.js

@@ -339,23 +339,20 @@ export default {
         var wrap = d3_select('#photoviewer').selectAll('.ms-wrapper')
             .data([0]);
 
-        // inject ms-wrapper into the photoviewer div (used by all
-        // to house each custom photo viewer)
+        // inject ms-wrapper into the photoviewer div
+        // (used by all to house each custom photo viewer)
         var wrapEnter = wrap.enter()
             .append('div')
             .attr('id', 'ms')
             .attr('class', 'photo-wrapper ms-wrapper')
             .classed('hide', true);
 
-        // inject div to support streetside viewer (pannellum)
+        // inject div to support streetside viewer (pannellum) and attribution line
         wrapEnter
             .append('div')
-            .attr('id', 'viewer-streetside');
-
-        // inject div to support photo attribution into ms-wrapper
-        wrapEnter
+            .attr('id', 'viewer-streetside')
             .append('div')
-            .attr('class', 'photo-attribution-streetside fillD');
+            .attr('class', 'photo-attribution fillD');
 
         // load streetside pannellum viewer css
         d3_select('head').selectAll('#streetside-viewercss')
@@ -445,7 +442,7 @@ export default {
         this.setStyles(null, true);
 
         var wrap = d3_select('#photoviewer .ms-wrapper');
-        var attribution = wrap.selectAll('.photo-attribution-streetside').html('');
+        var attribution = wrap.selectAll('.photo-attribution').html('');
         var year = (new Date()).getFullYear();
 
         if (d) {
@@ -493,7 +490,8 @@ export default {
                 showFullscreenCtrl: false,
                 autoLoad: true,
                 compass: true,
-                yaw: d.ca,
+                northOffset: d.ca,
+                yaw: 0,
                 type: 'cubemap',
                 cubeMap: [
                     imgUrlPrefix + imgLocIdxArr[0] + imgUrlSuffix,

modules/svg/streetside.js

@@ -10,7 +10,7 @@ export function svgStreetside(projection, context, dispatch) {
     var minMarkerZoom = 16;
     var minViewfieldZoom = 19;
     var layer = d3_select(null);
-    var _viewerRotation = null;
+    var _viewerYaw = 0;
     var _streetside;
 
     /**
@@ -96,6 +96,8 @@ export function svgStreetside(projection, context, dispatch) {
         var service = getService();
         if (!service) return;
 
+        _viewerYaw = 0;
+
         // reset bubble back to a circular field
         layer.selectAll('.viewfield-group.selected .viewfield')
             .attr('d', viewfieldPath);
@@ -132,7 +134,7 @@ export function svgStreetside(projection, context, dispatch) {
      */
     function transform(d) {
         var t = svgPointTransform(projection)(d);
-        var rot = _viewerRotation !== null ? _viewerRotation : d.ca;
+        var rot = d.ca + _viewerYaw;
         if (rot) {
             t += ' rotate(' + Math.floor(rot) + ',0,0)';
         }
@@ -148,7 +150,7 @@ export function svgStreetside(projection, context, dispatch) {
         if (!viewer) return;
 
         // update viewfield rotation
-        _viewerRotation = viewer.getYaw();
+        _viewerYaw = viewer.getYaw();
         layer.selectAll('.viewfield-group.selected')
             .attr('transform', transform);
     }