adaptive screen size + overflow

This commit is contained in:
Ali Gator 2022-01-14 12:36:04 +01:00
parent 523dda45e9
commit d29cbb307b
4 changed files with 18 additions and 9 deletions

View File

@ -32,7 +32,7 @@ export default {
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
* {
@ -40,6 +40,7 @@ export default {
padding: 0;
}
body {
background: black;
color: white;
@ -63,10 +64,12 @@ h1 {
}
#main {
flex: 4;
}
#container {
display: flex;
height: calc(100vh - 100px);
overflow: hidden;
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<main id="main">
<main id="mainContent">
<canvas
id="canvas"
ref="canvas"
@ -46,6 +46,8 @@ export default {
mounted() {
this.canvas = this.$refs['canvas']
this.ctx = this.canvas.getContext('2d')
this.$store.commit('setCanvasWidth', this.canvas.parentElement.clientWidth)
this.$store.commit('setCanvasHeight', this.canvas.parentElement.clientHeight)
this.$root.$on('draw1d', () => { this.draw1d() })
this.$root.$on('draw2dNew', () => { this.draw2dNew() })
this.$root.$on('draw2dLast', () => { this.draw2dLast() })
@ -125,4 +127,8 @@ export default {
}
}
</script>
<style>
#mainContent {
min-width: 70%;
}
</style>

View File

@ -25,8 +25,8 @@ export default {
<style>
#sidebar {
flex-basis: fit-content;
width: 25%;
padding: 0 10px;
width: fit-content;
overflow-y: scroll;
}
</style>

View File

@ -21,8 +21,8 @@ export default new Vuex.Store({
liveColor: '#000000',
deadColor: '#AA78E8',
},
canvasWidth: 1280,
canvasHeight: 720,
canvasWidth: 0,
canvasHeight: 0,
refreshRate: 300,
initial1dState: "onecell",
activeMenu: "Elementary Cellular Automata",