Move and zoom to portal by clicking on the icon near the title

Added Material icon. In the future, I want to continue to use them
IITC-CE · Nov 27, 2018 · 59cc312 · johnd0e · Jan 31, 2019 · 59cc312
1 parent 6e35841
commit 59cc312
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/code/boot.js b/code/boot.js
@@ -99,6 +99,11 @@ window.setupStyles = function() {
       '#scrollwrapper  { width:'+(SIDEBAR_WIDTH + 2*HIDDEN_SCROLLBAR_ASSUMED_WIDTH)+'px; right:-'+(2*HIDDEN_SCROLLBAR_ASSUMED_WIDTH-2)+'px } ',
       '#sidebar > * { width:'+(SIDEBAR_WIDTH+1)+'px;  }'].join("\n")
     + '</style>');
+
+  // Material Icons
+  $('body').append('<svg width="0" height="0" style="position:absolute">' +
+    '<symbol viewBox="0 0 24 24" id="ic_place_24px"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></symbol>' +
+    '</svg>');
 }
 
 function createDefaultBaseMapLayers() {

diff --git a/code/portal_detail_display.js b/code/portal_detail_display.js
@@ -89,11 +89,13 @@ window.renderPortalDetails = function(guid) {
     linkDetails.push('<aside>'+mapHtml+'</aside>');
 
   }
-
+  
   $('#portaldetails')
     .html('') //to ensure it's clear
     .attr('class', TEAM_TO_CSS[teamStringToId(data.team)])
     .append(
+      '<svg title="Click to move to portal." class="material-icons icon-button" onClick="zoomToAndShowPortal(\''+guid+'\',['+data.latE6/1E6+','+data.lngE6/1E6+']);"><use xlink:href="#ic_place_24px"></use></svg>',
 window.setupTooltips = function(element) { 
   element = element || $(document); 
   element.tooltip({ 
     // disable show/hide animation 
     show: { effect: 'none', duration: 0, delay: 350 }, 
     hide: false, 
     open: function(event, ui) { 
       // ensure all other tooltips are closed 
       $(".ui-tooltip").not(ui.tooltip).remove(); 
     }, 
     content: function() { 
       var title = $(this).attr('title'); 
       return window.convertTextToTableMagic(title); 
     } 
   }); 
 window.setupTooltips = function(element) { 
   element = element || $(document); 
   element.tooltip({ 
     // disable show/hide animation 
     show: { effect: 'none', duration: 0, delay: 350 }, 
     hide: false, 
     open: function(event, ui) { 
       // ensure all other tooltips are closed 
       $(".ui-tooltip").not(ui.tooltip).remove(); 
     }, 
     content: function() { 
       var title = $(this).attr('title'); 
       return window.convertTextToTableMagic(title); 
     } 
   }); 
+
       $('<h3>').attr({class:'title'}).text(title),
 
       $('<span>').attr({

diff --git a/style.css b/style.css
@@ -26,6 +26,21 @@ body {
   margin: 0;
 }
 
+/* Material Icons */
+.material-icons {
+  width: 24px;
+  height: 24px;
+}
+
+.icon-button {
+  cursor: pointer;
+}
+
+i.tiny { font-size: 1rem; }
+i.small { font-size: 2rem; }
+i.medium { font-size: 4rem; }
+i.large { font-size: 6rem; }
+
 #scrollwrapper {
   overflow-x: hidden;
   overflow-y: auto;
@@ -70,14 +85,17 @@ body {
 }
 
 .enl {
+  fill: #03fe03;
   color: #03fe03 !important;
 }
 
 .res {
+  fill: #00c5ff;
   color: #00c5ff !important;
 }
 
 .none {
+  fill: #fff;
   color: #fff;
 }
 
@@ -815,6 +833,12 @@ h3 {
   position: relative; /* so the below '#portaldetails .close' is relative to this */
 }
 
+#portaldetails .title {
+  width: auto;
+  display: inline-block;
+  line-height: 20px;
+}
+
 #portaldetails .close {
   position: absolute;
   top: -2px;