- Added page-not-found-404 view.

- Modified pattern-item component template and styles. Show now pattern type. Changed sizes.
- Modified patterns order.
- Made lazy-loads in vue-router.
- Made catch-all redirect for 404.
- Fixes in input-range.
- Cleaned code.

public/assets/patterns.json

@@ -26,8 +26,21 @@
     ]
   },
   {
-    "name": "Dotted AC",
+    "name": "Dotted Max",
     "type": "Simple",
+    "icon": "🙃",
+    "pattern": [
+      {
+        "startDelay": 200,
+        "duration": 100,
+        "weakMagnitude": 1.0,
+        "strongMagnitude": 1.0
+      }
+    ]
+  },
+  {
+    "name": "Dotted AC",
+    "type": "Combined",
     "icon": "🤨",
     "pattern": [
       {
@@ -44,19 +57,6 @@
       }
     ]
   },
-  {
-    "name": "Dotted Max",
-    "type": "Simple",
-    "icon": "🙃",
-    "pattern": [
-      {
-        "startDelay": 200,
-        "duration": 100,
-        "weakMagnitude": 1.0,
-        "strongMagnitude": 1.0
-      }
-    ]
-  },
   {
     "name": "Short Dashed Weak",
     "type": "Simple",
@@ -84,8 +84,21 @@
     ]
   },
   {
-    "name": "Short Dashed AC",
+    "name": "Short Dashed Max",
     "type": "Simple",
+    "icon": "😊",
+    "pattern": [
+      {
+        "startDelay": 200,
+        "duration": 250,
+        "weakMagnitude": 1.0,
+        "strongMagnitude": 1.0
+      }
+    ]
+  },
+  {
+    "name": "Short Dashed AC",
+    "type": "Combined",
     "icon": "🤤",
     "pattern": [
       {
@@ -102,19 +115,6 @@
       }
     ]
   },
-  {
-    "name": "Short Dashed Max",
-    "type": "Simple",
-    "icon": "😊",
-    "pattern": [
-      {
-        "startDelay": 200,
-        "duration": 250,
-        "weakMagnitude": 1.0,
-        "strongMagnitude": 1.0
-      }
-    ]
-  },
   {
     "name": "Long Dashed Weak",
     "type": "Simple",
@@ -142,8 +142,21 @@
     ]
   },
   {
-    "name": "Long Dashed AC",
+    "name": "Long Dashed Max",
     "type": "Simple",
+    "icon": "🤪",
+    "pattern": [
+      {
+        "startDelay": 200,
+        "duration": 500,
+        "weakMagnitude": 1.0,
+        "strongMagnitude": 1.0
+      }
+    ]
+  },
+  {
+    "name": "Long Dashed AC",
+    "type": "Combined",
     "icon": "😝",
     "pattern": [
       {
@@ -160,19 +173,6 @@
       }
     ]
   },
-  {
-    "name": "Long Dashed Max",
-    "type": "Simple",
-    "icon": "🤪",
-    "pattern": [
-      {
-        "startDelay": 200,
-        "duration": 500,
-        "weakMagnitude": 1.0,
-        "strongMagnitude": 1.0
-      }
-    ]
-  },
   {
     "name": "Constant Weak",
     "type": "Simple",
@@ -200,8 +200,21 @@
     ]
   },
   {
-    "name": "Constant AC",
+    "name": "Constant Max",
     "type": "Simple",
+    "icon": "😍",
+    "pattern": [
+      {
+        "startDelay": 0,
+        "duration": 1000,
+        "weakMagnitude": 1.0,
+        "strongMagnitude": 1.0
+      }
+    ]
+  },
+  {
+    "name": "Constant AC",
+    "type": "Combined",
     "icon": "😵",
     "pattern": [
       {
@@ -217,18 +230,5 @@
         "strongMagnitude": 1.0
       }
     ]
-  },
-  {
-    "name": "Constant Max",
-    "type": "Simple",
-    "icon": "😍",
-    "pattern": [
-      {
-        "startDelay": 0,
-        "duration": 1000,
-        "weakMagnitude": 1.0,
-        "strongMagnitude": 1.0
-      }
-    ]
   }
 ]

public/css/styles.css

@@ -236,14 +236,14 @@ option {
 input[type=range] {
     width: 100%;
     margin: 8px 0;
-    padding: 0;
+    padding: 4px 0;
     border: 0px solid var(--color-link);
     -webkit-appearance: none;
 }
 
     input[type=range]:hover {
         margin: 8px 0;
-        padding: 0;
+        padding: 4px 0;
         border: 0px solid var(--color-link-hover);
     }
 

src/App.vue

@@ -47,7 +47,3 @@
     });
 </script>
 
-<style lang="scss">
-    
-</style>
-

src/components/AppManual.vue

@@ -79,6 +79,7 @@
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 8px;
+        align-items: center;
     }
 </style>
 

src/components/PatternItem.vue

@@ -6,8 +6,12 @@
                  ]">
         <span class="pattern-item__icon"
               v-text="pattern.icon"></span>
-        <span class="pattern-item__name"
+        <div class="pattern-item__info-container">
-              v-text="pattern.name"></span>
+            <span class="pattern-item__name"
+                  v-text="pattern.name"></span>
+            <span class="pattern-item__type"
+                  v-text="pattern.type"></span>
+        </div>
     </div>
 </template>
 
@@ -41,14 +45,14 @@
 <style lang="scss">
     .pattern-item {
         width: 100%;
-        height: 48px;
+        height: 50px;
         padding: 8px;
         border-radius: var(--number-border-radius);
         background: var(--color-pattern-button);
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
-        gap: 16px;
+        gap: 8px;
         align-items: center;
         text-align: center;
         overflow: hidden;
@@ -73,11 +77,25 @@
         font-size: 24px;
     }
 
-    .pattern-item__name {
+    .pattern-item__info-container {
-        font-size: 14px;
+        display: flex;
-        white-space: nowrap;
+        flex-direction: column;
-        overflow: hidden;
+        justify-content: space-between;
-        color: var(--color-pattern-text);
+        text-align: left;
     }
+
+        .pattern-item__name {
+            font-size: 16px;
+            white-space: nowrap;
+            overflow: hidden;
+            color: var(--color-pattern-text);
+        }
+
+        .pattern-item__type {
+            font-size: 12px;
+            white-space: nowrap;
+            overflow: hidden;
+            color: var(--color-pattern-text);
+        }
 </style>
 

src/router/index.ts

@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 import PatternsView from '@/views/PatternsView.vue';
-import ManualView from '@/views/ManualView.vue';
 
 const routes: Array<RouteRecordRaw> = [
     {
@@ -11,7 +10,16 @@ const routes: Array<RouteRecordRaw> = [
     {
         path: '/manual',
         name: 'manual-view',
-        component: ManualView,
+        component: () => import('@/views/ManualView.vue'),
+    },
+    {
+        path: '/404',
+        name: '404',
+        component: () => import('@/views/NotFoundView.vue'),
+    },
+    {
+        path: '/:catchAll(.*)',
+        redirect: '/404',
     },
 ];
 

src/views/NotFoundView.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="content-item">
+        <center>
+            <h2>404. Page not Found...</h2>
+        </center>
+    </div>
+</template>
+
+<script lang="ts">
+    import { defineComponent } from 'vue';
+
+    export default defineComponent({
+        name: 'NotFoundView',
+    });
+</script>
+