From 35436dec0987a1dd21886faf654387d7061a9508 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Mon, 2 May 2022 18:45:56 -0600
Subject: [PATCH] Fix service area map legend being too small on iPhone SE

---
 www/assets/css/customstyles.css | 19 +++++++++++++++++++
 www/pages/servicearea.html      | 24 ++++++++++++++----------
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/www/assets/css/customstyles.css b/www/assets/css/customstyles.css
index 3fae2dd..4523a16 100644
--- a/www/assets/css/customstyles.css
+++ b/www/assets/css/customstyles.css
@@ -51,6 +51,25 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     margin: 0;
 }
 
+/*
+
+    Service Area page
+
+*/
+
+.md, .aurora {
+    --service-area-map-height: calc(100vh - calc(var(--f7-navbar-height) + var(--f7-toolbar-height)));
+}
+
+.ios {
+    --service-area-map-height: calc(100vh - calc(var(--f7-navbar-height) + calc(var(--f7-toolbar-height) * 2)));
+}
+
+#mapbox-servicearea {
+    width: 100%;
+    height: var(--service-area-map-height);
+}
+
 
 /*
 
diff --git a/www/pages/servicearea.html b/www/pages/servicearea.html
index 97c2a6d..ad4f018 100644
--- a/www/pages/servicearea.html
+++ b/www/pages/servicearea.html
@@ -17,16 +17,20 @@
         </div>
     </div>
 
-    <div class="toolbar toolbar-top">
-        <div class="toolbar-inner justify-content-start">
-            <span class="margin-horizontal-half">Legend:</span>
-            <span class="badge margin-horizontal-half padding-half" style="background-color: rgba(0,135,51,0.7)/*#008733*/;">Notary</span>
-            <span class="badge margin-horizontal-half padding-half" style="background-color: rgba(0,83,135,0.7)/*#005387*/;">Courier</span>
-            <a class="margin-horizontal-half link" href="#" onclick="openServiceAreaExtraChargeInfo()">Outside Service Area?</a>
-        </div>
-    </div>
-
     <div class="page-content noselect">
-        <div id="mapbox-servicearea" style="width: 100%; height: calc(100vh - calc(var(--f7-navbar-height) + var(--f7-toolbar-height)));"></div>
+        <div class="toolbar">
+            <div class="toolbar-inner justify-content-start">
+                <span class="margin-horizontal-half">Legend:</span>
+                <span class="badge margin-horizontal-half padding-half" style="background-color: rgba(0,135,51,0.7)/*#008733*/;">Notary</span>
+                <span class="badge margin-horizontal-half padding-half" style="background-color: rgba(0,83,135,0.7)/*#005387*/;">Courier</span>
+                <a class="margin-horizontal-half link if-not-ios" href="#" onclick="openServiceAreaExtraChargeInfo()">Outside Service Area?</a>
+            </div>
+        </div>
+        <div class="toolbar if-ios">
+            <div class="toolbar-inner justify-content-start">
+                <a class="margin-horizontal-half link" href="#" onclick="openServiceAreaExtraChargeInfo()">Outside Service Area?</a>
+            </div>
+        </div>
+        <div id="mapbox-servicearea"></div>
     </div>
 </div>
\ No newline at end of file