Merge pull request #1 from he1d1/ui

Initial UI revision
2022-10-29 18:50:01 +01:00 · 2022-10-29 18:50:01 +01:00 · 7724642027
commit 7724642027
parent 9d66cdc032 057818a234
13 changed files with 1387 additions and 137 deletions
--- a/.gitignore
+++ b/.gitignore
@ -53,12 +53,37 @@ coverage.xml
 .pytest_cache/
 cover/

+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
 # Translations
 *.mo
 *.pot

 # Django stuff:
 *.log
+
+web/.env
+=======
 local_settings.py
 db.sqlite3
 db.sqlite3-journal
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,67 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "axios": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
+      "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
+    "follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,5 @@
+{
+	"devDependencies": {
+		"@beyonk/svelte-mapbox": "^8.1.4"
+	}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -0,0 +1,13 @@
+lockfileVersion: 5.4
+
+specifiers:
+  '@beyonk/svelte-mapbox': ^8.1.4
+
+devDependencies:
+  '@beyonk/svelte-mapbox': 8.1.4
+
+packages:
+
+  /@beyonk/svelte-mapbox/8.1.4:
+    resolution: {integrity: sha512-H7c5i+iWReb3try5Vk2rIeIXJ6BqmO3eb8OeBntrdKAiKEA0ye7n5t4C13Ne4vvMrfqqzyHuV6kGsM0y/g+lJg==}
+    dev: true
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@ -12,11 +12,14 @@
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.1.0",
    "@tsconfig/svelte": "^3.0.0",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.18",
    "svelte": "^3.52.0",
    "svelte-check": "^2.9.2",
    "svelte-preprocess": "^4.10.7",
+    "tailwindcss": "^3.2.1",
    "tslib": "^2.4.0",
    "typescript": "^4.6.4",
    "vite": "^3.2.0"
  }
-}
+}
--- a/web/postcss.config.cjs
+++ b/web/postcss.config.cjs
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@ -1,45 +1,70 @@
 <script lang="ts">
-  import svelteLogo from './assets/svelte.svg'
-  import Counter from './lib/Counter.svelte'
+  import { Map, Geocoder, Marker, controls } from "@beyonk/svelte-mapbox";
+  import { onMount } from "svelte";
+
+  const { GeolocateControl, NavigationControl, ScaleControl } = controls;
+
+  let mapComponent;
+  onMount(() =>
+    mapComponent.flyTo({ center: [-1.8972671999999875, 52.481229569377945] })
+  );
+  // Define this to handle `eventname` events - see [GeoLocate Events](https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol-events)
+  function eventHandler(e) {
+    const data = e.detail;
+    // do something with `data`, it's the result returned from the mapbox event
+  }
 </script>

-<main>
-  <div>
-    <a href="https://vitejs.dev" target="_blank"> 
-      <img src="/vite.svg" class="logo" alt="Vite Logo" />
-    </a>
-    <a href="https://svelte.dev" target="_blank"> 
-      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
-    </a>
+<main class="h-screen flex">
+  <aside
+    class="h-screen md:w-2/3 lg:w-1/2 xl:w-1/3 w-full bg-gray-200 p-4 flex flex-col gap-4"
+  >
+    <nav class="-m-4 mb-0 p-4 bg-gray-100 shadow flex justify-between">
+      <p>Duck Pond</p>
+      <p>🦆</p>
+    </nav>
+    <article
+      class="bg-gray-100 rounded-lg w-full shadow p-4 flex items-center gap-4 divide-x divide-gray-300"
+    >
+      <article class="flex flex-col items-center text-yellow-500 font-bold">
+        420
+        <small class="font-normal">quacks</small>
+      </article>
+      <article class="pl-4">
+        <h1 class="text-xl font-bold">Hanely Swan Duck Pond</h1>
+        <small class="text-gray-600">0.4 miles · 6 min walk</small>
+      </article>
+    </article>
+  </aside>
+
+  <div class="map flex-1">
+    <Map
+      accessToken={import.meta.env.VITE_KEY}
+      bind:this={mapComponent}
+      on:recentre={(e) => console.log(e.detail.center.lat, e.detail.center.lng)}
+      options={{ scrollZoom: false }}
+    >
+      <Marker
+        lat={52}
+        lng={-1.8}
+        color="rgb(255,255,255)"
+        label="Mill Pond11"
+        popupClassName="class-name"
+      />
+      <NavigationControl />
+      <GeolocateControl
+        options={{ some: "control-option" }}
+        on:eventname={eventHandler}
+      />
+      <ScaleControl />
+    </Map>
  </div>
-  <h1>Vite + Svelte</h1>
-
-  <div class="card">
-    <Counter />
-  </div>
-
-  <p>
-    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank">SvelteKit</a>, the official Svelte app framework powered by Vite!
-  </p>
-
-  <p class="read-the-docs">
-    Click on the Vite and Svelte logos to learn more
-  </p>
 </main>

 <style>
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
+  #map {
+    height: 600px;
+    width: auto;
+    background: #75cff0;
  }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-  }
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00aa);
-  }
-  .read-the-docs {
-    color: #888;
-  }
-</style>
+</style>
--- a/web/src/app.css
+++ b/web/src/app.css
@ -1,81 +1,3 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/web/src/lib/Counter.svelte
+++ b/web/src/lib/Counter.svelte
@ -1,10 +0,0 @@
-<script lang="ts">
-  let count: number = 0
-  const increment = () => {
-    count += 1
-  }
-</script>
-
-<button on:click={increment}>
-  count is {count}
-</button>
--- a/web/src/main.ts
+++ b/web/src/main.ts
@ -1,8 +1,8 @@
-import './app.css'
-import App from './App.svelte'
+import "./app.css";
+import App from "./App.svelte";

 const app = new App({
-  target: document.getElementById('app')
-})
+  target: document.getElementById("app"),
+});

-export default app
+export default app;
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@ -1,7 +1,9 @@
-import sveltePreprocess from 'svelte-preprocess'
+import sveltePreprocess from "svelte-preprocess";

 export default {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
-  preprocess: sveltePreprocess()
-}
+  preprocess: sveltePreprocess({
+    postcss: true,
+  }),
+};
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js,svelte,ts}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};