Update Mapbox style conversion functions and UI in App.svelte

Youssef-Harby · Apr 11, 2024 · 3ba8d0b · 3ba8d0b
1 parent 5593036
commit 3ba8d0b
Showing 1 changed file with 44 additions and 9 deletions.
diff --git a/example/src/App.svelte b/example/src/App.svelte
@@ -14,6 +14,7 @@
     constructMapboxStyleFromEsriAbsolute,
   } from "@esri-style-ft-mapbox-style/esriToMapbox";
   import { get } from "svelte/store";
+  import { onMount } from "svelte";
 
   let esriUrlInput: string = "";
   let maplibreUrlInput: string = "";
@@ -68,11 +69,46 @@
   function convertMaplibreToEsriStyle(): void {
     esriStyleJson.set(get(maplibreStyleJson));
   }
+
+  onMount(() => {
+    convertEsriToMaplibreStyle();
+  });
+
+  $: {
+    convertEsriToMaplibreStyle();
+  }
 </script>
 
+<!-- Navbar -->
+<div class="navbar bg-gray-500 shadow-lg">
+  <div class="navbar-start">
+    <a class=" normal-case text-xl text-white" href="/"
+      >Vector Tiles Styles Converter (Esri - Mapbox)</a
+    >
+  </div>
+  <div class="navbar-end">
+    <a
+      href="https://github.com/Youssef-Harby/esri-style-ft-mapbox-style"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <svg
+        class="w-8 h-6 btn-square btn"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"
+          fill="currentColor"
+        />
+      </svg>
+    </a>
+  </div>
+</div>
 <div class="flex flex-col md:flex-row h-screen">
   <!-- CODE EDITOR 1 -->
-  <div class="flex-1 flex flex-col">
+  <div class="flex-1 flex flex-col sm:h-full">
     <div class="flex-1 p-4 overflow-auto bg-gray-50">
       <CodeEditor
         bind:content={$esriStyleJson}
@@ -94,24 +130,24 @@
     </div>
   </div>
 
-  <!-- Divider with buttons -->
+  <!-- DIVIDER -->
   <div
-    class="flex flex-col justify-center items-center p-2 bg-gray-500 shadow z-10 md:w-16 md:flex"
+    class="flex justify-center items-center p-2 bg-gray-500 shadow z-10 w-full md:w-16 h-full md:flex-col sm:flex-row"
   >
     <button
-      class="btn btn-outline-white btn-md my-2"
+      class="btn btn-outline-white btn-md mx-2 md:my-2"
       on:click={convertEsriToMaplibreStyle}>⇨</button
     >
     <button
-      class="btn btn-outline-white btn-md my-2"
+      class="btn btn-outline-white btn-md mx-2 md:my-2"
       on:click={convertMaplibreToEsriStyle}>⇦</button
     >
-    <button class="btn btn-circle btn-sm my-2">⟳</button>
-    <button class="btn btn-circle btn-sm my-2">≡</button>
+    <!-- <button class="btn btn-circle btn-sm mx-2 md:my-2">⟳</button> -->
+    <!-- <button class="btn btn-circle btn-sm mx-2 md:my-2">≡</button> -->
   </div>
 
   <!-- CODE EDITOR 2 -->
-  <div class="flex-1 flex flex-col">
+  <div class="flex-1 flex flex-col sm:h-full">
     <div class="flex-1 p-4 overflow-auto bg-gray-50">
       <CodeEditor
         bind:content={$maplibreStyleJson}
@@ -131,7 +167,6 @@
       >
     </div>
     <div class="flex-1">
-      <!-- Show map in both mobile and desktop view -->
       <MaplibreMap></MaplibreMap>
     </div>
   </div>