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 new component message-item, decomposited wavelovers-app

Browse Source
This commit is contained in:
Eugene Serb 2022-06-30 20:15:31 +03:00
parent c66bae7371
commit e577886cdf
4 changed files with 54 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/GamepadList.vue
View File

@ -24,6 +24,10 @@
<style>
.device-list {
margin-bottom: 16px;
padding: 32px;
border-radius: var(--number-border-radius);
background: var(--color-content-item-background);
display: flex;
flex-direction: row;
justify-content: space-around;

35
src/components/MessageItem.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="message">
<span>
<slot></slot>
</span>
</div>
</template>
<script>
export default {
name: 'MessageItem',
components: {},
};
</script>
<style>
.message {
width: 100%;
margin-bottom: 16px;
padding: 32px;
border-radius: var(--number-border-radius);
background: var(--color-content-item-background);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-size: 16px;
}
@media only screen and (min-width: 540px) {
.message {
font-size: 24px;
}
}
</style>

4
src/components/PatternList.vue
View File

@ -39,6 +39,10 @@
<style>
.pattern-list {
margin-bottom: 16px;
padding: 32px;
border-radius: var(--number-border-radius);
background: var(--color-content-item-background);
display: flex;
flex-direction: row;
justify-content: space-around;

29
src/components/WaveloversApp.vue
View File

@ -1,22 +1,14 @@
<template>
<div class="wavelovers">
<div class="content-item">
<PatternList v-if="patterns.length > 0"
:patterns="patterns"
:mode="mode"
:isActive="isActive"
@change="change" />
<div class="message" v-else>
<span>Loading...</span>
</div>
</div>
<div class="content-item">
<MessageItem v-else>Loading...</MessageItem>
<GamepadList v-if="gamepads.length > 0"
:gamepads="gamepads" />
<div class="message" v-else>
<span>Press any gamepad's button or connect new gamepad.</span>
</div>
</div>
<MessageItem v-else>Press any gamepad's button or connect new gamepad.</MessageItem>
</div>
</template>
@ -24,12 +16,14 @@
import PatternList from '@/components/PatternList.vue';
import GamepadList from '@/components/GamepadList.vue';
import Gamepad from '@/components/Gamepad.js';
import MessageItem from '@/components/MessageItem.vue';
export default {
name: 'WaveloversApp',
components: {
PatternList: PatternList,
GamepadList: GamepadList,
MessageItem: MessageItem,
},
data: () => {
return {
@ -116,19 +110,4 @@
flex-direction: column;
}
}
.message {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-size: 16px;
}
@media only screen and (min-width: 540px) {
.message {
font-size: 24px;
}
}
</style>