Merge pull request #90 from evadecker/visual-tweaks

fix: Visual tweaks for easier percentage comparison
BetaNYC · Nov 8, 2023 · c65df6b · c65df6b
2 parents 5882a5b + 9c60fee
commit c65df6b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 50 deletions.
diff --git a/src/assets/boundaries/format.ts b/src/assets/boundaries/format.ts
@@ -89,9 +89,3 @@ export function get_cd_url(boro: string, cd: string) {
       return 'https://communityprofiles.planning.nyc.gov/';
   }
 }
-
-//https://stackoverflow.com/questions/5191088/how-to-round-up-a-number-in-javascript
-export function roundUp(num: number, precision: number) {
-  precision = Math.pow(10, precision);
-  return Math.ceil(num * precision) / precision;
-}
diff --git a/src/components/Sidebar/DistrictCopyClipboard.svelte b/src/components/Sidebar/DistrictCopyClipboard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { roundUp } from '../../assets/boundaries/format';
   export let layers: {};
   export let districts: any[];
+  export let buttonText: string = 'Copy to clipboard';
 
   function updateClipboard() {
     if (districts.length === 0) return;
@@ -23,30 +23,16 @@
     navigator.clipboard.writeText(
       rows.map((lines: []) => lines.join('\t')).join('\n')
     );
+
+    buttonText = 'Copied!';
   }
 </script>
 
 <button
-  class="mb-2 mx-2 px-2 hover:bg-gray-200 
-hover:text-blue-300 focus:outline-none focus:ring focus:ring-blue-500"
+  class="mb-2 mx-2 px-2 py-0.5 text-gray-500 rounded hover:bg-gray-200
+hover:text-gray-900 focus:outline-none focus:ring focus:ring-blue-500"
   on:click={updateClipboard}
   title="Copy overlaps to clipboard"
 >
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="h-4 w-4 inline-block"
-    width="20"
-    height="20"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="#000"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path
-      d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
-    />
-    <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
-  </svg>
+  {buttonText}
 </button>
diff --git a/src/components/Sidebar/DistrictLink.svelte b/src/components/Sidebar/DistrictLink.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { roundUp } from '../../assets/boundaries/format';
-
   export let onMouseOver: () => void;
   export let onMouseOut: () => void;
   export let onClick: () => void;
@@ -11,7 +9,7 @@
   export let searea: number;
   export let icon: string;
 
-  $: intersectingPercentage = roundUp((searea / area) * 100, 1) + '%';
+  $: intersectingPercentage = ((searea / area) * 100).toFixed(1) + '%';
 </script>
 
 <div
@@ -21,11 +19,27 @@
   on:mouseleave={onMouseOut}
   on:blur={onMouseOut}
 >
+  <button
+    on:click={onClick}
+    class="flex-1 flex text-left py-1 px-4 focus:outline-none focus:ring focus:ring-blue-500 focus:z-10"
+  >
+    <div class="mr-2">{icon}</div>
+    <div class="flex flex-row justify-between w-full">
+      <div class="flex flex-row">
+        {formatContent(nameCol)}
+      </div>
+      {#if area}
+        <p class="text-gray-500 tabular-nums ml-2">
+          {intersectingPercentage}
+        </p>
+      {/if}
+    </div>
+  </button>
   {#if formatUrl}
     <a
       href={formatUrl(nameCol)}
-      class="flex items-center py-1 px-1 mr-1 text-gray-400 border-b-2 border-stone-300 hover:bg-gray-200 
-              hover:text-blue-300 focus:outline-none focus:ring focus:ring-blue-500"
+      class="flex items-center py-1 px-3 -ml-4 text-gray-400
+              hover:text-gray-900 focus:outline-none focus:ring focus:ring-blue-500"
       target="_blank"
       title="Visit district {nameCol}'s webpage"
       rel="noreferrer"
@@ -45,20 +59,4 @@
       </svg>
     </a>
   {/if}
-  <button
-    on:click={onClick}
-    class="relative flex-1 flex text-left py-1 px-2 focus:outline-none focus:ring focus:ring-blue-500 focus:z-10"
-  >
-    <div class="mr-2">{icon}</div>
-    <div class="flex flex-row justify-between w-full">
-      <div class="flex flex-row">
-        {formatContent(nameCol)}
-      </div>
-      {#if area}
-        <p class="font-semibold">
-          {intersectingPercentage}
-        </p>
-      {/if}
-    </div>
-  </button>
 </div>
diff --git a/src/components/Sidebar/OverlapList.svelte b/src/components/Sidebar/OverlapList.svelte
@@ -64,9 +64,9 @@
       'Make sure you select coordinates within NYC.'}
   </div>
 {:else}
-  <div class="flex items-start place-content-between">
-    <h3 class="block text-lg mb-2 px-2 text-black-600 font-medium">Overlaps</h3>
-    <DistrictCopyClipboard layers={layers} districts={districts}/>
+  <div class="flex items-ceter place-content-between">
+    <h3 class="block text-lg mb-2 px-4 text-black-600 font-medium">Overlaps</h3>
+    <DistrictCopyClipboard {layers} {districts} />
   </div>
   {#each Object.entries(layers).filter(([key, _]) => key !== $selectedBoundaryMap) as [key, value]}
     {#if districts.filter(district => district.properties?.id === key).length}