From 47ac680d02e1aa7e3233f2eded5a343008453973 Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Fri, 25 Aug 2023 14:36:51 +0200
Subject: [PATCH] make sector zoom areas larger to ease touch on mobile #103

---
 src/components/NetworkMapSectors.vue | 66 +++++++++++++---------------
 src/views/HomeView.vue               |  2 +-
 2 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/src/components/NetworkMapSectors.vue b/src/components/NetworkMapSectors.vue
index 95eedbf..f747870 100644
--- a/src/components/NetworkMapSectors.vue
+++ b/src/components/NetworkMapSectors.vue
@@ -1,41 +1,29 @@
 <template>
   <g id="sectors">
-    <text
-      v-if="showSectors[0]"
-      x="100"
-      y="-100"
-      text-anchor="end"
-      @click="$emit('zoom-sector', 1, -1)"
-    >
-      {{ Sectors[0] }}
-    </text>
-    <text
-      v-if="showSectors[1]"
-      x="-100"
-      y="-100"
-      text-anchor="start"
-      @click="$emit('zoom-sector', -1, -1)"
-    >
-      {{ Sectors[1] }}
-    </text>
-    <text
-      v-if="showSectors[2]"
-      x="-100"
-      y="100"
-      text-anchor="start"
-      @click="$emit('zoom-sector', -1, 1)"
-    >
-      {{ Sectors[2] }}
-    </text>
-    <text
-      v-if="showSectors[3]"
-      x="87"
-      y="100"
-      text-anchor="end"
-      @click="$emit('zoom-sector', 1, 1)"
-    >
-      {{ Sectors[3] }}
-    </text>
+    <g @click="$emit('zoom-sector', 1, -1)" v-if="showSectors[0]">
+      <rect x="80" width="21" y="-106" height="11" />
+      <text x="100" y="-100" text-anchor="end">
+        {{ Sectors[0] }}
+      </text>
+    </g>
+    <g @click="$emit('zoom-sector', -1, -1)" v-if="showSectors[1]">
+      <rect x="-101" width="50" y="-106" height="11" />
+      <text x="-100" y="-100" text-anchor="start">
+        {{ Sectors[1] }}
+      </text>
+    </g>
+    <g @click="$emit('zoom-sector', -1, 1)" v-if="showSectors[2]">
+      <rect x="-101" width="30" y="95" height="11" />
+      <text x="-100" y="101" text-anchor="start">
+        {{ Sectors[2] }}
+      </text>
+    </g>
+    <g @click="$emit('zoom-sector', 1, 1)" v-if="showSectors[3]">
+      <rect x="50" width="40" y="95" height="11" />
+      <text x="87" y="101" text-anchor="end">
+        {{ Sectors[3] }}
+      </text>
+    </g>
   </g>
 </template>
 
@@ -88,4 +76,10 @@ text {
   fill: gray;
   cursor: zoom-in;
 }
+
+rect {
+  fill: white;
+  fill-opacity: 0.25;
+  cursor: zoom-in;
+}
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 727efd8..86dcb6e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -169,7 +169,7 @@ export default defineComponent({
 }
 
 #forms {
-  padding: 1px 3px 7px 0;
+  padding: 1px 3px 7px 1px;
   /*            font-size: 120%; */
   flex-grow: 1;
 }