From b63a671f99fdaa83f93f86293991097decde8411 Mon Sep 17 00:00:00 2001 From: Vika Abysova Date: Tue, 3 Oct 2023 19:25:14 +0300 Subject: [PATCH 1/4] fix responsive layout --- src/engine/Graphics2d.module.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/engine/Graphics2d.module.css b/src/engine/Graphics2d.module.css index 58f22c7d..dca09c69 100644 --- a/src/engine/Graphics2d.module.css +++ b/src/engine/Graphics2d.module.css @@ -12,7 +12,10 @@ .canvasStyles { display: block; - width: 150vw; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } @media screen and (min-width: 768px ) and (max-width: 1023px) { @@ -72,7 +75,7 @@ } .canvasStyles { - width: 150vw; + width: 40vw; margin: 0 auto; box-sizing: border-box; } From b16a62f7ff5ca57d5b6e8bcab057502770fef938 Mon Sep 17 00:00:00 2001 From: Vika Abysova Date: Thu, 12 Oct 2023 14:36:04 +0300 Subject: [PATCH 2/4] fix change layout --- src/engine/Graphics2d.module.css | 174 ++++++++++++++----------------- 1 file changed, 80 insertions(+), 94 deletions(-) diff --git a/src/engine/Graphics2d.module.css b/src/engine/Graphics2d.module.css index dca09c69..1b31bedd 100644 --- a/src/engine/Graphics2d.module.css +++ b/src/engine/Graphics2d.module.css @@ -3,118 +3,104 @@ * SPDX-License-Identifier: Apache-2.0 */ - .wrapperStyles { - width: 100%; - height: 100vh; - justify-content: center; - overflow: scroll; - } +.wrapperStyles { + width: 100%; + height: 100vh; + justify-content: center; + overflow: scroll; +} .canvasStyles { - display: block; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + display: block; + width: 150vw; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } -@media screen and (min-width: 768px ) and (max-width: 1023px) { - - .wrapperStyles { - height: calc(100% - 2.5rem); - width: calc(100% - 3rem); - border: 2px solid #dc5e47; - border-radius: 10px; - box-sizing: border-box; - } - - .canvasStyles { - aspect-ratio: 1 / 1; - } +@media screen and (min-width: 768px) and (max-width: 1023px) { + .wrapperStyles { + height: calc(100% - 2.5rem); + width: calc(100% - 3rem); + border: 2px solid #dc5e47; + border-radius: 10px; + box-sizing: border-box; + } + + .canvasStyles { + aspect-ratio: 1 / 1; + width:40vw; + } } @media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1023px) { - - .wrapperStyles { - height: calc(100% - 2.5rem); - width: calc(100%- 3rem); - } - - .canvasStyles { - aspect-ratio: 1 / 1; - } - + .wrapperStyles { + height: calc(100% - 2.5rem); + width: calc(100%- 3rem); + } + + .canvasStyles { + aspect-ratio: 1 / 1; + } } - @media screen and (min-width: 1024px) and (orientation: landscape) { - - .wrapperStyles { - height: calc(100% - 0.5rem); - width: 80%; - border: 2px solid #dc5e47; - border-radius: 10px; - } - - .canvasStyles { - margin: 0 auto; - box-sizing: border-box; - } - + .wrapperStyles { + height: calc(100% - 0.5rem); + width: 80%; + border: 2px solid #dc5e47; + border-radius: 10px; + } + + .canvasStyles { + margin: 0 auto; + box-sizing: border-box; + } } @media screen and (min-width: 1024px) and (orientation: landscape) and (max-width: 2559px) { - - .wrapperStyles { - display: block; - height: calc(100% - 0.5rem); - width: 80%; - border: 2px solid #dc5e47; - border-radius: 10px; - - } - - .canvasStyles { - width: 40vw; - margin: 0 auto; - box-sizing: border-box; - } - + .wrapperStyles { + display: block; + height: calc(100% - 0.5rem); + width: 80%; + border: 2px solid #dc5e47; + border-radius: 10px; + } + + .canvasStyles { + width: auto; + margin: 0 auto; + box-sizing: border-box; + } } @media screen and (min-width: 1024px) and (max-width: 2559px) and (orientation: portrait) { + .wrapperStyles { + width: 90%; + height: calc(100% - 0.5rem); + border: 2px solid #dc5e47; + border-radius: 10px; + display: block; + } - .wrapperStyles { - width: 90%; - height: calc(100% - 0.5rem); - border: 2px solid #dc5e47; - border-radius: 10px; - display: block; - } - - .canvasStyles { - aspect-ratio: 1/1; - width:150vw; - } - + .canvasStyles { + aspect-ratio: 1/1; + width: 150vw; + } } @media screen and (min-width: 2560px) { - .wrapperStyles { - width: 80%; - border: 2px solid #dc5e47; - border-radius: 10px; - display: flex; - align-items: center; - } - - .canvasStyles { - aspect-ratio: 1/1; - - } + .wrapperStyles { + width: 80%; + border: 2px solid #dc5e47; + border-radius: 10px; + display: flex; + align-items: center; + } + + .canvasStyles { + aspect-ratio: 1/1; + width: auto; + } } - - - - - From 01b34793de9234b7381eae5115b4e528dd617f51 Mon Sep 17 00:00:00 2001 From: Vika Abysova Date: Thu, 12 Oct 2023 14:48:34 +0300 Subject: [PATCH 3/4] fix change layout2 --- src/engine/Graphics2d.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/engine/Graphics2d.module.css b/src/engine/Graphics2d.module.css index 1b31bedd..8bdfb5e1 100644 --- a/src/engine/Graphics2d.module.css +++ b/src/engine/Graphics2d.module.css @@ -30,7 +30,7 @@ .canvasStyles { aspect-ratio: 1 / 1; - width:40vw; + width: 150vh; } } From 5456198ae1d6c366488228a01b1ac3932fd103c7 Mon Sep 17 00:00:00 2001 From: Vika Abysova Date: Thu, 12 Oct 2023 17:33:24 +0300 Subject: [PATCH 4/4] fix tablet layout --- src/engine/Graphics2d.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/engine/Graphics2d.module.css b/src/engine/Graphics2d.module.css index 8bdfb5e1..74ba56bb 100644 --- a/src/engine/Graphics2d.module.css +++ b/src/engine/Graphics2d.module.css @@ -30,7 +30,7 @@ .canvasStyles { aspect-ratio: 1 / 1; - width: 150vh; + width: 100vh; } }