mirror/wavelovers
1
0
Fork 0
mirror of https://github.com/eugene-serb/wavelovers.git synced 2023-09-09 23:41:16 +03:00
Code Issues Projects Releases Wiki Activity

- Added page-not-found-404 view.

Browse Source 
- 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.
This commit is contained in:
Eugene Serb 2022-08-07 22:36:48 +03:00
parent ebe813e7d3
commit 512afa553b
7 changed files with 112 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
public/assets/patterns.json
View File

@ -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
}
]
}
]

4
public/css/styles.css
View File

@ -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);
}

4
src/App.vue
View File

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

1
src/components/AppManual.vue
View File

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

24
src/components/PatternItem.vue
View File

@ -6,8 +6,12 @@
]">
<span class="pattern-item__icon"
v-text="pattern.icon"></span>
<div class="pattern-item__info-container">
<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,8 +77,22 @@
font-size: 24px;
}
.pattern-item__info-container {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: left;
}
.pattern-item__name {
font-size: 14px;
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);

12
src/router/index.ts
View File

@ -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',
},
];

16
src/views/NotFoundView.vue Normal file
View File

@ -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>