fix: format, lint, props warning

This commit is contained in:
Ali Gator 2024-04-27 16:04:59 +02:00
parent 56d00d9b69
commit b195b89fa9
3 changed files with 25 additions and 11 deletions

View File

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

View File

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

View File

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