From a847da0764054ae3262872e2300ad140d0439a51 Mon Sep 17 00:00:00 2001
From: phl0 <github@florian-wolters.de>
Date: Fri, 20 Oct 2023 16:32:03 +0200
Subject: [PATCH] Make legend look a little nicer

---
 application/views/awards/ffma/index.php       |  2 +-
 application/views/awards/gridmaster/index.php |  2 +-
 assets/js/sections/ffma.js                    | 12 ++++++++----
 assets/js/sections/gridmaster.js              | 12 ++++++++----
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/application/views/awards/ffma/index.php b/application/views/awards/ffma/index.php
index 6caed124..38306726 100644
--- a/application/views/awards/ffma/index.php
+++ b/application/views/awards/ffma/index.php
@@ -3,7 +3,7 @@
 <style>
 /*Legend specific*/
 .legend {
-  padding: 6px 8px;
+  padding: 10px 10px 10px 10px;
   font: 14px Arial, Helvetica, sans-serif;
   background: white;
   line-height: 24px;
diff --git a/application/views/awards/gridmaster/index.php b/application/views/awards/gridmaster/index.php
index 6caed124..38306726 100644
--- a/application/views/awards/gridmaster/index.php
+++ b/application/views/awards/gridmaster/index.php
@@ -3,7 +3,7 @@
 <style>
 /*Legend specific*/
 .legend {
-  padding: 6px 8px;
+  padding: 10px 10px 10px 10px;
   font: 14px Arial, Helvetica, sans-serif;
   background: white;
   line-height: 24px;
diff --git a/assets/js/sections/ffma.js b/assets/js/sections/ffma.js
index 6ab5f9c6..a3163156 100644
--- a/assets/js/sections/ffma.js
+++ b/assets/js/sections/ffma.js
@@ -26,6 +26,7 @@ function gridPlot(form) {
             $(".ld-ext-right-plot").removeClass('running');
             $(".ld-ext-right-plot").prop('disabled', false);
             $('#plot').prop("disabled", false);
+            grid_max = 488;
             grid_four = data.grid_4char;
             grid_four_lotw = data.grid_4char_lotw;
             grid_four_paper = data.grid_4char_paper;
@@ -66,10 +67,13 @@ function gridPlot(form) {
 
             legend.onAdd = function(map) {
                 var div = L.DomUtil.create("div", "legend");
-                div.innerHTML += "<h4>" + gridsquares_gridsquares + "</h4>";
-                div.innerHTML += '<i style="background: #90ee90"></i><span>' + gridsquares_gridsquares_lotw + ' ('+grid_four_lotw.length+')</span><br>';
-                div.innerHTML += '<i style="background: #00b0f0"></i><span>' + gridsquares_gridsquares_paper + ' ('+paper_count+')</span><br>';
-                div.innerHTML += '<i style="background: #ffd757"></i><span>' + gridsquares_gridsquares_worked + ' ('+(grid_four.length)+')</span><br>';
+                //div.innerHTML += "<h4>" + gridsquares_gridsquares + "</h4>";
+                html = "<table border=\"0\">";
+                html += '<tr><td><i style="background: #90ee90"></i><span>' + gridsquares_gridsquares_lotw + ':</span></td><td style=\"padding-left: 1em; text-align: right;\"><span>'+grid_four_lotw.length+' / '+grid_max+'</span></td></tr>';
+                html += '<tr><td><i style="background: #00b0f0"></i><span>' + gridsquares_gridsquares_paper + ':</span></td><td style=\"padding-left: 1em; text-align: right;\"><span>'+paper_count+' / '+grid_max+'</span></td></tr>';
+                html += '<tr><td><i style="background: #ffd757"></i><span>' + gridsquares_gridsquares_worked + ' ('+(Math.round((grid_four.length / grid_max) * 10000) / 100)+'%):</span></td><td style=\"padding-left: 1em; text-align: right;\"><span>'+(grid_four.length)+' / '+grid_max+'</span></td></tr>';
+                html += "</table>";
+                div.innerHTML = html;
                 return div;
             };
 
diff --git a/assets/js/sections/gridmaster.js b/assets/js/sections/gridmaster.js
index 2df3f3ff..f197ec50 100644
--- a/assets/js/sections/gridmaster.js
+++ b/assets/js/sections/gridmaster.js
@@ -26,6 +26,7 @@ function gridPlot(form) {
             $(".ld-ext-right-plot").removeClass('running');
             $(".ld-ext-right-plot").prop('disabled', false);
             $('#plot').prop("disabled", false);
+            grid_max = 488;
             grid_four = data.grid_4char;
             grid_four_lotw = data.grid_4char_lotw;
             grid_four_paper = data.grid_4char_paper;
@@ -66,10 +67,13 @@ function gridPlot(form) {
 
             legend.onAdd = function(map) {
                 var div = L.DomUtil.create("div", "legend");
-                div.innerHTML += "<h4>" + gridsquares_gridsquares + "</h4>";
-                div.innerHTML += '<i style="background: #90ee90"></i><span>' + gridsquares_gridsquares_lotw + ' ('+grid_four_lotw.length+')</span><br>';
-                div.innerHTML += '<i style="background: #00b0f0"></i><span>' + gridsquares_gridsquares_paper + ' ('+paper_count+')</span><br>';
-                div.innerHTML += '<i style="background: #ffd757"></i><span>' + gridsquares_gridsquares_worked + ' ('+(grid_four.length)+')</span><br>';
+                //div.innerHTML += "<h4>" + gridsquares_gridsquares + "</h4>";
+                html = "<table border=\"0\">";
+                html += '<tr><td><i style="background: #90ee90"></i><span>' + gridsquares_gridsquares_lotw + ':</span></td><td style=\"padding-left: 1em; text-align: right;\"><span>'+grid_four_lotw.length+' / '+grid_max+'</span></td></tr>';
+                html += '<tr><td><i style="background: #00b0f0"></i><span>' + gridsquares_gridsquares_paper + ':</span></td><td style=\"padding-left: 1em; text-align: right;\"><span>'+paper_count+' / '+grid_max+'</span></td></tr>';
+                html += '<tr><td><i style="background: #ffd757"></i><span>' + gridsquares_gridsquares_worked + ' ('+(Math.round((grid_four.length / grid_max) * 10000) / 100)+'%):</span></td><td style=\"padding-left: 1em; text-align: right;\"><span>'+(grid_four.length)+' / '+grid_max+'</span></td></tr>';
+                html += "</table>";
+                div.innerHTML = html;
                 return div;
             };