make sector zoom areas larger to ease touch on mobile #103

fhstp · Aug 25, 2023 · 47ac680 · 47ac680
1 parent 8f9346f
commit 47ac680
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 37 deletions.
diff --git 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
@@ -169,7 +169,7 @@ export default defineComponent({
 }
 
 #forms {
-  padding: 1px 3px 7px 0;
+  padding: 1px 3px 7px 1px;
   /*            font-size: 120%; */
   flex-grow: 1;
 }