seed-rs · arn-the-long-beard · Oct 28, 2020 · Oct 28, 2020 · Oct 28, 2020 · Oct 28, 2020
diff --git a/Cargo.toml b/Cargo.toml
@@ -116,6 +116,7 @@ features = [
 
 [workspace]
 members = [
+    "examples/advanced_routing",
     "examples/animation",
     "examples/auth",
     "examples/bunnies",

diff --git a/examples/advanced_routing/Cargo.toml b/examples/advanced_routing/Cargo.toml
@@ -0,0 +1,33 @@
+[package]
+name = "advanced_routing"
+version = "0.0.1"
+authors = ["arn-the-long-beard <[email protected]>"]
+edition = "2018"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+[lib]
+crate-type = ["cdylib" ,"rlib"]
+
+[dependencies]
+seed = { git = "https://github.com/seed-rs/seed" }
+seed_routing = { git ="https://github.com/arn-the-long-beard/seed-routing" , branch="main" }
+serde = "1.0.115"
+serde_json = "1.0.51"
+heck="0.3.1"
+
+[dependencies.web-sys]
+version = "0.3"
+
+
+[dev-dependencies]
+wasm-bindgen-test = "0.3.17"
+
+[profile.release]
+lto = true
+
+opt-level = 'z'
+codegen-units = 1
+
+[package.metadata.wasm-pack.profile.release]
+wasm-opt = ['-O3']
+
diff --git a/examples/advanced_routing/Makefile.toml b/examples/advanced_routing/Makefile.toml
@@ -0,0 +1,27 @@
+extend = "../../Makefile.toml"
+
+# ---- BUILD ----
+
+[tasks.build]
+alias = "default_build"
+
+[tasks.build_release]
+alias = "default_build_release"
+
+# ---- START ----
+
+[tasks.start]
+alias = "default_start"
+
+[tasks.start_release]
+alias = "default_start_release"
+
+# ---- TEST ----
+
+[tasks.test_firefox]
+alias = "default_test_firefox"
+
+# ---- LINT ----
+
+[tasks.clippy]
+alias = "default_clippy"
diff --git a/examples/advanced_routing/index.html b/examples/advanced_routing/index.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
+          integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
+          crossorigin="anonymous"/>
+    <title>Simple Dashboard</title>
+    <style>
+
+        section {
+            white-space: pre;
+            font-family: monospace;
+        }
+
+        input, label {
+            padding: 5px;
+            margin: 5px;
+        }
+
+       button {
+           margin: 10px;
+       }
+
+        li {
+            padding: 2px;
+            margin: 2px;
+        }
+
+        input {
+            border: 1px solid lightskyblue;
+        }
+
+
+        .centred {
+            margin: auto;
+            width: 50%;
+            flex-direction: column;
+            text-align: center;
+            padding: 10px;
+            border: 1px solid lightskyblue;
+        }
+
+        form, fieldset {
+            margin: auto;
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        fieldset {
+            margin: 15px;
+            padding-bottom: 15px;
+        }
+
+        .route {
+            padding: 2px;
+            margin: 2px;
+        }
+
+        .active-route {
+            background: lightskyblue;
+        }
+        .locked-route {
+            background: lightcoral;
+        }
+        .locked-admin-route {
+            background: lightsalmon;
+        }
+
+        .user_button {
+            /*height: 24px;*/
+            /*width: 24px;*/
+        }
+
+        .power {
+            transition-timing-function: ease-in-out;
+            height: 25px;
+            transition: width 0.5s;
+        }
+
+        .lds-ring {
+            display: inline-block;
+            position: relative;
+            width: 80px;
+            height: 80px;
+        }
+
+        .lds-ring div {
+            box-sizing: border-box;
+            display: block;
+            position: absolute;
+            width: 64px;
+            height: 64px;
+            margin: 8px;
+            border: 8px solid midnightblue;
+            border-radius: 50%;
+            animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+            border-color: midnightblue transparent transparent transparent;
+        }
+
+        .lds-ring div:nth-child(1) {
+            animation-delay: -0.45s;
+        }
+
+        .lds-ring div:nth-child(2) {
+            animation-delay: -0.3s;
+        }
+
+        .lds-ring div:nth-child(3) {
+            animation-delay: -0.15s;
+        }
+
+        @keyframes lds-ring {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+    </style>
+</head>
+
+<body>
+<section id="app"></section>
+<script type="module">
+    import init from '/pkg/package.js';
+
+    init('/pkg/package_bg.wasm');
+</script>
+</body>
+
+</html>