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

- replaced navigation over app and gamepad list to app components.

Browse Source 
- added css style for app class.
- replaced styles for header and footer to components.
- updated dependencies.
This commit is contained in:
Eugene Serb
2022-08-12 17:32:53 +03:00
parent 02d17b3e55
commit 4c5ee93b76
10 changed files with 212 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
package-lock.json generated
View File

@ -10478,16 +10478,16 @@
}
},
"node_modules/terser-webpack-plugin": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz",
"integrity": "sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==",
"version": "5.3.4",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.4.tgz",
"integrity": "sha512-SmnkUhBxLDcBfTIeaq+ZqJXLVEyXxSaNcCeSezECdKjfkMrTTnPvapBILylYwyEvHFZAn2cJ8dtiXel5XnfOfQ==",
"dev": true,
"dependencies": {
"@jridgewell/trace-mapping": "^0.3.7",
"@jridgewell/trace-mapping": "^0.3.14",
"jest-worker": "^27.4.5",
"schema-utils": "^3.1.1",
"serialize-javascript": "^6.0.0",
"terser": "^5.7.2"
"terser": "^5.14.1"
},
"engines": {
"node": ">= 10.13.0"
@ -19721,16 +19721,16 @@
}
},
"terser-webpack-plugin": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz",
"integrity": "sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==",
"version": "5.3.4",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.4.tgz",
"integrity": "sha512-SmnkUhBxLDcBfTIeaq+ZqJXLVEyXxSaNcCeSezECdKjfkMrTTnPvapBILylYwyEvHFZAn2cJ8dtiXel5XnfOfQ==",
"dev": true,
"requires": {
"@jridgewell/trace-mapping": "^0.3.7",
"@jridgewell/trace-mapping": "^0.3.14",
"jest-worker": "^27.4.5",
"schema-utils": "^3.1.1",
"serialize-javascript": "^6.0.0",
"terser": "^5.7.2"
"terser": "^5.14.1"
},
"dependencies": {
"schema-utils": {

153
public/css/styles.css
View File

@ -1,6 +1,6 @@
/* ------------------------------ */
/* Wavelovers styles */
/* version: dated 2022.08.08 */
/* version: dated 2022.08.12 */
/* author: Eugene Serb */
/* ------------------------------ */
@ -408,152 +408,17 @@ table, th, td {
/* COMPONENTS STYLES */
/* ----------------- */
/* ------ */
/* HEADER */
/* ------ */
/* --- */
/* APP */
/* --- */
.header {
border-bottom: 8px solid var(--color-header-borderline);
background: var(--color-header-background);
}
.header ::selection {
background: var(--color-header-selection);
}
.header :focus {
border-bottom: 2px solid var(--color-header-navigation-link-hover);
}
.header :focus-visible {
outline: 2px solid var(--color-header-navigation-link-hover);
border-color: transparent;
}
.header-wrapper {
padding-top: 32px;
padding-bottom: 16px;
}
.logo-wrapper {
text-align: center;
}
.logo-wrapper__logo {
font-size: 48px;
font-weight: 500;
color: var(--color-header-logo);
cursor: default;
}
.menu-wrapper {
margin-top: 16px;
align-self: center;
}
.navigation {
padding: 0;
list-style-type: none;
.app {
min-height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.navigation__item {
font-size: 16px;
text-transform: uppercase;
}
.navigation__item a {
border-color: transparent;
color: var(--color-header-navigation-link);
}
.navigation__item a:hover {
border-color: var(--color-header-navigation-link-hover);
color: var(--color-header-navigation-link-hover);
}
@media only screen and (min-width: 540px) {
.header {
border-bottom: 32px solid var(--color-header-borderline);
background: var(--color-header-background);
}
.header-wrapper {
padding-top: 64px;
padding-bottom: 16px;
}
.menu-wrapper {
margin-top: 32px;
align-self: center;
}
}
@media only screen and (min-width: 720px) {
.header-wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
gap: 64px;
}
.logo-wrapper {
width: 50%;
text-align: left;
}
.menu-wrapper {
width: 50%;
margin-top: 0px;
align-self: flex-end;
}
}
@media only screen and (min-width: 1024px) {
.logo-wrapper__logo {
font-size: 64px;
}
}
/* ------ */
/* FOOTER */
/* ------ */
.footer {
border-top: 4px solid var(--color-footer-borderline);
}
.footer span {
color: var(--color-footer-text);
}
.footer-wrapper {
padding-top: 32px;
padding-bottom: 32px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 32px;
}
.created-by {
align-self: flex-end;
}
.created-by > span {
padding-right: 8px;
}
.created-by > a {
font-size: 32px;
}
/* ---- */
/* PAGE */
/* ---- */
@ -625,10 +490,6 @@ table, th, td {
/* PAGES */
/* ----- */
/* ----------- */
/* WAVELOVERS */
/* ----------- */
.link_hash {
word-break: break-all;
}

2
public/index.html
View File

@ -66,7 +66,7 @@
</style>
</head>
<body>
<div id="app" v-cloak></div>
<div id="app" class="app" v-cloak></div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<noscript><div><img src="https://mc.yandex.ru/watch/89252711" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
</body>

16
src/App.vue
View File

@ -2,11 +2,7 @@
<HeaderItem />
<main class="page container">
<div class="wavelovers">
<NavigationList />
<router-view />
<GamepadList v-if="gamepads.length > 0"
:gamepads="gamepads" />
<MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem>
</div>
</main>
<FooterItem />
@ -17,24 +13,12 @@
import store from '@/store/index';
import HeaderItem from '@/components/HeaderItem.vue';
import FooterItem from '@/components/FooterItem.vue';
import NavigationList from '@/components/NavigationList.vue';
import GamepadList from '@/components/GamepadList.vue';
import MessageItem from '@/components/MessageItem.vue';
import Vibrator from '@/models/Vibrator';
export default defineComponent({
name: 'App',
components: {
HeaderItem: HeaderItem,
FooterItem: FooterItem,
NavigationList: NavigationList,
GamepadList: GamepadList,
MessageItem: MessageItem,
},
computed: {
gamepads: function (): Vibrator[] {
return store.getters.gamepads as Vibrator[];
},
},
methods: {
addEventListeners(): void {

18
src/components/AppCustom.vue
View File

@ -1,4 +1,5 @@
<template>
<NavigationList />
<div class="content-item app-custom">
<fieldset class="custom-form">
<label class="custom-form__input">
@ -31,16 +32,28 @@
</div>
</fieldset>
</div>
<GamepadList v-if="gamepads.length > 0"
:gamepads="gamepads" />
<MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import store from '@/store/index';
import NavigationList from '@/components/NavigationList.vue';
import GamepadList from '@/components/GamepadList.vue';
import MessageItem from '@/components/MessageItem.vue';
import Vibrator from '@/models/Vibrator';
import TPatternUnit from '@/models/TPatternUnit';
import PatternUnit from '@/models/PatternUnit';
export default defineComponent({
name: 'AppCustom',
components: {
NavigationList: NavigationList,
GamepadList: GamepadList,
MessageItem: MessageItem,
},
data: () => {
return {
startDelay: 250 as number,
@ -49,6 +62,11 @@
strongMagnitude: 1 as number,
};
},
computed: {
gamepads: function (): Vibrator[] {
return store.getters.gamepads as Vibrator[];
},
},
methods: {
start: function (): void {
const patterns: TPatternUnit[] = [new PatternUnit(

12
src/components/AppDiagnostic.vue
View File

@ -1,22 +1,32 @@
<template>
<NavigationList />
<div v-if="gamepads.length > 0" class="content-item">
<DiagnosticItem v-for="gamepad in gamepads"
:key="gamepad.id"
:gamepad="gamepad"
:timestamp="timestamp" />
</div>
<GamepadList v-if="gamepads.length > 0"
:gamepads="gamepads" />
<MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import store from '@/store/index';
import Vibrator from '@/models/Vibrator';
import NavigationList from '@/components/NavigationList.vue';
import GamepadList from '@/components/GamepadList.vue';
import MessageItem from '@/components/MessageItem.vue';
import DiagnosticItem from '@/components/DiagnosticItem.vue';
import Vibrator from '@/models/Vibrator';
export default defineComponent({
name: 'AppDiagnostic',
components: {
DiagnosticItem: DiagnosticItem,
NavigationList: NavigationList,
GamepadList: GamepadList,
MessageItem: MessageItem,
},
data: () => {
return {

12
src/components/AppManual.vue
View File

@ -1,4 +1,5 @@
<template>
<NavigationList />
<div class="content-item app-manual">
<label class="manual-form__input">
<span>Weak Magnitude</span>
@ -35,17 +36,28 @@
</div>
</div>
</div>
<GamepadList v-if="gamepads.length > 0"
:gamepads="gamepads" />
<MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import store from '@/store/index';
import NavigationList from '@/components/NavigationList.vue';
import GamepadList from '@/components/GamepadList.vue';
import MessageItem from '@/components/MessageItem.vue';
import Vibrator from '@/models/Vibrator';
import TPatternUnit from '@/models/TPatternUnit';
import PatternUnit from '@/models/PatternUnit';
export default defineComponent({
name: 'AppCustom',
components: {
NavigationList: NavigationList,
GamepadList: GamepadList,
MessageItem: MessageItem,
},
data: () => {
return {
timestamp: 0 as number,

14
src/components/AppPatterns.vue
View File

@ -1,4 +1,5 @@
<template>
<NavigationList />
<div class="app-patterns">
<PatternList v-if="patterns.length > 0"
:patterns="patterns"
@ -7,22 +8,33 @@
@change="change" />
<MessageItem v-else>Loading...</MessageItem>
</div>
<GamepadList v-if="gamepads.length > 0"
:gamepads="gamepads" />
<MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import store from '@/store/index';
import PatternList from '@/components/PatternList.vue';
import NavigationList from '@/components/NavigationList.vue';
import GamepadList from '@/components/GamepadList.vue';
import MessageItem from '@/components/MessageItem.vue';
import PatternList from '@/components/PatternList.vue';
import Vibrator from '@/models/Vibrator';
import TPattern from '@/models/TPattern';
export default defineComponent({
name: 'AppPatterns',
components: {
PatternList: PatternList,
NavigationList: NavigationList,
GamepadList: GamepadList,
MessageItem: MessageItem,
},
computed: {
gamepads: function (): Vibrator[] {
return store.getters.gamepads as Vibrator[];
},
patterns: function (): TPattern[] {
return store.getters.patterns as TPattern[];
},

32
src/components/FooterItem.vue
View File

@ -20,5 +20,35 @@
});
</script>
<style lang="scss"></style>
<style lang="scss">
.footer {
border-top: 4px solid var(--color-footer-borderline);
}
.footer span {
color: var(--color-footer-text);
}
.footer-wrapper {
padding-top: 32px;
padding-bottom: 32px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 32px;
}
.created-by {
align-self: flex-end;
}
.created-by > span {
padding-right: 8px;
}
.created-by > a {
font-size: 32px;
}
</style>

110
src/components/HeaderItem.vue
View File

@ -32,5 +32,113 @@
});
</script>
<style lang="scss"></style>
<style lang="scss">
.header {
border-bottom: 8px solid var(--color-header-borderline);
background: var(--color-header-background);
}
.header ::selection {
background: var(--color-header-selection);
}
.header :focus {
border-bottom: 2px solid var(--color-header-navigation-link-hover);
}
.header :focus-visible {
outline: 2px solid var(--color-header-navigation-link-hover);
border-color: transparent;
}
.header-wrapper {
padding-top: 32px;
padding-bottom: 16px;
}
.logo-wrapper {
text-align: center;
}
.logo-wrapper__logo {
font-size: 48px;
font-weight: 500;
color: var(--color-header-logo);
cursor: default;
}
.menu-wrapper {
margin-top: 16px;
align-self: center;
}
.navigation {
padding: 0;
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px;
}
.navigation__item {
font-size: 16px;
text-transform: uppercase;
}
.navigation__item a {
border-color: transparent;
color: var(--color-header-navigation-link);
}
.navigation__item a:hover {
border-color: var(--color-header-navigation-link-hover);
color: var(--color-header-navigation-link-hover);
}
@media only screen and (min-width: 540px) {
.header {
border-bottom: 32px solid var(--color-header-borderline);
background: var(--color-header-background);
}
.header-wrapper {
padding-top: 64px;
padding-bottom: 16px;
}
.menu-wrapper {
margin-top: 32px;
align-self: center;
}
}
@media only screen and (min-width: 720px) {
.header-wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
gap: 64px;
}
.logo-wrapper {
width: 50%;
text-align: left;
}
.menu-wrapper {
width: 50%;
margin-top: 0px;
align-self: flex-end;
}
}
@media only screen and (min-width: 1024px) {
.logo-wrapper__logo {
font-size: 64px;
}
}
</style>