From 88bf91f78d8101221ee297ac8484d34708673ae8 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 2 Sep 2024 15:46:58 +0100
Subject: [PATCH 1/9] move help button to control panel

---
 seshat/apps/core/templates/core/world_map.html | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 4d6ec83fa..ad23412d8 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -179,7 +179,6 @@
         background-color: transparent;
         border: none;
         cursor: pointer;
-        font-size: 2.5em;
     }
 
     .display-info-container {
@@ -302,7 +301,12 @@ <h1 class="text-teal federicka-big">Seshat World Map</h1>
                 <div id="loadingIndicator">
                     <div class="spinner"></div>                   
                 </div>
-                <p style="display: none;" id="cliopatria-link"><a href="../cliopatria" target="_blank">Learn more about this dataset.</a></p>
+                <div style="display: none;" id="cliopatria-link">
+                    <p>
+                        <a href="../cliopatria" target="_blank">About this dataset.</a>
+                        <button class="transparent-button" onclick="toggleTips()">💡 Navigating this map.</button>
+                    </p>
+                </div>
                 <label for="chooseVariable">Variable: </label>
                 <select name="chooseVariable" id="chooseVariable" onchange="clearSelection();" style="width: 150px; text-overflow: ellipsis;" disabled>
                     <option value="polity">Polity</option>
@@ -391,7 +395,6 @@ <h1 class="text-teal federicka-big">Background map</h1>
                             <p><b>🔹 Use the play button to animate the map through time.</b></p>
                             <p><b>🔹 Use the background map controls to switch between different base maps.</b></p>
                         </div>
-                        <button class="transparent-button" onclick="toggleTips()">💡</button>
                     </div>
                 </div>
 		        <h1 class="text-teal sliderDate" id="sliderDate"></h1>

From 6f12a3ca175c1f3bf1c471f815bcfb362e995398 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 2 Sep 2024 15:57:51 +0100
Subject: [PATCH 2/9] separate paras

---
 seshat/apps/core/templates/core/world_map.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index ad23412d8..7275c32a8 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -301,10 +301,12 @@ <h1 class="text-teal federicka-big">Seshat World Map</h1>
                 <div id="loadingIndicator">
                     <div class="spinner"></div>                   
                 </div>
-                <div style="display: none;" id="cliopatria-link">
+                <div style="display: none; text-align: center;" id="cliopatria-link">
                     <p>
-                        <a href="../cliopatria" target="_blank">About this dataset.</a>
-                        <button class="transparent-button" onclick="toggleTips()">💡 Navigating this map.</button>
+                        <a href="../cliopatria" target="_blank">🔹 Learn more about this dataset.</a>
+                    </p>
+                    <p>
+                        <button class="transparent-button" onclick="toggleTips()">🔹 How to navigate this map.</button>
                     </p>
                 </div>
                 <label for="chooseVariable">Variable: </label>

From f96189d6b5e4289a6e2b2fd260ae474e21c3b34d Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 2 Sep 2024 16:04:45 +0100
Subject: [PATCH 3/9] update tips-content

---
 seshat/apps/core/templates/core/world_map.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 7275c32a8..7ab859f0b 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -390,11 +390,13 @@ <h1 class="text-teal federicka-big">Background map</h1>
                 <div class="toprightcontainer">
                     <div id="help" class="p-1">
                         <div id="tips" class="tips-content">
-                            <p><b>🔹 Click polity shapes on the map to reveal information.</b></p>
+                            <p><b>🔹 Hover the mouse over polity shapes on the map to reveal information.</b></p>
+                            <p><b>🔹 Clicking polity shapes adds them to the legend.</b></p>
                             <p><b>🔹 Some polities have Seshat pages reachable with double click.</b></p>
-                            <p><b>🔹 Use the variable dropdown to color polities by different variables.</b></p>
+                            <p><b>🔹 Enter a year of interest to jump to it, or use the slider at the bottom of the page.</b></p>
+                            <p><b>🔹 Use the variable dropdown to color polities by different Seshat variables.</b></p>
                             <p><b>🔹 Use the opacity slider to adjust the transparency of the polity shapes.</b></p>
-                            <p><b>🔹 Use the play button to animate the map through time.</b></p>
+                            <p><b>🔹 Use the play controls to quickly increment the year and animate the map through time.</b></p>
                             <p><b>🔹 Use the background map controls to switch between different base maps.</b></p>
                         </div>
                     </div>

From 7acc820e40603661b1ddcc10403e70e2f37dee25 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 2 Sep 2024 16:16:07 +0100
Subject: [PATCH 4/9] unsquish

---
 seshat/apps/core/templates/core/world_map.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 7ab859f0b..ef9cc7a00 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -359,7 +359,7 @@ <h1 class="text-teal federicka-big">Seshat World Map</h1>
             </fieldset>
             <div id="baseMapControls" style="position: absolute; bottom: 0px; display: flex; flex-direction: column; justify-content: flex-end;">
                 <fieldset>
-                    <legend>
+                    <legend id="background-map-header" style="display: none">
                         <h1 class="text-teal federicka-big">Background map</h1>
                     </legend>
                     <label><input type="radio" name="baseMap" id="baseMapEsri" value="arcgis" onclick="switchBaseMapWorldMap()" checked>Satellite (<a href="https://www.arcgis.com/home/item.html?id=10df2279f9684e4a9f6a7f08febac2a9" target="_blank">Esri World Imagery</a>)</label><br>
@@ -578,6 +578,7 @@ <h1 class="text-teal sliderDate" id="sliderDate2"></h1>
                         allVariablesLoaded = true;
                         plotPolities();
                         document.getElementById('variablesLoadingIndicator').style.display = 'none';
+                        document.getElementById('background-map-header').style.display = 'block';
                         document.getElementById('cliopatria-link').style.display = 'block';
 
                         return fetch('/core/provinces_and_countries');

From a700e7cf0ca13b1fbad0407077f226a8e1020a99 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 2 Sep 2024 16:27:54 +0100
Subject: [PATCH 5/9] button looks like link

---
 seshat/apps/core/templates/core/world_map.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index ef9cc7a00..ce0db6816 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -179,6 +179,11 @@
         background-color: transparent;
         border: none;
         cursor: pointer;
+        color: teal;
+    }
+
+    .transparent-button:hover {
+        color: orange;
     }
 
     .display-info-container {

From 21a9706b9cb69165c4427ece6a031d70b0cd90ab Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Tue, 3 Sep 2024 09:56:15 +0100
Subject: [PATCH 6/9] close button

---
 seshat/apps/core/templates/core/world_map.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index ce0db6816..f82e8a4ee 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -395,6 +395,7 @@ <h1 class="text-teal federicka-big">Background map</h1>
                 <div class="toprightcontainer">
                     <div id="help" class="p-1">
                         <div id="tips" class="tips-content">
+                            <button style="right: 4%; position: absolute" onclick="toggleTips()">❌</button>
                             <p><b>🔹 Hover the mouse over polity shapes on the map to reveal information.</b></p>
                             <p><b>🔹 Clicking polity shapes adds them to the legend.</b></p>
                             <p><b>🔹 Some polities have Seshat pages reachable with double click.</b></p>

From 0b405bc8869e5ced51b390c105925f04b40429ea Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Tue, 3 Sep 2024 09:59:50 +0100
Subject: [PATCH 7/9] refine cross button

---
 seshat/apps/core/templates/core/world_map.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index f82e8a4ee..6f1d36fad 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -291,6 +291,13 @@
         100% { transform: rotate(360deg); }
     }
 
+    #crossButton {
+        background-color: rgba(255, 253, 242, 1);
+        right: 4%;
+        position: absolute;
+        border-color: #782823;
+    }
+
 </style>
 <body style="background-color: #fffdf2;">
     <div class="wrapper">
@@ -395,7 +402,7 @@ <h1 class="text-teal federicka-big">Background map</h1>
                 <div class="toprightcontainer">
                     <div id="help" class="p-1">
                         <div id="tips" class="tips-content">
-                            <button style="right: 4%; position: absolute" onclick="toggleTips()">❌</button>
+                            <button id="crossButton" onclick="toggleTips()">❌</button>
                             <p><b>🔹 Hover the mouse over polity shapes on the map to reveal information.</b></p>
                             <p><b>🔹 Clicking polity shapes adds them to the legend.</b></p>
                             <p><b>🔹 Some polities have Seshat pages reachable with double click.</b></p>

From 853181475c6cf2c2a954e8e4ab311775871fbb26 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Tue, 3 Sep 2024 10:01:26 +0100
Subject: [PATCH 8/9] rename div

---
 seshat/apps/core/templates/core/world_map.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 6f1d36fad..00531f59b 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -132,7 +132,7 @@
         left: 4%;
         z-index: 1000;
     }
-    .toprightcontainer {
+    .helpcontainer {
         display: flex;
         position: absolute;
         top: 1%;
@@ -399,7 +399,7 @@ <h1 class="text-teal federicka-big">Background map</h1>
                 <div class="topleftcontainer">
                     <div id="popup" class="p-1"></div>
                 </div>
-                <div class="toprightcontainer">
+                <div class="helpcontainer">
                     <div id="help" class="p-1">
                         <div id="tips" class="tips-content">
                             <button id="crossButton" onclick="toggleTips()">❌</button>

From 6603fe659ab154bb47be5a8d0ba93172d7862998 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Tue, 3 Sep 2024 10:04:10 +0100
Subject: [PATCH 9/9] put help in middle of screen

---
 seshat/apps/core/templates/core/world_map.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 00531f59b..491699751 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -135,8 +135,8 @@
     .helpcontainer {
         display: flex;
         position: absolute;
-        top: 1%;
-        right: 4%;
+        top: 30%;
+        left: 30%;
         z-index: 1000;
     }