fix: format, lint, props warning
This commit is contained in:
parent
56d00d9b69
commit
b195b89fa9
13
src/App.vue
13
src/App.vue
@ -36,19 +36,22 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main>
|
||||||
<h1 id="main-title" class="main-title" v-if="store.mainMenu || windowWidth <= 800">
|
<h1
|
||||||
|
v-if="store.mainMenu || windowWidth <= 800"
|
||||||
|
id="main-title"
|
||||||
|
class="main-title"
|
||||||
|
>
|
||||||
<span id="burger-toggle" class="burger-toggle" @click="toggleMainMenu">
|
<span id="burger-toggle" class="burger-toggle" @click="toggleMainMenu">
|
||||||
{{ store.mainMenu == true ? "▼" : "☰" }}
|
{{ store.mainMenu == true ? "▼" : "☰" }}
|
||||||
</span>
|
</span>
|
||||||
<span>Cellular Automata Explorer</span>
|
<span>Cellular Automata Explorer</span>
|
||||||
</h1>
|
</h1>
|
||||||
<div id="container" class="container">
|
<div id="container" class="container">
|
||||||
<MainMenu class="main-menu" v-if="store.mainMenu || windowWidth >= 800" />
|
<MainMenu v-if="store.mainMenu || windowWidth >= 800" class="main-menu" />
|
||||||
<CanvasBoard />
|
<CanvasBoard />
|
||||||
</div>
|
</div>
|
||||||
<MenuReset :windowWidth=windowWidth />
|
<MenuReset :window-width="windowWidth" />
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style src="./assets/css/main.css">
|
<style src="./assets/css/main.css"></style>
|
||||||
</style>
|
|
||||||
|
@ -38,7 +38,8 @@ h2,
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, .desktop-title {
|
h1,
|
||||||
|
.desktop-title {
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
@ -77,7 +78,6 @@ select {
|
|||||||
input[type="number"] {
|
input[type="number"] {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="button"] {
|
input[type="button"] {
|
||||||
@ -166,7 +166,9 @@ label,
|
|||||||
vertical-align: center;
|
vertical-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.next, .stop, .reset {
|
.next,
|
||||||
|
.stop,
|
||||||
|
.reset {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
@ -2,13 +2,22 @@
|
|||||||
import { globalStore } from "../stores/index.js";
|
import { globalStore } from "../stores/index.js";
|
||||||
import { defineProps } from "vue";
|
import { defineProps } from "vue";
|
||||||
|
|
||||||
const props = defineProps(['windowWidth']);
|
const props = defineProps(
|
||||||
|
{
|
||||||
|
windowWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 800
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
const store = globalStore();
|
const store = globalStore();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="reset-menu">
|
<div class="reset-menu">
|
||||||
<div class="desktop-title" v-if="windowWidth >= 800">Cellular Automata Explorer</div>
|
<div v-if="props.windowWidth >= 800" class="desktop-title">
|
||||||
|
Cellular Automata Explorer
|
||||||
|
</div>
|
||||||
<div class="reset-input">
|
<div class="reset-input">
|
||||||
<div class="loop">
|
<div class="loop">
|
||||||
<label>
|
<label>
|
||||||
|
Loading…
Reference in New Issue
Block a user