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

View File

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

View File

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

View File

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