fix: added class for css styling (rather than id selector)
This commit is contained in:
parent
69fad85b45
commit
b68457c9a1
12
src/App.vue
12
src/App.vue
@ -35,19 +35,19 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="main">
|
||||
<h1 id="main-title" v-if="store.mainMenu || windowWidth <= 800">
|
||||
<span id="burger-toggle" @click="toggleMainMenu">
|
||||
<main>
|
||||
<h1 id="main-title" class="main-title" v-if="store.mainMenu || windowWidth <= 800">
|
||||
<span id="burger-toggle" class="burger-toggle" @click="toggleMainMenu">
|
||||
{{ store.mainMenu == true ? "▼" : "☰" }}
|
||||
</span>
|
||||
<span >Cellular Automata Explorer</span>
|
||||
</h1>
|
||||
<div id="container">
|
||||
<MainMenu v-if="store.mainMenu || windowWidth >= 800" />
|
||||
<div id="container" class="container">
|
||||
<MainMenu class="main-menu" v-if="store.mainMenu || windowWidth >= 800" />
|
||||
<CanvasBoard />
|
||||
</div>
|
||||
<MenuReset :windowWidth=windowWidth />
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style src="./assets/css/main.css">
|
||||
|
@ -43,14 +43,14 @@ h1, .desktop-title {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#container {
|
||||
.container {
|
||||
display: flex;
|
||||
height: calc(100vh - 100px);
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#burger-toggle {
|
||||
.burger-toggle {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
font-size: 1.5em;
|
||||
@ -75,7 +75,7 @@ select {
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
@ -126,12 +126,12 @@ label,
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#canvas-board {
|
||||
.canvas-board {
|
||||
flex: 1;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#main-menu {
|
||||
.main-menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
@ -139,12 +139,12 @@ label,
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
#main-menu::-webkit-scrollbar {
|
||||
.main-menu::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
#main-menu {
|
||||
.main-menu {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
@ -170,11 +170,11 @@ label,
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#burger-toggle {
|
||||
.burger-toggle {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#main-menu {
|
||||
.main-menu {
|
||||
background: var(--dark2);
|
||||
margin: 0 auto;
|
||||
flex-direction: column;
|
||||
|
@ -187,6 +187,7 @@
|
||||
<canvas
|
||||
id="board-canvas"
|
||||
ref="board-canvas"
|
||||
class="board-canvas"
|
||||
:width="store.renderer.width"
|
||||
:height="store.renderer.height"
|
||||
/>
|
||||
|
@ -56,8 +56,6 @@
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>Refresh Rate (ms)</label>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<input
|
||||
id="refreshRate"
|
||||
name="refreshRate"
|
||||
|
Loading…
Reference in New Issue
Block a user