more map ui tweaking.

Author: rcreasey

app/js/SystemMap.js

@@ -76,7 +76,7 @@ var SystemMap = {
 
   draw: function() {
     // Change this to globally adjust minimum node distance and system [x,y] scale
-    const SCALING_FACTOR = 0.75;
+    const SCALING_FACTOR = 0.85;
 
     var svg = d3.select("#system-map")
       .attr("width", Data.ui.map.width())
@@ -170,16 +170,28 @@ var SystemMap = {
 
         node_groups.append("text")
           .attr("class", "hostiles")
-          .attr("text-anchor", "middle")
+          .attr("text-anchor", "left")
+          .attr("alignment-baseline", "left")
           .attr("vector-effect", "non-scaling-stroke")
-          .attr("alignment-baseline", "middle")
-          .attr("x", rect_width / 2)
-          .attr("y", 25)
+          .attr("x", 0)
+          .attr("y", 30)
           .text(function(n) {
             var count = SystemMap.hostile_count(n.system)
-            return (count > 0) ? count + " " + UI.mapUnicode(['Hostile']) : "";
+            return (count > 0) ? count : "";
           });
-                  
+          
+        node_groups.append("text")
+          .attr("class", "faded")
+          .attr("text-anchor", "right")
+          .attr("alignment-baseline", "right")
+          .attr("vector-effect", "non-scaling-stroke")
+          .attr("x", rect_width / 1.15)
+          .attr("y", 30)
+          .text(function(n) {
+            var count = SystemMap.faded_count(n.system)
+            return (count > 0) ? count : "";
+          });
+        
         node_groups.on('click', function(n) {
           SystemMap.updateInfo( n.system.name );
         });
@@ -346,7 +358,10 @@ var SystemMap = {
       if (results.id == Data.state.self.systemId) system.allow_report = true; 
 
       Data.ui.mapInfo.html( $(Data.templates.system_info(system)) );
-      Data.ui.mapInfo.children('dl').fadeIn(Data.config.uiSpeed)
+      Data.ui.mapInfo.children('div.details')
+        .fadeIn(Data.config.uiSpeed)
+        .delay(Data.config.alertStay)
+        .fadeOut(Data.config.uiSpeed * 8);
     });
 
   },

app/js/UI.js

@@ -189,7 +189,7 @@ Handlebars.registerHelper('ui_icon', function(icon) {
   if (icon == 'error') return 'exclamation-triangle';
   if (icon == 'fleet') return 'fighter-jet';
   if (icon == 'fleetCreated') return 'fighter-jet';
-  if (icon == 'hostileFaded') return 'eye-slash';
+  if (icon == 'hostileFaded') return 'clock-o';
   if (icon == 'hostileTimeout') return 'clock-o';
   if (icon == 'info') return 'question';
   if (icon == 'member') return 'user';

app/styles/main.css

@@ -511,6 +511,7 @@ rect.status-hostile { stroke: #d9534f; fill: #74312f; }
   fill: #fff;
 }
 
+.node text.faded,
 .node text.advisories {
   font-family: FontAwesome;
   font-size: 1.25rem;

app/templates/hostile.hbs

@@ -11,9 +11,9 @@
     </td>
     <td class="ship-type" onClick="UIPanels.updateHostileDetailsPanel('{{characterId}}');">
       {{#if shipTypeId}}
-        <i class="fa fa-eye"></i> <a href="javascript:CCPEVE.showInfo({{shipTypeId}});">{{shipType}}</a>
+        <i class="fa fa-fighter-jet"></i> <a href="javascript:CCPEVE.showInfo({{shipTypeId}});">{{shipType}}</a>
       {{else}}
-        <i class="fa fa-eye-slash"></i> Non Visual
+        Non Visual
       {{/if}}
       {{#if isFaded}}
       <i class="fa fa-clock-o"></i> Faded