From 65c770d1d8b4b1d6fe3beae9f0ada4bf8f8856cb Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Wed, 29 Jun 2022 16:43:44 +0200 Subject: [PATCH] Fix size of chessboard following container --- base_rules.js | 19 +++++++++++++++---- common.css | 14 +++++++------- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/base_rules.js b/base_rules.js index 5eb4d77..ea34a3d 100644 --- a/base_rules.js +++ b/base_rules.js @@ -559,10 +559,21 @@ export default class ChessRules { graphicalInit() { // NOTE: not window.onresize = this.re_drawBoardElts because scope (this) window.onresize = () => this.re_drawBoardElements(); - this.re_drawBoardElements(); - this.initMouseEvents(); - const chessboard = - document.getElementById(this.containerId).querySelector(".chessboard"); + const g_init = () => { + this.re_drawBoardElements(); + this.initMouseEvents(); + }; + let container = document.getElementById(this.containerId); + if (container.getBoundingClientRect().width == 0) { + // Element not ready yet + let ro = new ResizeObserver(() => { + ro.unobserve(container); + g_init(); + }); + ro.observe(container); + } + else + g_init(); } re_drawBoardElements() { diff --git a/common.css b/common.css index 1f1809a..e9bf31c 100644 --- a/common.css +++ b/common.css @@ -37,7 +37,10 @@ main > div { margin-top: 25vh; min-height: 500px; min-width: 320px; - max-width: 800px; /*useful for rules display only*/ +} + +#gameInfos { + max-width: 800px; } @media(max-height: 800px) { @@ -58,17 +61,14 @@ main > div { } #boardContainer { - margin: 0; - padding: 0; - border: none; - /* attempt https://stackoverflow.com/questions/1719452/how-to-make-a-div-always-full-screen */ position: fixed; width: 100%; height: 100%; left: 0; top: 0; - background: rgba(51,51,51,0.7); - z-index: 10; + margin: 0; + padding: 0; + border: none; } h1 { -- 2.44.0