From 59cc3126bd85f5c9e298e94517384b34c8458d65 Mon Sep 17 00:00:00 2001
From: Alexander Danilov <modos189@protonmail.com>
Date: Wed, 28 Nov 2018 01:38:43 +0300
Subject: [PATCH] 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

---
 code/boot.js                  |  5 +++++
 code/portal_detail_display.js |  4 +++-
 style.css                     | 24 ++++++++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/code/boot.js b/code/boot.js
index 64751029b..3fdfa6c47 100644
--- 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
index 94efd037f..b80cd9315 100644
--- 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>',
+      
       $('<h3>').attr({class:'title'}).text(title),
 
       $('<span>').attr({
diff --git a/style.css b/style.css
index 9a0a49e3b..cee59c2f2 100644
--- 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;