gator/explorata
gator/explorata
1
0
Fork 0
Code Pull Requests Projects Releases 1 Activity

fix: added class for css styling (rather than id selector)

Browse Source
This commit is contained in:
Ali Gator 2024-04-27 14:40:13 +02:00
parent 69fad85b45
commit b68457c9a1
4 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.vue
View File

@ -35,19 +35,19 @@
</script> </script>
<template> <template>
<div id="main"> <main>
<h1 id="main-title" v-if="store.mainMenu || windowWidth <= 800"> <h1 id="main-title" class="main-title" v-if="store.mainMenu || windowWidth <= 800">
<span id="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"> <div id="container" class="container">
<MainMenu v-if="store.mainMenu || windowWidth >= 800" /> <MainMenu class="main-menu" v-if="store.mainMenu || windowWidth >= 800" />
<CanvasBoard /> <CanvasBoard />
</div> </div>
<MenuReset :windowWidth=windowWidth /> <MenuReset :windowWidth=windowWidth />
</div> </main>
</template> </template>
<style src="./assets/css/main.css"> <style src="./assets/css/main.css">

18
src/assets/css/main.css
View File

@ -43,14 +43,14 @@ h1, .desktop-title {
text-transform: uppercase; text-transform: uppercase;
} }
#container { .container {
display: flex; display: flex;
height: calc(100vh - 100px); height: calc(100vh - 100px);
overflow: hidden; overflow: hidden;
flex-direction: column; flex-direction: column;
} }
#burger-toggle { .burger-toggle {
display: none; display: none;
cursor: pointer; cursor: pointer;
font-size: 1.5em; font-size: 1.5em;
@ -75,7 +75,7 @@ select {
} }
input[type="number"] { input[type="number"] {
width: 100%; max-width: 100%;
height: 100%; height: 100%;
} }
@ -126,12 +126,12 @@ label,
font-weight: bold; font-weight: bold;
} }
#canvas-board { .canvas-board {
flex: 1; flex: 1;
margin: 0 auto; margin: 0 auto;
} }
#main-menu { .main-menu {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
@ -139,12 +139,12 @@ label,
} }
/* Hide scrollbar for Chrome, Safari and Opera */ /* Hide scrollbar for Chrome, Safari and Opera */
#main-menu::-webkit-scrollbar { .main-menu::-webkit-scrollbar {
display: none; display: none;
} }
/* Hide scrollbar for IE, Edge and Firefox */ /* Hide scrollbar for IE, Edge and Firefox */
#main-menu { .main-menu {
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
} }
@ -170,11 +170,11 @@ label,
padding: 0 10px; padding: 0 10px;
} }
#burger-toggle { .burger-toggle {
display: inline; display: inline;
} }
#main-menu { .main-menu {
background: var(--dark2); background: var(--dark2);
margin: 0 auto; margin: 0 auto;
flex-direction: column; flex-direction: column;

1
src/components/CanvasBoard.vue
View File

@ -187,6 +187,7 @@
<canvas <canvas
id="board-canvas" id="board-canvas"
ref="board-canvas" ref="board-canvas"
class="board-canvas"
:width="store.renderer.width" :width="store.renderer.width"
:height="store.renderer.height" :height="store.renderer.height"
/> />

2
src/components/MenuGeneralOptions.vue
View File

@ -56,8 +56,6 @@
</div> </div>
<div class="form-field"> <div class="form-field">
<label>Refresh Rate (ms)</label> <label>Refresh Rate (ms)</label>
</div>
<div class="form-field">
<input <input
id="refreshRate" id="refreshRate"
name="refreshRate" name="refreshRate"